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 %}