第四章 WEB表单（一）

        Flask请求对象包含包含客户端在请求中发送的全部信息，对包含表单数据的post请求来说，request.form可以轻松访问用户填写的信息。Flask-WTF扩展可以把处理WEB表单的过程（如：生成表单的HTML代码和验证表单提交的数据）变成一种愉悦的体验。Flask-WTF及其依赖可以通过pip安装：

pip install flask-wtf

一. 使用flask-wtf前的配置

       Flask-WTF无需在应用层初始化，但是它要求应用配置一个秘钥，由随机字符构成，通常保存在环境变量中，而非写入源码。Flask使用这个秘钥保护用户会话，以防篡改。

from flask import Flask

app = Flask(__name__)
# 配置Flaks-WTF
app.config['SECRET_KEY'] = "hard to guess string"

        app.config字典可用于存储Flask、扩展和应用自身的配置变量，并且支持从文件或环境变量中导入配置（在原书第七章介绍）。 Flask-WTF之所以要求应用配置一个秘钥，是为了防止表单遭到跨站请求伪造（CSRF）攻击。Flask为所有表单生成安全令牌，存储在用户会话中。令牌是一种加密签名，根据秘钥生成。

二. wtforms表单类

       使用Flask-WTF时，在服务器端，每个Web表单都由一个继承自FlaskForm的类表示：

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

class NameForm(FlaskForm):
    name = StringField("What's your name?", validators=[DataRequired()])
    submit = SubmitField("SUBMIT")

       表单中的字段都定义为类变量：NameForm表单中有一个名为name的文本字段和一个名为submit的提交按钮。字段构造函数的第一个参数把表单渲染成HTML时使用的标注（label），第二个参数是一个由验证函数组成的列表，用于验证用户提交的数据是否有效。 FlaksForm基类由Flask-WTF扩展定义，故从flask-wtf中导入。字段和验证函数则直接从WTForms包中导入。

WTForms支持的HTML标准字段

字段类型	说明
BooleanField	复选框，值为True何False
DateField	文本字段，值为datetime.date格式
DateTimeField	文本字段，值为dtaetime.datetime格式
DecimalField	文本字段，值为decimal.Decimal
FileField	文件上传字段
HiddenField	隐藏的文本字段
MultipleFileField	多文件上传字段
FieldList	一组指定类型的字段
FloatField	文本字段，值为浮点数
FormField	把一个表单作为字段嵌入另一个表单
IntegerField	文本字段，值为整数
PasswordField	密码文本字段
RadioField	一组单选按钮
SelectField	下拉列表
SelectMultipleField	下拉列表，可选多个值
SubmitField	表单提交按钮
StringField	文本字段
TextAreaField	多行文本字段

WTForms表单验证函数

表单验证函数	说明
DataRequired	确保转换类型后字段中有数据
Email	验证电子邮件地址
EqualTo	比较2个字段的值，用于输入2次密码进行确认的情况
InputRequired	确保转换类型前字段中有数据
IPAddress	验证IPV4网路地址
Length	验证输入字符串的长度
MacAddress	验证MAC地址
NumberRange	验证输入的值在数字范围之内
Optional	允许字段中没有输入，将跳过其它验证函数
Regexp	使用正则表达式验证输入值
URL	验证URL
UUID	验证UUID
AnyOf	确保输入值在一组可能的值中
NoneOf	确保输入值不在一组可能的值中

三. 把表单渲染成HTML

表单字段是可调用的，在模板中调用会渲染成HTML：

    {{ form.hidden_tag() }}
    {{ form.name.label }} {{ form.name() }}
    {{ form.submit() }}

在app.py中添加如下视图处理函数：

@app.route('/')
def hello_world():
    return render_template('hello.html', form=NameForm())

运行结果如下：

        form.hidden_tag()生成一个隐藏字段，供Flask-WTF的CSRF防护机制使用。这样渲染的表单还很简陋，在调用字段时可以指定id或class属性，然后为其定义CSS样式，如：

{{ form.name(id='my-text-filed') }}

       但这种方式渲染和美化表单的工作量很大，我们可以使用BootStrap的表单样式。Flask-BootStrap提供了一个高级的辅助函数quick_form()，可以使用BootStrap预定义的表单样式渲染整个Flask-WTF表单：

{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block title %}Flask APP{% endblock %}

{% block page_content %}
    

        
Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}!
    
    {{ wtf.quick_form(form) }}
{% endblock %}

hello.py code:

from flask import Flask,render_template
from flask_wtf import FlaskForm
from flask_bootstrap import Bootstrap
from wtforms import SubmitField, StringField
from wtforms.validators import DataRequired

app = Flask(__name__)
bootstrap = Bootstrap(app)

# 配置Flaks-WTF
app.config['SECRET_KEY'] = "hard to guess string"


class NameForm(FlaskForm):
    name = StringField("What's your name?", validators=[DataRequired()])
    submit = SubmitField("SUBMIT")


@app.route('/', methods=['POST', 'GET'])
def hello_world():
    name = None
    form = NameForm()
    if form.validate_on_submit():
        name = form.name.data
        form.name.data = ''
    return render_template('hello.html', form=form, name=name)

 运行结果：

         

       表单提交后，如果数据能被所有验证函数接受，那么validate_on_submit()方法返回True，否则返回False。最后把data属性设为空字符串，清空表单字段，再次渲染界面时，各字段中将没有内容。目前视图函数仍存在一个问题：刷新界面时，将再次提交表单：

WEB表单（二）将为您分析和解决此问题~