Flask學習筆記-在Bootstrap框架下Web表單WTF的使用 頂 原 薦

表單的處理一般都比較繁瑣和枯燥，如果想簡單的使用表單就可以使用Flask-WTF插件，同時我們把WTF融合到Bootstrap中這樣樣式的問題都自動解決了，本篇文章就爲您講解這些內容。

先要注意一點，在使用WTF的時候我們要在程序中設定一下SECRET_KEY，不然會出現"Must provide secret_key to use csrf"錯誤。

app.config['SECRET_KEY'] = 'xxxx'

Flask-Bootstrap在前面的文章中已經講過了，不再重複。

後臺WTF編碼

先看實例：

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

class BookForm(Form):
    name = StringField('姓名', validators=[DataRequired()])
    phone = StringField('電話', validators=[DataRequired()])
    photoset = SelectField('套系', choices=[('SET1', '1'), ('SET2', '2')])
    submit = SubmitField("預定")
    

@app.route('/book/', methods=['GET', 'POST'])
def book_photo():
    name = None
    phone = None
    photoset = None
    booker = BookForm()
    if booker.validate_on_submit():
        name = booker.name.data
        phone = booker.phone.data
        photoset = booker.photoset.data
    return render_template('book_photo.html', form=booker, name=name, phone=phone, photoset=photoset)

BookForm是我們自己定義的一個Form對象，裏面包含了兩個文本框和一個下拉選擇框，很簡單。

class BookForm(Form):
    name = StringField('姓名', validators=[DataRequired()])
    phone = StringField('電話', validators=[DataRequired()])
    photoset = SelectField('套系', choices=[('SET1', '1'), ('SET2', '2')])
    submit = SubmitField("預定")

validators是輸入檢查控制器，有很多種，這裏使用的是DataRequired用於必填項的檢查，還有字符長度以及輸入類型等等好多控制器，需要說明一下在SelectField中不要使用這些不然會報錯，這個地方我沒有深入研究，暫時就不使用了，哈。

book_photo()是/book/的處理函數，我們初始化了文本框的默認爲空，還初始化了BookForm對象，render_template函數指定了頁面和form對象。

if booker.validate_on_submit():
        name = booker.name.data
        phone = booker.phone.data
        photoset = booker.photoset.data

這段處理是在表單提交後的接收參數值的處理邏輯，同時還是用

return render_template('book_photo.html', form=booker, name=name, phone=phone, photoset=photoset)

返回了name,phone和photoset值到book_photo.html頁面。

下面我們就來看下頁面的代碼

表單頁面

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

{% block page_content %}
    <div class="page-header">
        數據：
        <p>
        {% if name %}
            {{ name }}
        {% endif %}
        <br />
        {% if phone %}
            {{ phone }}
        {% endif %}
        <br />
        {% if photoset %}
            {{ photoset }}
        {% endif %}
        </p>
    </div>
    {{ wtf.quick_form(form) }}
{% endblock %}

很簡單吧，因爲我們使用了bootstrap/wtf.html的基模板，很好的跟bootstrap結合起來。

重點是：

{{ wtf.quick_form(form) }}

我們利用wtf.quick_form函數自動生成了表單，非常cool對不對。

    <div class="page-header">
        數據：
        <p>
        {% if name %}
            {{ name }}
        {% endif %}
        <br />
        {% if phone %}
            {{ phone }}
        {% endif %}
        <br />
        {% if photoset %}
            {{ photoset }}
        {% endif %}
        </p>
    </div>

這段是表單提交後顯示提交數據的處理，所以我們在一個頁面上就搞定了表單的顯示和提交後的數據顯示。

顯示結果

還挺不錯的是不是。

高級-重定向會話

我們提交表單後最後一個請求爲POST，這樣我們在刷新頁面的時候會出現重新提交表單，通過重定向會話就可以解決這個問題（這個技巧稱“Post/重定向/Get模式”），還有就是可以通過重定向會話實現自定義的跳轉等更靈活的控制。

重定向會話我們要利用session機制實現，代碼如下：

from flask import Flask, render_template, send_from_directory, session, redirect, url_for

@app.route('/book/', methods=['GET', 'POST'])
def book_photo():
    name = None
    phone = None
    photoset = None
    booker = BookForm()
    if booker.validate_on_submit():
        session['name'] = booker.name.data
        session['phone'] = booker.phone.data
        session['photoset'] = booker.photoset.data
        return redirect(url_for('book_photo'))
    return render_template('book_photo.html', form=booker, name=session.get('name'), phone=session.get('phone'), photoset=session.get('photoset'))

高級-Flash消息

如果需要頁面通知用戶消息的話，可以使用Flash消息，也很簡單，代碼如下：

from flask import Flask, render_template, send_from_directory, session, redirect, url_for, flash

@app.route('/book/', methods=['GET', 'POST'])
def book_photo():
    name = None
    phone = None
    photoset = None
    booker = BookForm()
    if booker.validate_on_submit():
        old_name = session.get('name')
        if old_name is not None and old_name != booker.name.data:
            flash('您的提交發生變化')
        session['name'] = booker.name.data
        session['phone'] = booker.phone.data
        session['photoset'] = booker.photoset.data
        return redirect(url_for('book_photo'))
    return render_template('book_photo.html', form=booker, name=session.get('name'), phone=session.get('phone'), photoset=session.get('photoset'))

判斷字段值的變化，設置提示信息

        if old_name is not None and old_name != booker.name.data:
            flash('您的提交發生變化')

頁面上也需要處理：

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

{% block page_content %}
    <div class="page-header">
        數據：
        <p>
        {% if name %}
            {{ name }}
        {% endif %}
        <br />
        {% if phone %}
            {{ phone }}
        {% endif %}
        <br />
        {% if photoset %}
            {{ photoset }}
        {% endif %}
        </p>
    </div>
    {% for message in get_flashed_messages() %}
    <div class="alert alert-warning">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        {{ message }}
    {% endfor %}
    </div>
    {{ wtf.quick_form(form) }}
{% endblock %}

通過for/endfor進行控制，也是使用的bootstrap的樣式

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

效果如下：