Flask WTForms 表单数据处理与结果动态展示教程

# form.py
from flask_wtf import FlaskForm # 注意：FlaskForm 是 Flask-WTF 提供的，它集成了 CSRF 保护
from wtforms import FloatField, SubmitField
from wtforms.validators import DataRequired # 引入必要的验证器

class SetsForm(FlaskForm):
    """
    定义一个用于接收两个浮点数输入的表单。
    """
    user_a_value = FloatField('A = ', validators=[DataRequired()])
    user_b_value = FloatField('B = ', validators=[DataRequired()])
    user_submit_btn = SubmitField('Get Res')

# get_res.py
# 假设这些是实际的集合操作函数，例如：
# from operations_functions.a_merge_b import merge_a_b
# from operations_functions.a_intersection_b import intersection_a_b
# from operations_functions.a_difference_a_b import difference_a_b
# from operations_functions.a_symmetrical_difference_b import symmetrical_difference_a_b

# 简化示例，假设这些函数直接返回处理后的字符串或可迭代对象
def merge_a_b(a, b):
    return f"合并({a}, {b})"

def intersection_a_b(a, b):
    return f"交集({a}, {b})"

def difference_a_b(a, b):
    return f"差集({a}, {b})"

def symmetrical_difference_a_b(a, b):
    return f"对称差({a}, {b})"


def get_result(a, b):
    """
    根据输入的a和b执行多种集合操作，并返回结果字符串。
    """
    res_merge_a_b = merge_a_b(a, b)
    res_intersection_a_b = intersection_a_b(a, b)
    res_difference_a_b = difference_a_b(a, b)
    res_symm_diff_a_b = symmetrical_difference_a_b(a, b)

    # 如果操作函数返回的是可迭代对象（如列表、集合），需要将其转换为字符串
    # res_merge_a_b = ', '.join(str(x) for x in res_merge_a_b)
    # res_intersection_a_b = ', '.join(str(x) for x in res_intersection_a_b)
    # res_difference_a_b = ', '.join(str(x) for x in res_difference_a_b)
    # res_symm_diff_a_b = ', '.join(str(x) for x in res_symm_diff_a_b)

    return res_merge_a_b, res_intersection_a_b, res_difference_a_b, res_symm_diff_a_b

# main.py
from flask import Flask, render_template, request, redirect, url_for
from form import SetsForm
from main_functions.get_res import get_result # 假设 get_res.py 在 main_functions 目录下

import os
from dotenv import load_dotenv

load_dotenv()
KEY = os.getenv("KEY") # 从 .env 文件加载 SECRET_KEY

app = Flask(__name__)
app.config['SECRET_KEY'] = KEY # 必须配置 SECRET_KEY 来启用 Flask-WTF 的 CSRF 保护

@app.route('/', methods=['GET', 'POST'])
def index():
    form = SetsForm() # 每次请求都创建一个表单实例

    # 检查请求方法是否为 POST 且表单验证通过
    if request.method == 'POST' and form.validate_on_submit():
        # 从表单中获取数据
        a = form.user_a_value.data
        b = form.user_b_value.data

        # 调用业务逻辑函数获取结果
        res_merge_a_b, res_intersection_a_b, res_difference_a_b, res_symm_diff_a_b = get_result(a, b)

        # 渲染模板并传递表单实例和计算结果
        return render_template('index.html',
                               form=form,
                               res_merge_a_b=res_merge_a_b,
                               res_intersection_a_b=res_intersection_a_b,
                               res_difference_a_b=res_difference_a_b,
                               res_symm_diff_a_b=res_symm_diff_a_b)

    # 对于 GET 请求或表单验证失败的 POST 请求，渲染初始表单
    # 如果表单验证失败，form 对象会包含错误信息，模板可以用来显示这些错误
    return render_template('index.html', form=form)

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

<!-- templates/index.html -->
{% extends 'base.html' %} {# 假设存在一个基础模板 base.html #}

{% block body %}
<section class="main_section">
    <div class="container">
        <!-- Title -->
        <div class="main_title">
            <h1>Enter Sets</h1>
        </div>

        <!-- Form With User Data and Submit Btn -->
        <form action="{{ url_for('index') }}" method="post">
            {{ form.csrf_token }} {# **关键点：添加 CSRF 令牌** #}

            <!-- User data A -->
            <div class="user_data_A">
                {{ form.user_a_value.label }}
                {{ form.user_a_value(size=30) }}
                {% if form.user_a_value.errors %}
                    <ul class="errors">
                        {% for error in form.user_a_value.errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </div>

            <!-- User data B -->
            <div class="user_data_B">
                {{ form.user_b_value.label }}
                {{ form.user_b_value(size=30) }}
                {% if form.user_b_value.errors %}
                    <ul class="errors">
                        {% for error in form.user_b_value.errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </div>

            <!-- Button -->
            <div class="user_submit">
                {{ form.user_submit_btn() }}
            </div>
        </form>

        <!-- Result Block -->
        <div class="result">
            {% if res_merge_a_b is defined %} {# 仅当结果存在时才显示 #}
            <div class="result_merge">
                <h5>A ⋃ B = {{ res_merge_a_b }}</h5>
            </div>
            <div class="result_intersection">
                <h5>A ⋂ B = {{ res_intersection_a_b }}</h5>
            </div>
            <div class="result_difference">
                <h5>A \ B = {{ res_difference_a_b }}</h5>
            </div>
            <div class="result_symmetrical_difference">
                <h5>A △ B = {{ res_symm_diff_a_b }}</h5>
            </div>
            {% endif %}
        </div>
    </div>
</section>
{% endblock %}

<form action="{{ url_for('index') }}" method="post">
    {{ form.csrf_token }} {# 确保这里包含 CSRF 令牌 #}
    <!-- 其他表单字段和提交按钮 -->
</form>