Flask学习之表单

Flask web表单

Flask可以直接生成一个web表单返回，并坐一些表单的验证和限制。

Flask-WTF 能保护所有表单免受跨站请求伪造（Cross-Site Request Forgery， CSRF）的攻击。恶意网站把请求发送到被攻击者已登录的其他网站时就会引发 CSRF 攻击。

为了实现 CSRF 保护， Flask-WTF 需要程序设置一个密钥。 Flask-WTF 使用这个密钥生成 加密令牌，再用令牌验证请求中表单数据的真伪。

设置密钥的方式如下：

app = Flask(__name__)
app.config['SECRET_KEY'] = 'hard to guess string'

app.config是一个字典，可用来存储框架、扩展和程序本身的配置变量。 密钥要设置有难度的字符串。

我们来个简单的例子，安装Flask-WTF，

pip install flask-wtf

然后创建一个LoginForm.py文件并写如下代码 ：

# encoding=utf-8

from flask_wtf import Form
from wtforms import StringField, PasswordField, BooleanField, SubmitField
from wtforms.validators import DataRequired, Length, Email

class LoginForm(Form):
    email = StringField('Email', validators=[DataRequired(), Length(1, 64),Email()])
    password = PasswordField('Password', validators=[
        DataRequired(), EqualTo('password2', message='Passwords must match.')])
    password2 = PasswordField('Confirm password', validators=[DataRequired()])
    remember_me = BooleanField('Keep me logged in')
    submit = SubmitField('Log In')

password和password2两个设置了密码匹配验证，服务端需要写form.validate_on_submit()即可返回验证结果，界面也会相应提示，如果不写form.validate_on_submit()那就不会验证的。

在程序入口文件app.py中写入如下内容：

# encoding=utf-8

from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from forms.LoginForm import LoginForm

app = Flask(__name__, template_folder='templates')
bootstrap = Bootstrap(app)
app.config['SECRET_KEY'] = 'hard to guess string'


@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    # 这里要做验证，否则前端不会有提示的
    if form.validate_on_submit():
        return 'login succeed'
    return render_template('auth/index.html', form=form)


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

我们用flask-bootstrap创建一个父页面base.html，做一些基本的架子搭建：

{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
    <div class="navbar navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle"
                        data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Flasky</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="page-header">
            <h1>Hello, {{ name }}!</h1>
        </div>
    </div>
{% endblock %}

最后我们新建一个login.html，我们使用最简单的表单渲染方式{{ wtf.quick_form(form) }}生成页面：

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky - Login{% endblock %}
{% block content %}
    <div class="container">
    <div class="page-header">
        <h1>Login</h1>
    </div>
    <div class="col-md-4">
        {{ wtf.quick_form(form) }}
    </div>
    </div>
{% endblock %}