Flask 入门-（三）Form表单提交

前言

在web程序中，form表单应用广泛， 比如用户登录， 像QQ登录这种的实现。本文采用Flask实现简单的Form表单提交的demo。

最终效果:

image.png

---

测试环境

• Ubuntu20.04/win11
• Flask
• VSCode

---

Flask Form表单实现

一般的Form表单实现

一般在HTML中， form表单采用

标签进行定义， 在form标签中加入标签：

    

        

            Username
            
        
        

            Password
            
        
        
    

Flask中Form表单的实现

在Flask中，一般不采用上面那种方式，Flask提供了一些扩展 Flask-WTF 和 wtforms, Flask中一般对Form表单的操作采用Flask-WTF实现。

pip install flask-wtf

wtforms 提供了Form表单常用的控件:

• fields: StringField, PasswordField, BooleanField, SubmitField, 用于生成标签
• validators: 验证器， 验证输入是否合法

    "DataRequired",
    "data_required",
    "Email",
    "email",
    "EqualTo",
    "equal_to",
    "IPAddress",
    "ip_address",
    "InputRequired",
    "input_required",
    "Length",
    "length",
    "NumberRange",
    "number_range",
    "Optional",
    "optional",
    "Regexp",
    "regexp",
    "URL",
    "url",
    "AnyOf",
    "any_of",
    "NoneOf",
    "none_of",
    "MacAddress",
    "mac_address",
    "UUID",
    "ValidationError",
    "StopValidation",

flask-wtf扩展包提供了一个类: FlaskForm, 一般自定义的Form都要继承这个FlaskForm。
注意: 由于浏览器具有cookies功能，为了Form表单提交的安全性考虑， Form表单提交的时候需要指定CSRF令牌， 需要在Flask中设置 SECRET_KEY：

app.config['SECRET_KEY'] = 'hello-flask'   # RuntimeError: A secret key is required to use CSRF.

SECRET_KEY的值是随机的字符串。

Flask Form表单的具体应用步骤:

• Step1: 自定义Form类，继承FlaskForm

class LoginForm(FlaskForm):
    username = StringField(label='Username', validators=[DataRequired(), Length(1, 30)])
    password = PasswordField(label='Password', validators=[DataRequired(), Length(4, 10)])
    remember = BooleanField(label='Remember me')
    submit = SubmitField(label='Login')

• Step2: 配置视图函数，实例化form对象, 并且将form对象传递给render_template()函数
  一般Form表单提交采用POST请求， 因此需要在路由里面设置 methods='POST'

@app.route('/', methods=['GET', 'POST'])
def index():
    form = LoginForm()
    if form.validate_on_submit():
        global username
        global pwd
        username = form.username.data
        pwd = form.password.data
        # 重定向为GET请求
        return redirect((url_for('success')))
    return render_template('index.html', form=form)

• Step3: 在HTML中渲染Form，生成Form标签。
  为了美观以及易用性考虑，Form表单的渲染使用 bootstrap-flask进行渲染。
  bootstrap: Twitter公司开源的前端框架，提供了bootstrap.css和bootstrap.mini.css， 包含了常用的css样式，在开发的时候不用过多考虑样式问题。
  bootstrap-flask: Flask的一个python扩展，就是对bootstrap进行了封装，在HTML中的用法和bootstrap用法相同。

pip install bootstrap-flask

bootstrap-flask的使用过程:
加载bootstrap的CSS文件(这里直接采用CDN加载， 也可以下载到本地进行加载) ---> 使用Jinja2语法导入render_form()宏函数 ---> 使用render_form()渲染传入的form对象。

   {{ bootstrap.load_css() }}
   {% from 'bootstrap/form.html' import render_form  %}

    

        {{ render_form(form=form, form_type="basic") }}
        {{ bootstrap.load_js() }}
    

关于render_form()宏函数:

{# valid form types are "basic", "inline" and "horizontal" #}
{% macro render_form(form,
                    action="",
                    method="post",
                    extra_classes=None,
                    role="form",
                    form_type="basic",
                    horizontal_columns=('lg', 2, 10),
                    enctype=None,
                    button_map={},
                    button_style="",
                    button_size="",
                    id="",
                    novalidate=False,
                    render_kw={}) %}

---

测试工程

目录结构

文件目录结构非常简单，没有包含CSS/JS文件，只有HTML模板。

image.png

代码实现

• app.py

from flask import Flask, render_template, url_for, redirect, flash
from flask_bootstrap import Bootstrap
from wtforms import StringField, PasswordField, BooleanField, SubmitField
from flask_wtf import FlaskForm
from wtforms.validators import DataRequired, Length

# https://bootstrap-flask.readthedocs.io/en/latest/

class LoginForm(FlaskForm):
    username = StringField(label='Username', validators=[DataRequired(), Length(1, 30)])
    password = PasswordField(label='Password', validators=[DataRequired(), Length(4, 10)])
    remember = BooleanField(label='Remember me')
    submit = SubmitField(label='Login')


app = Flask(__name__)
app.config['SECRET_KEY'] = 'hello-flask'   # RuntimeError: A secret key is required to use CSRF.
bootstrap = Bootstrap(app=app)  # 初始化bootstrap

username = None
pwd = None

@app.route('/login_success')
def success():
    flash(message=username)
    flash(message=pwd)
    return render_template('success.html')


@app.route('/', methods=['GET', 'POST'])
def index():
    form = LoginForm()
    if form.validate_on_submit():
        global username
        global pwd
        username = form.username.data
        pwd = form.password.data
        # 重定向为GET请求
        return redirect((url_for('success')))
    return render_template('index.html', form=form)
app.run()

• index.html

    
    
    
    
    {{ bootstrap.load_css() }}
    {% from 'bootstrap/form.html' import render_form  %}


    

        {{ render_form(form=form, form_type="basic") }}
        {{ bootstrap.load_js() }}
    

• success.html

    
    
    
    
    {{ bootstrap.load_css() }}


    

        {% for message in get_flashed_messages() %}
            {{ message }}
        {% endfor %}
        {{ bootstrap.load_js() }}
    

运行结果:

image.png

image.png

观察bootstrap-flask生成的HTML, 打开浏览器调试窗口，可以看到HTML代码:

    
    
    
    
    
    


    

        
    

        
    

        Username
              
    
    

        Password
              
    
        
    

        Remember me
    
    
    
        
        
        
    

1. bootstrap-flask 的 render_form()宏函数在渲染form表单时候自动会添加 CSRF令牌：

2. 当采用默认CDN时候bootstrap-flask 会自动加载 jquery.js, popper.js, bootstrap.min.js 这3个JavaScript