Flask Web開發(fā)學(xué)習(xí)筆記（四）

本次主要介紹下Web表單。

盡管Flask的請(qǐng)求對(duì)象提供的對(duì)象足夠用于處理Web表單（如：request.form能獲取POST請(qǐng)求中提交的表單數(shù)據(jù)），但有些任務(wù)很單調(diào)，而且要重復(fù)操作。比如生成表單的HTML代碼和驗(yàn)證提交的表單數(shù)據(jù)。

Flask-WTF(http://pythonhosted.org/Flask-WTF)擴(kuò)展可以把處理Web表單的過程編程一種愉快的體驗(yàn)。這個(gè)擴(kuò)展對(duì)獨(dú)立的WTForms(http://wtforms.simplecodes.com)包進(jìn)行了包裝，方便集成到Flask程序中。

0.安裝Flask-WTF

pip install flask-wtf

1.跨站請(qǐng)求偽造保護(hù)

默認(rèn)情況下，F(xiàn)lask-WTF能保護(hù)所有表單面免受跨站請(qǐng)求偽造（Cross-Site Request Forgery，CSRF）的攻擊。惡意網(wǎng)站把請(qǐng)求發(fā)送到被攻擊者已登錄的其他網(wǎng)站是就會(huì)引發(fā)CSRF攻擊。

為了實(shí)現(xiàn)CSRF保護(hù)，F(xiàn)lask-WTF需要程序設(shè)置一個(gè)密鑰。Flask-WTF使用這個(gè)密鑰生成加密令牌，再用令牌驗(yàn)證請(qǐng)求中表單數(shù)據(jù)的真?zhèn)巍?/p>

設(shè)置方式

app = Flask(__name__)
app.config['SECRET_KEY'] = '這里設(shè)置密鑰'

注意：為了增強(qiáng)安全性，密鑰不應(yīng)該直接寫入代碼，而要保存在環(huán)境變量中。

2.表單類

index.html文件：

<html>
    <head>
        <title>首頁</title>
    </head>
    <body>
        {% if name %}
            <h1>Hello,{{ name }}!</h1>
        {% else %}
            <h1>Hello Stranger!</h1>
        {% endif %}

        <form method="POST">
            {{ form.hidden_tag() }}
            {{ form.name.label  }} {{ form.name() }}
            {{ form.submit() }}
        </form>
    </body>
</html>

解釋下：

0.如果有name 則輸出 Hello,xxx!,沒有 name 則輸出 Hello,Stranger!

1.form.hidden_tag()是一個(gè)隱藏字段的標(biāo)識(shí)字符串

2.form.name()是下面app.py中NameForm類的一個(gè)name字段（輸入文本框），form.name.label則是name字段中的第一個(gè)參數(shù)值字符串

3.同理 form.submit()是提交按鈕

app.py 文件：

from flask import Flask,render_template
from flask.ext.wtf import Form
from flask.ext.bootstrap import Bootstrap
from wtforms import StringField,SubmitField
from wtforms.validators import Required

class NameForm(Form):
    name = StringField('你的名字？',validators=[Required()])
    submit = SubmitField('提交')

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

@app.route('/',methods=['GET','POST'])
def index():
    name = None
    nameForm = NameForm()

    if nameForm.validate_on_submit():
        name = nameForm.name.data
        nameForm.name.data = ''
    
    return render_template('index.html',form=nameForm,name=name)

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

解釋下：

0.NameForm類，聲明了一個(gè)輸入姓名文本框和提交按鈕。字段構(gòu)造函數(shù)第一個(gè)參數(shù)吧表單渲染成HTML時(shí)使用的標(biāo)號(hào)。其中輸入姓名的文本框需要必須填寫。

1.app.route修飾器中添加的methods參數(shù)告訴Flask在URL映射中把這個(gè)視圖函數(shù)注冊(cè)為GET和POST請(qǐng)求的處理程序，如果沒有指定methods參數(shù)，就只把視圖函數(shù)注冊(cè)為GET請(qǐng)求處理程序。因?yàn)閃eb表單提交為POST方式，故需要顯示標(biāo)明。

2.nameForm.validate_on_submit()方法，提交表單后，如果數(shù)據(jù)鞥被所有驗(yàn)證函數(shù)接受，那么nameForm.validate_on_submit()方法返回True，否則返回False。

到這里就可以看見下圖：

flask_04_01.png

在文本框中輸入Tom看見下圖：

flask_04_02.png

3.優(yōu)化

顯示的界面以及功能都比較粗糙，主要存在以下幾個(gè)問題：

0.界面很簡(jiǎn)陋，沒有優(yōu)美的CSS樣式
1.提交完數(shù)據(jù)后，按快捷鍵刷新瀏覽器會(huì)出現(xiàn)彈框提示：是否重新提交表單數(shù)據(jù)
2.添加提示指示

0.界面顯示優(yōu)化

前面介紹了Flask-Bootstrap這個(gè)優(yōu)秀的前端顯示方案，完全可以拿過來用，并且Flask-Bootstrap還提供了一個(gè)非常高端的輔助函數(shù)，可以使用Bootstrap中預(yù)先定義好的表單演示渲染整個(gè)Flask-WTF表單，而這些操作只需一次調(diào)用即可完成。

前面介紹了base.html這里就不提及了。

index.html文件：

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


{% block title %}首頁 {% endblock %}

{% block page_content %}

<div class="page-header">
{% if name %}
<h1> Hello,{{ name }}! </h1>
{% else %}
<h1>Hello,Stranger!</h1>
{% endif %}
</div>

{{ wtf.quick_form(form) }}

{% endblock %}

解釋下：

0.wtf.quick_form()函數(shù)的參數(shù)為Flask-WTF表單對(duì)象，使用Bootstrap樣式渲染傳入的表單。

運(yùn)行效果如下圖：

flask_04_03.png

1.解決重復(fù)提交出現(xiàn)彈框問題

之所以出現(xiàn)這種情況，是因?yàn)樗⑿马撁鏁r(shí)瀏覽器會(huì)重新發(fā)送之前已經(jīng)發(fā)送過的最后一個(gè)請(qǐng)求。

解決方案：不讓W(xué)eb程序把POST請(qǐng)求作為瀏覽器發(fā)送的最后一個(gè)請(qǐng)求——重定向。

修改app.py文件

from flask import Flask,render_template,session,url_for,redirect
from flask.ext.wtf import Form
from flask.ext.bootstrap import Bootstrap
from wtforms import StringField,SubmitField
from wtforms.validators import Required

class NameForm(Form):
    name = StringField('你的名字？',validators=[Required()])
    submit = SubmitField('提交')

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

@app.route('/',methods=['GET','POST'])
def index():
    name = None
    nameForm = NameForm()

    if nameForm.validate_on_submit():
        session['name'] = nameForm.name.data
        nameForm.name.data = ''
        return redirect(url_for('index'))
    
    return render_template('index.html',form=nameForm,name=session.get('name'))

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

解釋下：

0.session['name']存儲(chǔ)了同一個(gè)會(huì)話的中文本框中的內(nèi)容

1.url_for(),當(dāng)然redirect(url_for('index'))也可以寫成redirect('/'),但是推薦使用url_for()生成URL，因?yàn)檫@個(gè)函數(shù)使用URL映射生成URL，從而保證URL和定義的路由兼容，而且修改路由名字后依然后依然可用。``url_for()```函數(shù)的第一個(gè)且唯一必須指定的參數(shù)是端點(diǎn)名，即路由的內(nèi)部名字，默認(rèn)情況下，路由的端點(diǎn)是相應(yīng)視圖函數(shù)的名字，在這個(gè)示例中，處理跟地址的視圖函數(shù)是index(),因此傳給url_for()函數(shù)的名字是index。

2.session.get('name')直接從會(huì)話中中讀出name參數(shù)的值，也可以使用session['name']讀取，但是推薦使用session.get('name'),使用get()獲取字典中鍵對(duì)應(yīng)的值以避免未找到鍵的異常情況，因?yàn)閷?duì)于不存在的鍵，get()會(huì)返回默認(rèn)值None.

2.添加提示

請(qǐng)求完成后，有時(shí)需要讓用戶知道狀態(tài)發(fā)生了變化。

這種提示功能是Flask的核心特性，flash()函數(shù)可實(shí)現(xiàn)這種效果。

app.py

from flask import Flask,render_template,session,url_for,redirect,flash
from flask.ext.wtf import Form
from flask.ext.bootstrap import Bootstrap
from wtforms import StringField,SubmitField
from wtforms.validators import Required

class NameForm(Form):
    name = StringField('你的名字？',validators=[Required()])
    submit = SubmitField('提交')

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

@app.route('/',methods=['GET','POST'])
def index():
    name = None
    nameForm = NameForm()

    if nameForm.validate_on_submit():
        newName = nameForm.name.data

        if newName == session.get('name'):
            session['name'] = nameForm.name.data
            nameForm.name.data = ''
            return redirect(url_for('index'))
        else:
            flash('名字輸入錯(cuò)誤!')
            
    
    return render_template('index.html',form=nameForm,name=session.get('name'))

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

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">
{% for message in get_flashed_messages() %}
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alert">&times;</button>
{{ message }}
</div>
{% endfor %}

{% block page_content %}{% endblock %}
</div>

{% endblock %}

實(shí)現(xiàn)功能：如果用戶輸入的名字，不是第一次輸入表單中的名字，則會(huì)出現(xiàn)名字輸入錯(cuò)誤提示。

解釋下：

get_flashed_messages()函數(shù)用來獲取并渲染的消息。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容