flask框架制作前端网页作为GUI

原创已于 2024-01-29 12:41:12 修改 · 1.6k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2024-01-27 21:55:01 首次发布

本文详细介绍了Flask应用的基本结构，包括文件目录、必备文件、路由配置以及一个简单的文件上传功能实现案例。通过创建app.py、静态文件夹、模板和处理POST请求，展示了如何用Flask构建一个基础的web应用。

一、语法和原理

（一）、文件目录结构

需要注意的问题：启动文件命名必须是app.py。

一个典型的Flask应用通常包含以下几个基本文件和文件夹：

app.py：应用的入口文件，包含了应用的初始化和配置。
requirements.txt：应用所依赖的Python包列表。可以使用该文件来管理应用的依赖关系。
README.md：应用的说明文档，包含了应用的运行方法、配置说明等。
venv/：虚拟环境文件夹，用于隔离应用的Python环境。
除了上述基本文件和文件夹外，应用的根目录还可以包含其他一些文件，例如：

static/：静态文件目录，用于存放应用所需的静态资源，如CSS样式表、JavaScript文件、图片等。
templates/：模板文件目录，用于存放应用的HTML模板文件。Flask使用Jinja2作为模板引擎，可以通过模板文件生成动态的HTML页面。

app/
├── __init__.py
├── routes.py
├── models.py
├── forms.py
├── helpers.py
├── static/
│   ├── css/
│   ├── js/
│   └── images/
└── templates/
    └── base.html
    └── index.html
    └── ...

二、案例

（一）、目录结构如下：

在这里插入图片描述

（二）、功能与代码

读取文件到app文件夹下并将文件名写入对应的txt文件（现代浏览器不允许获取本地路径），后续通过读入txt的文件名来拼接路径，读取app文件夹下的文件。

步骤：

1、创建主页面

创建一个名为templates的目录，并在其中创建一个名为index.html的文件。将以下HTML代码粘贴到该文件中：

将url_for()函数指向的URL临时替换为了#。在实际项目中，请根据你的路由配置重新添加对应的URL路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 添加CSS样式 -->
    <style>
        /* 定义一个包含链接的容器，使其居中并分散布局 */
        .link-container {
            display: flex;
            justify-content: space-between; /* 使链接在容器内水平分散 */
            align-items: center; /* 使链接垂直居中 */
            width: 100%;
            max-width: 600px; /* 设置最大宽度以适应不同屏幕尺寸 */
            margin: 0 auto; /* 在页面中央对齐容器 */
            padding: 20px 0; /* 上下增加间距 */
        }

        /* 定义链接的基本样式 */
        .link-item {
            padding: 10px 15px; /* 内边距，提供点击区域 */
            border-radius: 4px; /* 圆角效果 */
            text-decoration: none; /* 去除默认下划线 */
            color: white; /* 文字颜色 */
            font-weight: bold; /* 加粗字体 */
            transition: background-color 0.3s ease; /* 添加平滑背景色过渡效果 */
        }

        /* 分别为三个链接设置不同的背景颜色 */
        .link-item.load-model {
            background-color: #e74c3c; /* 红色 */
        }

        .link-item.input-action {
            background-color: #2ecc71; /* 绿色 */
        }

        .link-item.output-action {
            background-color: #3498db; /* 蓝色 */
        }
    </style>

    <title>App Title</title>
</head>
<body>
    
    <!-- 创建一个包含三个链接的 Flexbox 容器 -->
    <div class="link-container">
        <!-- 第一个链接，指向 'load_model' 页面 -->
        <a href="#" class="link-item load-model">加载模型</a>
        
        <!-- 第二个链接，指向 'input' 页面 -->
        <a href="#" class="link-item input-action">输入</a>
        
        <!-- 第三个链接，指向 'output' 页面 -->
        <a href="#" class="link-item output-action">输出</a>
    </div>

    <!-- Jinja2 模板中的内容块（已移除 Flask 相关内容） -->
    <!-- {% block content %}{% endblock %} -->
</body>
</html>

2、创建二级页面

在二级页面中实现文件的上传功能。

在templates目录中创建三个子目录：load_model, input, 和 output。
在每个子目录中创建一个名为form.html的文件，并将以下HTML代码粘贴到每个文件中：

<form method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <button type="submit">提交</button>
</form>

3、后端处理

通过Python路由函数实现数据的读取和文件名写入txt

更新的app.py以处理这些表单。将以下python代码添加到app.py文件中：

from flask import Flask, render_template, request
import os

app = Flask(__name__)
model_file = 'model_name.txt'
input_file = 'input.txt'
output_file = 'output.txt'


@app.route('/')
def index():
    return render_template('index.html')

@app.route('/load_model', methods=['GET', 'POST'])
def load_model():
    if request.method == 'POST':
        file = request.files['file']
        if file:
            filename = file.filename
            file.save(os.path.join(app.root_path, filename))
            print(f"模型已加载：{filename}")
            # 名称写入txt文档
            with open(model_file, 'w') as f:
                f.write(filename)
    return render_template('load_model/form.html')

@app.route('/input', methods=['GET', 'POST'])
def input():
    if request.method == 'POST':
        file = request.files['file']
        if file:
            filename = file.filename
            file.save(os.path.join(app.root_path, 'input'))
            print(f"输入文件已上传：{filename}")
            # 名称写入txt文档
            with open(model_file, 'w') as f:
                f.write(filename)
    return render_template('input/form.html')

@app.route('/output', methods=['GET', 'POST'])
def output():
    if request.method == 'POST':
        file = request.files['file']
        if file:
            filename = file.filename
            file.save(os.path.join(app.root_path, 'output'))
            print(f"输出文件已上传：{filename}")
    return render_template('output/form.html')

if __name__ == '__main__':
    app.run(debug=True)

运行python app.py时，应用程序将在http://localhost:5000上启动。您将看到一个包含三个按钮的页面，每个按钮都链接到一个表单，用于上传本地文件。点击每个按钮将打开一个新的页面，其中包含一个文件上传表单。提交表单后，文件将被保存到相应的目录中。

标签