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

# form.py
from flask_wtf import FlaskForm
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.py
# 假设 operations_functions 目录下有相应的集合操作函数
# 例如：a_merge_b.py, a_intersection_b.py 等
# 为了简化，这里直接给出示例函数，实际应用中可以按需组织

def merge_a_b(a, b):
    """模拟集合合并操作"""
    # 假设a, b是逗号分隔的字符串，需要转换为集合
    set_a = set(map(float, a.split(','))) if isinstance(a, str) and a else set()
    set_b = set(map(float, b.split(','))) if isinstance(b, str) and b else set()
    return sorted(list(set_a.union(set_b)))

def intersection_a_b(a, b):
    """模拟集合交集操作"""
    set_a = set(map(float, a.split(','))) if isinstance(a, str) and a else set()
    set_b = set(map(float, b.split(','))) if isinstance(a, str) and b else set()
    return sorted(list(set_a.intersection(set_b)))

def difference_a_b(a, b):
    """模拟集合差集操作 A \ B"""
    set_a = set(map(float, a.split(','))) if isinstance(a, str) and a else set()
    set_b = set(map(float, b.split(','))) if isinstance(a, str) and b else set()
    return sorted(list(set_a.difference(set_b)))

def symmetrical_difference_a_b(a, b):
    """模拟集合对称差集操作"""
    set_a = set(map(float, a.split(','))) if isinstance(a, str) and a else set()
    set_b = set(map(float, b.split(','))) if isinstance(a, str) and b else set()
    return sorted(list(set_a.symmetric_difference(set_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)

    # 将结果列表转换为逗号分隔的字符串以便在HTML中显示
    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, flash # 导入flash用于消息提示
from form import SetsForm
from get_res import get_result # 修正导入路径，假设get_res.py在同级目录

import os
from dotenv import load_dotenv

load_dotenv()
KEY = os.getenv("KEY", "a_very_secret_key_if_not_set") # 提供默认值以防.env文件缺失

app = Flask(__name__)
app.config['SECRET_KEY'] = KEY # SECRET_KEY用于CSRF保护和会话管理

@app.route('/', methods=['GET', 'POST'])
def index():
    form = SetsForm()

    # 检查请求方法是否为POST，并且表单验证是否通过
    if request.method == 'POST' and form.validate_on_submit():
        # 表单验证成功，提取数据
        a = str(form.user_a_value.data) # 确保数据为字符串类型，以匹配get_result的预期
        b = str(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)
    elif request.method == 'POST' and not form.validate_on_submit():
        # 表单验证失败，通常是缺少CSRF令牌或字段验证失败
        # 打印表单错误信息有助于调试
        for field, errors in form.errors.items():
            for error in errors:
                flash(f"字段 '{field}' 错误: {error}", 'danger')
        # 重新渲染表单，显示错误信息
        return render_template('index.html', form=form)

    # GET请求或POST请求但未验证通过时，首次加载页面或验证失败后重新显示表单
    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">
        <!-- 标题 -->
        <div class="main_title">
            <h1>集合操作</h1>
        </div>

        <!-- 闪现消息区域 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <ul class="flashes">
                    {% for category, message in messages %}
                        <li class="{{ category }}">{{ message }}</li>
                    {% endfor %}
                </ul>
            {% endif %}
        {% endwith %}

        <!-- 表单 -->
        <form action="{{ url_for('index') }}" method="post">
            <!-- 关键：渲染CSRF令牌 -->
            {{ form.csrf_token }}

            <!-- 用户数据 A -->
            <div class="user_data_A">
                {{ form.user_a_value.label }}
                {{ form.user_a_value(size=30, placeholder="请输入逗号分隔的数字，如1,2,3") }}
                {% if form.user_a_value.errors %}
                    <ul class="errors">
                        {% for error in form.user_a_value.errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </div>

            <!-- 用户数据 B -->
            <div class="user_data_B">
                {{ form.user_b_value.label }}
                {{ form.user_b_value(size=30, placeholder="请输入逗号分隔的数字，如4,5,6") }}
                {% if form.user_b_value.errors %}
                    <ul class="errors">
                        {% for error in form.user_b_value.errors %}
                            <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </div>

            <!-- 提交按钮 -->
            <div class="user_submit">
                {{ form.user_submit_btn() }} <br>
            </div>
        </form>

        <!-- 结果显示块 -->
        <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 %}