Flask+WTForms获取表单数据调用函数并展示结果问题排查

问题描述 #

Flask新手尝试将集合运算逻辑迁移至Web端，当前无法获取表单数据、调用get_result()函数，页面无运算结果输出。

项目代码 #

main.py #

from flask import Flask, render_template, request
from form import SetsForm
from main_functions.get_res import get_result

import os
from dotenv import load_dotenv

load_dotenv()
KEY = os.getenv("KEY")

app = Flask(__name__)
app.config['SECRET_KEY'] = KEY

@app.route('/', methods=['GET', 'POST'])
def index():
    form = SetsForm()
    print('Before get result')  # 该行正常打印

    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)

        print(res_merge_a_b, res_intersection_a_b, res_difference_a_b,
              res_symm_diff_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)

    return render_template('index.html', form=form)

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

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_b import difference_a_b
from operations_functions.a_symmetrical_difference_b import symmetrical_difference_a_b


def get_result(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

form.py #

from wtforms import IntegerField, StringField, FloatField, SubmitField


class SetsForm(FlaskForm):
    user_a_value = FloatField('A = ')
    user_b_value = FloatField('B = ')

    user_submit_btn = SubmitField('Get Res')

index.html #

{% extends '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, like user input a/b -->
        <form action="{{ url_for('index') }}" method="post">

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

            <!-- User data A -->
            <div class="user_data_A">
                {{form.user_a_value.label}}
                {{form.user_a_value(size=30)}}
            </div>

            <!-- User data B -->
            <div class="user_data_B">
                {{form.user_b_value.label}}
                {{form.user_b_value(size=30)}}
            </div>
        </form>

        <!-- Result Block -->
        <div class="result">
            <!-- Result Merge -->
            <div class="result_merge">
                <h5>A ⋃ B = {{ res_merge_a_b }}</h5>
            </div>

            <!-- Result Intersection -->
            <div class="result_intersection">
                <h5>A ⋂ B = {{ res_intersection_a_b }}</h5>
            </div>

            <!-- Result Difference -->
            <div class="result_difference">
                <h5>A \ B = {{ res_difference_a_b }}</h5>
            </div>

            <!-- Result Symmetrical Difference -->
            <div class="result_symmetrical_difference">
                <h5>A △ B = {{ res_symm_diff_a_b }}</h5>
            </div>

        </div>

    </div>

</section>
{% endblock %}

控制台日志 #

C:\Users\Iwlj4s\Desktop\pm\operations_on_sets_web\.venv\Scripts\python.exe C:\Users\Iwlj4s\Desktop\pm\operations_on_sets_web\main.py 
 * Serving Flask app 'main'
 * Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 245-522-682
Before get result
127.0.0.1 - - [20/Dec/2023 19:39:33] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [20/Dec/2023 19:39:33] "GET /static/css/main.css HTTP/1.1" 304 -
127.0.0.1 - - [20/Dec/2023 19:39:36] "POST / HTTP/1.1" 200 -
Before get result
127.0.0.1 - - [20/Dec/2023 19:39:37] "GET /static/css/main.css HTTP/1.1" 304 -

问题原因与修改方案 #

核心问题 #

1. form.py未导入FlaskForm基类：导致表单验证逻辑完全失效，form.validate_on_submit()始终返回False，无法进入POST处理分支。
2. HTML表单缺少CSRF令牌：Flask-WTF强制要求CSRF验证，缺少令牌会直接拒绝表单提交。
3. 字段类型不符合集合输入需求：原代码用FloatField只能接收单个数值，无法输入多元素集合。

修改后的代码 #

1. form.py（修复导入与字段类型）

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField
from wtforms.validators import DataRequired

class SetsForm(FlaskForm):
    user_a_value = StringField('集合A（逗号分隔元素，如1,2.5,3）', validators=[DataRequired()])
    user_b_value = StringField('集合B（逗号分隔元素，如2,3,4）', validators=[DataRequired()])
    user_submit_btn = SubmitField('获取结果')

2. main.py（添加集合转换逻辑）

from flask import Flask, render_template, request
from form import SetsForm
from main_functions.get_res import get_result

import os
from dotenv import load_dotenv

load_dotenv()
KEY = os.getenv("KEY")

app = Flask(__name__)
app.config['SECRET_KEY'] = KEY

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

    if request.method == 'POST' and form.validate_on_submit():
        # 将用户输入的字符串转为集合
        a = set(float(x.strip()) for x in form.user_a_value.data.split(',') if x.strip())
        b = set(float(x.strip()) for x in form.user_b_value.data.split(',') if x.strip())

        res_merge_a_b, res_intersection_a_b, res_difference_a_b, res_symm_diff_a_b = get_result(a, b)

        print(res_merge_a_b, res_intersection_a_b, res_difference_a_b, res_symm_diff_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)

    return render_template('index.html', form=form)

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

3. index.html（添加CSRF令牌与结果显示控制）

{% extends 'base.html' %}

{% block body %}
<section class="main_section">
    <div class="container">
        <div class="main_title">
            <h1>输入集合</h1>
        </div>

        <form action="{{ url_for('index') }}" method="post">
            {{ form.hidden_tag() }} <!-- 新增CSRF令牌 -->

            <div class="user_data_A">
                {{form.user_a_value.label}}
                {{form.user_a_value(size=30)}}
            </div>

            <div class="user_data_B">
                {{form.user_b_value.label}}
                {{form.user_b_value(size=30)}}
            </div>

            <div class="user_submit">
                {{form.user_submit_btn()}} <br>
            </div>
        </form>

        <div class="result">
            {% if res_merge_a_b %} <!-- 仅当有结果时显示 -->
            <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 %}

内容的提问来源于stack exchange，提问作者你的噩梦