FlaskForm详解

FlaskForm，是Flask框架中的一个表单处理扩展，它可以帮我们更方便地管理表单，实现表单验证、提交等功能，减轻了我们的工作压力。本文从多个方面对FlaskForm做详细的阐述，以便读者更好地理解与使用它。

一、FlaskForm二级联动

在我们的Web应用中，常常需要进行二级联动功能的实现，比如省、市、区的地址选择，或者是商品类型、子类的选择等等。使用FlaskForm可以很方便地实现这样的功能。

首先我们需要定义表单类，下面是一个例子：

from wtforms import SelectField, Form, validators
 
choices_a = [("", "请选择..."), ("1", "选项1"), ("2", "选项2"), ("3", "选项3"), ("4", "选项4")]
choices_b = [("", "请选择..."), ("a", "选项A"), ("b", "选项B"), ("c", "选项C"), ("d", "选项D")]
 
class TestForm(Form):
    select_a = SelectField("级别1", choices=choices_a, validators=[validators.DataRequired()])
    select_b = SelectField("级别2", choices=choices_b, validators=[validators.DataRequired()])

接下来，我们需要在视图函数中使用这个表单类。在GET请求中，我们需要传递一个空的表单实例到前端，让用户进行选择；在POST请求中，我们需要对用户选择的数据进行处理并返回结果。

from flask import render_template, request
 
@app.route("/double_select", methods=["GET", "POST"])
def double_select():
    form = TestForm(request.form)
 
    if request.method == "POST" and form.validate():
        select_a = form.select_a.data
        select_b = form.select_b.data
 
        # 处理选项数据...
 
        return "success"
 
    return render_template("double_select.html", form=form)

在前端模板中，我们需要利用FlaskForm提供的表单插件来渲染二级联动的功能。下面是一个例子：

<form method="post" action="">
    {{ form.select_a.label }} {{ form.select_a }}
    {{ form.select_b.label }} {{ form.select_b }}
    <input type="submit" value="提交">
</form>
{{ form.hidden_tag() }}
 
...
 
<script>
$(function() {
    $("#select_a").on("change", function() {
        $.get("/get_select_b", {"select_a": $(this).val()}, function(data) {
            var optionsHtml = "";
            $.each(data, function(key, value) {
                optionsHtml += "<option value='" + key + "'>" + value + "</option>";
            });
            $("#select_b").html(optionsHtml);
        }, "json");
    });
});
</script>

在这个例子中，我们使用了flask_wtf插件来渲染表单，使用了jQuery库来实现异步加载子类选项数据的功能。

二、FlaskForm CSRF

在我们的Web应用中，跨站请求伪造（CSRF）是一种常见的安全漏洞，攻击者可以通过构造恶意请求来实现用户信息、资金等的窃取或者篡改。使用FlaskForm提供的CSRF保护可以很好地防御这种安全漏洞。

在Flask中，我们可以通过在FlaskForm实例中设置SECRET_KEY来启用CSRF保护。下面是一个例子：

from flask_wtf.csrf import CSRFProtect
 
app = Flask(__name__)
app.config["SECRET_KEY"] = "your-secret-key"
csrf = CSRFProtect(app)

这里我们设置了一个随机的SECRET_KEY，用来加密和验证TOKEN，保证应用的安全性。然后我们使用CSRFProtect包装我们的Flask应用来启用CSRF保护。

启用CSRF保护后，我们需要在前端模板中使用FlaskForm提供的表单插件来渲染form标签，其中包含了_csrf_token的隐藏字段。下面是一个例子：

<form method="post" action="">
    {{ form.username.label }} {{ form.username }}
    {{ form.password.label }} {{ form.password }}
    <input type="submit" value="提交">
</form>
{{ form.hidden_tag() }}

当我们在POST请求中提交表单数据时，FlaskForm会自动从表单数据中获取_csrf_token字段，并且与其中包含的加密签名进行比较验证，如果验证失败则抛出异常。

三、FlaskForm联合查询

在我们的Web应用中，常常需要实现复杂的联合查询功能，比如商品名称、类型、价格的多条件组合查询等等。使用FlaskForm可以很方便地实现这样的功能。

FlaskForm提供了各种表单字段类型来方便我们实现多条件查询，比如StringField、SelectField、DateField等。下面是一个例子：

from flask_wtf import FlaskForm
from wtforms import StringField, SelectField, DateField
from wtforms.validators import DataRequired
 
class QueryForm(FlaskForm):
    name = StringField("名称")
    category = SelectField("分类", choices=[("all", "全部"), ("1", "分类1"), ("2", "分类2")])
    price_min = StringField("最小价格")
    price_max = StringField("最大价格")
    create_time = DateField("创建日期", format="%Y-%m-%d")
    update_time = DateField("更新日期", format="%Y-%m-%d")

在视图函数中，我们使用这个表单类来接收并且处理用户提交的查询条件。下面是一个例子：

@app.route("/query", methods=["GET", "POST"])
def query():
    form = QueryForm(request.form)
 
    if request.method == "POST" and form.validate():
        name = form.name.data.strip() or None
        category = form.category.data
        if category == "all":
            category = None
 
        try:
            price_min = float(form.price_min.data.strip())
        except:
            price_min = None
 
        try:
            price_max = float(form.price_max.data.strip())
        except:
            price_max = None
 
        create_time = form.create_time.data or None
        update_time = form.update_time.data or None
 
        # 处理查询条件...
 
        return "success"
 
    return render_template("query.html", form=form)

在前端模板中，我们可以使用FlaskForm提供的表单插件来渲染表单。下面是一个例子：

<form method="post" action="">
    {{ form.name.label }} {{ form.name }}
    {{ form.category.label }} {{ form.category }}
    {{ form.price_min.label }} {{ form.price_min }}
    {{ form.price_max.label }} {{ form.price_max }}
    {{ form.create_time.label }} {{ form.create_time }}
    {{ form.update_time.label }} {{ form.update_time }}
    <input type="submit" value="查询">
</form>
{{ form.hidden_tag() }}

四、FlaskForm CSRF取消

在某些情况下，我们可能需要在特定表单中取消FlaskForm的CSRF保护，比如在我们需要让用户在不登录的情况下进行某些操作的时候。FlaskForm提供了一个@csrf_exempt装饰器来完成这个功能。

在视图函数中，我们只需要在函数上方加上@csrf_exempt装饰器即可取消FlaskForm的CSRF保护。下面是一个例子：

from flask_wtf.csrf import csrf_exempt
 
@app.route("/some_action", methods=["POST"])
@csrf_exempt
def some_action():
    # 处理不需要CSRF保护的操作...
    return "success"

五、FlaskForm Python三级联动

除了常见的二级联动，有些特定的业务场景可能需要实现三级或者更多级联动的功能。FlaskForm同样可以很方便地实现这些功能。

在实现三级联动的时候，我们需要使用三个FlaskForm实例来分别表示三个下拉框。下面是一个例子：

from wtforms import Form, SelectField
 
class SelectAForm(Form):
    select_a = SelectField("级别1")
 
class SelectBForm(Form):
    select_b = SelectField("级别2")
 
class SelectCForm(Form):
    select_c = SelectField("级别3")

然后我们需要在视图函数中使用这三个表单来实现三级联动。在GET请求中，我们需要传递一族空表单到前端；在POST请求中，我们需要处理用户的选择，并且动态返回下一级的选项。下面是一个例子：

@app.route('/three_levels')
def three_levels():
    select_a_form = SelectAForm()
    select_b_form = SelectBForm()
    select_c_form = SelectCForm()
 
    return render_template("three_levels.html", select_a_form=select_a_form, select_b_form=select_b_form, select_c_form=select_c_form)
 
@app.route("/get_b")
def get_b():
    select_b_form = SelectBForm()
    id = request.args.get("id", 0, type=int)
 
    if id == 1:
        select_b_form.select_b.choices = [("", "选择..."), (1, "选项1"), (2, "选项2"), (3, "选项3")]
    elif id == 2:
        select_b_form.select_b.choices = [("", "选择..."), (4, "选项4"), (5, "选项5"), (6, "选项6")]
    elif id == 3:
        select_b_form.select_b.choices = [("", "选择..."), (7, "选项7"), (8, "选项8"), (9, "选项9")]
 
    return jsonify(select_b_form.select_b.choices)
 
@app.route("/get_c")
def get_c():
    select_c_form = SelectCForm()
    id = request.args.get("id", 0, type=int)
 
    if id == 1:
        select_c_form.select_c.choices = [("", "选择..."), (1, "选项1"), (2, "选项2"), (3, "选项3")]
    elif id == 2:
        select_c_form.select_c.choices = [("", "选择..."), (4, "选项4"), (5, "选项5"), (6, "选项6")]
    elif id == 3:
        select_c_form.select_c.choices = [("", "选择..."), (7, "选项7"), (8, "选项8"), (9, "选项9")]
 
    return jsonify(select_c_form.select_c.choices)

在前端模板中，我们需要利用FlaskForm提供的表单插件来渲染三个下拉框。其中第一级会触发AJAX请求，返回第二级的选项；第二级会触发AJAX请求，返回第三级的选项。下面是一个例子：

<form>

{{ select_a_form.select_a.label }} {{ select_a_form.select_a }}

{{ select_b_form.select_b.label }} {{ select_b_form.select_b }}

{{ select_c_form.select_c.label }} {{ select_c_form.select_c }}

</form>
<script>
$(function() {
 $("#select_a").on("change", function() {
 var id = $(this).val();
 if (id) {
 $.get("/get_b", {"id": id}, function(data) {
 var optionsHtml = "<option value=''>-</option>";
 $.each(data, function(key, value) {
 optionsHtml += "<option value='" + key + "'>" + value + "</option>";
 });
 $("#select_b").html(optionsHtml).change();
 }, "json");
 } else {
 $("#select_b").html("<option value=''>-</option>");
 $("#select_c").html("<option value=''>-</option>");
 }
 });
原创文章，作者：ZQSQ，如若转载，请注明出处：https://www.506064.com/n/138098.html