Flask Web Development —— Web表單（上）

CODING 發(fā)布于2019-07-24 17:49 / 1159人閱讀

摘要：每個(gè)表單域都可以連接到一個(gè)或多個(gè)是一個(gè)用于檢查用戶提交的輸入是否合法的函數(shù)。表單域構(gòu)造函數(shù)的第一個(gè)參數(shù)是一個(gè)，在渲染表單到時(shí)會(huì)使用。驗(yàn)證確保提交的表單域不為空。表單域驗(yàn)證都是直接從包中導(dǎo)入。表格展示了一組支持的標(biāo)準(zhǔn)表單域。

第二章中介紹的request對(duì)象公開(kāi)了所有客戶端發(fā)送的請(qǐng)求信息。特別是request.form可以訪問(wèn)POST請(qǐng)求提交的表單數(shù)據(jù)。

盡管Flask的request對(duì)象提供的支持足以處理web表單，但依然有許多任務(wù)會(huì)變得單調(diào)且重復(fù)。表單的HTML代碼生成和驗(yàn)證提交的表單數(shù)據(jù)就是兩個(gè)很好的例子。

Flask-WTF擴(kuò)展使得處理web表單能獲得更愉快的體驗(yàn)。該擴(kuò)展是一個(gè)封裝了與框架無(wú)關(guān)的WTForms包的Flask集成。

Flask-WTF和它的依賴集可以通過(guò)pip來(lái)安裝：

(venv) $ pip install flask-wtf

1、跨站請(qǐng)求偽造（CSRF）保護(hù)

默認(rèn)情況下，F(xiàn)lask-WTF保護(hù)各種形式對(duì)跨站請(qǐng)求偽造（CSRF）攻擊。一個(gè)CSRF攻擊發(fā)生在一個(gè)惡意網(wǎng)站發(fā)送請(qǐng)求給受害者登錄的其他網(wǎng)站。

為了實(shí)現(xiàn)CSRF保護(hù)，F(xiàn)lask-WTF需要應(yīng)用程序去配置一個(gè)加密密鑰。Flask-WTF使用這個(gè)密鑰去生成加密令牌用于驗(yàn)證請(qǐng)求表單數(shù)據(jù)的真實(shí)性。示例4-1展示如何配置加密密鑰。

示例4-1. hello.py：Flask-WTF配置

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

app.config字典通常是框架、擴(kuò)展或應(yīng)用程序自身存放配置變量的地方，可以使用標(biāo)準(zhǔn)字典語(yǔ)法添加配置值到app.config中。配置對(duì)象提供方法來(lái)從文件或環(huán)境導(dǎo)入配置值。

SECRET_KEY配置變量作為Flask和一些第三方擴(kuò)展的通用加密密鑰。加密的強(qiáng)度取決于這個(gè)變量的值。給你構(gòu)建的每個(gè)應(yīng)用程序選擇不同的密鑰，并確保這個(gè)字符串不被其他任何人知道。

  注：為了提高安全性，密鑰應(yīng)該存儲(chǔ)在一個(gè)環(huán)境變量中，而不是嵌入到代碼中。這個(gè)會(huì)在第7章中描述。

2、表單類

使用Flask-WTF時(shí)，每個(gè)web表單是由繼承自Form類的子類來(lái)展現(xiàn)的。該類在表單中定義了一組表單域，每個(gè)都表示為一個(gè)對(duì)象。每個(gè)表單域都可以連接到一個(gè)或多個(gè)validators；validators是一個(gè)用于檢查用戶提交的輸入是否合法的函數(shù)。

示例4-2展示了一個(gè)擁有文本框和提交按鈕的簡(jiǎn)單web表單。

示例4-2. hello.py：表單類定義

from flask.ext.wtf import Form
from wtforms import StringField, SubmitField 
from wtforms.validators import Required

class NameForm(Form):
    name = StringField("What is your name?", validators=[Required()]) 
    submit = SubmitField("Submit")

表單中的域被定義為類的變量，且每個(gè)類的變量都指定一個(gè)表單域類型對(duì)象。在上一個(gè)示例中，NameForm表單有一個(gè)name文本框和submit提交按鈕。StringField類表示一個(gè)type="text"屬性的標(biāo)簽。SubmitField類表示一個(gè)type="submit"屬性的標(biāo)簽。表單域構(gòu)造函數(shù)的第一個(gè)參數(shù)是一個(gè)label，在渲染表單到HTML時(shí)會(huì)使用。

StringField構(gòu)造函數(shù)包含可選參數(shù)validators，它定義了一組檢查來(lái)驗(yàn)證用戶提交的數(shù)據(jù)。Required()驗(yàn)證確保提交的表單域不為空。

  注：Flask-WTF擴(kuò)展定義了表單基類，所以它從flask.ext.wtf導(dǎo)入。表單域、驗(yàn)證都是直接從WTForms包中導(dǎo)入。

表格4-1展示了一組WTForms支持的標(biāo)準(zhǔn)表單域。

表格4-1. WTForms標(biāo)準(zhǔn)HTML表單域

表格4-2展示了一組WTForms內(nèi)建驗(yàn)證。

表格4-2. WTForms驗(yàn)證

3、HTML渲染的表單

表單域是可調(diào)用的，調(diào)用時(shí)從模板渲染它們到HTML。假設(shè)視圖函數(shù)傳遞一個(gè)參數(shù)名為form的NameForm實(shí)例給模板，模板就會(huì)生成一個(gè)簡(jiǎn)單的HTML表單，如下所示：


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

當(dāng)然，結(jié)果是什么都沒(méi)有。為了改變表單的外觀顯示，任何發(fā)送給該表單域的參數(shù)會(huì)被轉(zhuǎn)換為HTML表單域?qū)傩裕焕纾憧梢越o定表單域id或class屬性，然后定義CSS樣式：


    {{ form.name.label }} {{ form.name(id="my-text-field") }} 
    {{ form.submit() }}

即使有HTML屬性，努力用這種方式渲染表單是非常重要的，所以最好是盡可能的使用Bootstrap自帶的一系列表單樣式。Flask-Bootstrap使用Bootstrap的預(yù)定義表單樣式來(lái)提供高級(jí)的幫助函數(shù)來(lái)渲染整個(gè)Flask-WTF表單，這些操作都只需要一個(gè)調(diào)用即可完成。使用Flask-Bootstrap，上一個(gè)表單可以像下面這樣來(lái)渲染：

{% import "bootstrap/wtf.html" as wtf %}
{{ wtf.quick_form(form) }}

import指令和常規(guī)的Python腳本一樣的作用并且允許模板元素被導(dǎo)入并在許多模板中使用。被導(dǎo)入的bootstrap/wtf.html文件，定義了幫助函數(shù)使用Bootstrap來(lái)渲染Flask-WTF表單。wtf.quick_form()函數(shù)傳入Flask-WTF表單對(duì)象并使用默認(rèn)Bootstrap樣式渲染它。示例4-3展示了完整的hello.py模板。

示例4-3. templates/index.html：使用Flask-WTF和Flask-Bootstrap渲染表單

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

{% block title %}Flasky{% endblock %}

{% block page_content %}



    Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}!



{{ wtf.quick_form(form) }}
{% endblock %}

目前模板的內(nèi)容區(qū)有兩塊。第一塊是類為page-header的div輸出一個(gè)問(wèn)候語(yǔ)。這里使用了模板條件判斷語(yǔ)句。在Jinja2中格式為{% if variable %}...{% else %}...{% endif %}。如果判斷條件為True則渲染if和else之間的內(nèi)容。如果判斷條件為False則渲染else和endif之間的內(nèi)容。示例模板會(huì)渲染字符串“Hello, Stranger!”當(dāng)name模板參數(shù)未定義的時(shí)候。第二塊內(nèi)容使用wtf.quick_form()函數(shù)渲染NameForm對(duì)象。