python--Flask-wtf

flask-wtf

• 避免重复操作，表单操作很多；
• 防止表单遭遇跨站请求伪造(csrf ==== cross-site request forgery)；

csrf 跨站请求伪造流程图：

1.为什么使用Flask-WTF？

request 对象公开了所有客户端发送的请求信息。特别是 request.form 可以访问POST 请求提交的表单数据。尽管 Flask 的 request 对象提供的支持足以处理 web表单，但依然有许多任务会变得单调且重复。表单的 HTML 代码生成和验证提交的表单数据就是两个很好的例子。

优势： Flask-WTF 扩展使得处理 web 表单能获得更愉快的体验。该扩展是一个封装了与框架无关的 WTForms 包的 Flask 集成。

2.什么是表单处理?

在网页中，为了和用户进行信息交互总是不得不出现一些表单。flask 设计了WTForm 表单库来使flask可以更加简便地管理操作表单数据。

WTForm中最重要的几个概念如下：

• Form类，开发者自定义的表单必须继承自Form类或者其子类。
  Form类最主要的功能是通过其所包含的Field类提供对表单内数据的快捷访问方式。

• 各种Field类，即字段。
  一般而言每个Field类都对应一个input的HTML标签。比如WTForm自带的一些Field类，比如BooleanField就对应<input type=“checkbox”>， SubmitField就对应<input type=“submit”>等等。

• Validator类。
  这个类用于验证用户输入的数据的合法性。比如Length验证器可以用于验证输入数据的长度，FileAllowed 验证上传文件的类型等等。

另外，flask为了防范csfr(cross-site request forgery)攻击， 默认在使用flask-wtf之前要求app一定要设置过secret_key。

最简单地可以通过 app.config[‘SECRET_KEY’] = ‘xxxx’ 来配置。

3.常见的Field类

Field类	说明
PasswordField	密码字段，自动将输入转化为小黑点
DateField	文本字段，格式要求为 datetime.date 一样
IntergerField	文本字段，格式要求是整数
DecimalField	文本字段，格式要求和 decimal.Decimal 一样
FloatField	文本字段，值是浮点数
BooleanField	复选框，值为 True 或者 False
RadioField	一组单选框
SelectField	下拉列表，需要注意一下的是 choices 参数确定了下拉选项，但是和 HTML 中的 <select> 标签一样，其是一个 tuple 组成的列表，可以认为每个 tuple 的第一项是选项的真正的值，而第二项是 alias
MultipleSelectField	可选多个值的下拉列表

Validator：

Validator是验证函数，把一个字段绑定某个验证函数之后，flask会在接收表单中的数据之前对数据做一个验证，如果验证成功才会接收数据。

每一个validator类需要哪些参数：基本上每一个validator都有message参数，指出当输入数据不符合validator要求时显示什么信息。

验证函数Validator如下，具体的validator可能需要的参数不太一样，这里只给出一些常用的，更多详细的用法可以参见 wtforms / validators.py 文件的源码：

验证函数	说明
Email	验证电子邮件地址的合法性，要求正则模式是^.+@([^.@][^@]+)$
EqualTo	比较两个字段的值，通常用于输入两次密码等场景，可写参数fieldname，不过注意其是一个字符串变量，指向同表单中的另一个字段的字段名
IPAddress	验证IPv4地址，参数默认ipv4=True，ipv6=False。如果想要验证ipv6可以设置这两个参数反过来。
Length	验证输入的字符串的长度，可以有min、max两个参数指出要设置的长度下限和上限，注意参数类型是字符串，不是INT
NumberRange	验证输入数字是否在范围内，可以有min和max两个参数指出数字上限下限，注意参数类型是字符串，不是INT。参数里可以设置%(min)s和%(max)s两个格式化部分，来告诉前端 =这个范围到底是多少。其他validator也有这种类似的小技巧，可以参看源码。
Optional	无输入值时跳过同字段的其他验证函数
Required	必填字段
Regexp	用正则表达式验证值，参数regex=‘正则模式’
URL	验证URL，要求正则模式是^[a-z]+://(?P<host>[^/:]+)(?P<port>:[0-9]+)?(?P<path>/.*)?$
AnyOf	确保值在可选值列表中。
NoneOf	确保值不在可选值列表中

flask-wtf的使用流程

• 编写 forms.py 文件， 定义一个关于表单的类；
  注意： 一定要有提交的按钮

• 业务逻辑文件 app.py 中：

  • 实例化表单类：form = RegisterForm()
  • 验证表单内容是否提交成功：form.validate_on_submit()
  • 获取表单里面的内容(两种方法)：
    • 通过request对象获取：request.form[‘key值’]
    • 通过form对象获取：form.key值.data

• 表现逻辑文件 wtf.html 中：

  • 导入wtf模块：{% import “bootstrap/wtf.html” as wtf %}
  • 自动生成表单对应的html： {{ wtf.quick_form(form) }}

案例_wtf实现注册页面
在 forms.py 文件中定义一个关于表单的类：

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, SelectField, SelectMultipleField
from wtforms.validators import DataRequired, Length, EqualTo, Email, Regexp


class RegisterForm(FlaskForm):
    name = StringField(
        label='用户名',
        # 验证用户名：用户名不能为空
        validators=[DataRequired()]
    )

    password = PasswordField(
        label='密码',
        validators=[
            DataRequired(),
            # 验证密码长度是否为6～8之间，如果不是，报错
            Length(8, 16, message='密码格式错误!')
        ]
    )

    repassword = PasswordField(
        label='确认密码',
        validators=[
            DataRequired(),
            # 验证当前表单输入的内容和password这个表单输入的内容是否一致，如果不一致，报错
            EqualTo('password', message='密码不一致!')
        ]
    )

    email = StringField(
        label='邮箱',
        validators=[
            DataRequired(),
            # 验证当前表单输入的内容是否为一个邮箱地址，如果不是，报错
            Email(message='邮箱格式错误!')
        ]
    )

    phone = StringField(
        label='手机号码',
        validators=[
            DataRequired(),                  
            # 验证当前表单输入的电话号码是否符合首位为1，由11位数字组成的正则表达式，如果不是，报错
            Regexp(r'1\d{10}', message='手机号码格式错误!')
        ]

    )
    
	# RadioField也可以实现单选按钮，但是不美观，推荐用 SelectField
    gender = SelectField(
        label='性别',
        coerce=int,
        choices=[(1, '男'), (2, '女')]
    )

	# 多选按钮
    tech = SelectMultipleField(
        label='擅长领域',
        coerce=int,
        choices=[(1, 'python'), (2, 'linux'), (3, 'java'), (4, 'php'), (5, 'ruby'), (6, 'c++')]
    )

    submit = SubmitField(label='注册')

在业务逻辑文件 app.py 中写视图函数：

from flask_bootstrap import Bootstrap
from flask import Flask, render_template, request, redirect, flash, url_for
from forms import RegisterForm

users = [
    {
        'username': 'root',
        'password': 'root'
    }
]

app = Flask(__name__)
app.config['SECRET_KEY'] = 'westos'
bootstrap = Bootstrap(app)


@app.route('/wtf/', methods=['GET', 'POST'])
def wtf():
	# 实例化表单，将来传递到前端，进行生成对应的html
    form = RegisterForm()
    # 判断提交的数据是否符合form表单定义的验证
    # 如果通过验证，则将注册的用户添加到服务器，否则重新注册
    if form.validate_on_submit():
        username = request.form['name']
        password = request.form['password']
        gender = request.form['gender']
        tech = request.form['tech']
		
        print(request.form)
        print('********************************')
        print(gender)
        print('********************************')
        print(form.tech.data)
        
        for user in users:
            if user['username'] == username:
                flash(message='用户%s已存在' % (username))
                return redirect(url_for('wtf'))
        else:
            users.append(dict(username=username, password=password))
            flash('用户%s注册成功，请登录......' % (username))
            return redirect(url_for('login'))
    return render_template('wtf.html', form=form)

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

在templates下写表现逻辑文件 wtf.html：

{% extends 'base.html' %}
{# 导入模块，并重命名为wtf #}
{% import 'bootstrap/wtf.html' as wtf %}
{% block title %} wtf测试-注册页面 {% endblock %}
{% block content %}

    


        


            
wtf测试-注册页面
			{# 根据后台传递过来的form对象生成对应的html代码 #}
            {{ wtf.quick_form(form) }}

        

    

{% endblock %}

实现页面：

成功注册页面后，打印注册信息：