Python web開發：Flask系列之表單操作

• 2020 年 2 月 21 日
• 筆記

Flask系列前三篇：

3)Flask理解Views、models和渲染模板層的調用關係

2)Flask之數據入庫操作，完整十步！

1)Flask版 hello world

今天再繼續Flask系列第四篇：Flask之基本的表單操作

1 開篇

先說一些關於Flask的基本知識，現在不熟悉它們，並不會影響對本篇的理解和掌握。

Flask是一個基於Python開發，依賴jinja2模板和Werkzeug WSGI服務的一個微型框架。

Werkzeug用來處理Socket服務，其在Flask中被用於接受和處理http請求；Jinja2被用來對模板進行處理，將模板和數據進行渲染，返回給用戶的瀏覽器。

這到這些，對於理解後面調試出現的兩個問題會有幫助，不過不熟悉仍然沒有關係。

2 基本表單

首先導入所需模組：

from wtforms import StringField,PasswordField, BooleanField, SubmitField  from flask_wtf import FlaskForm  

wtforms和flask_wtf是flask創建web表單類常用的包。

具體創建表單類的方法如下，登入表單LoginForm繼承自FlaskForm.

分別創建StringFiled實例用戶名輸入框user_name，密碼框password，勾選框remember_me和提交按鈕submit.

class LoginForm(FlaskForm):      user_name = StringField()      password = PasswordField()      remember_me = BooleanField(label='記住我')      submit = SubmitField('Submit')  

至此表單類對象創建完畢

3 html模板

使用Bootstrap. 它是由Twitter推出的一個用於前端開發的開源工具包，給予HTML、CSS、JavaScriot，提供簡潔、直觀、強悍的前端開發框架，是目前最受環境的前端框架。

flak_bootstrap提供使用的介面。方法如下，首先pip install bootstrap，然後創建一個實例bootstrap.

from flask_bootstrap import Bootstrap  bootstrap = Bootstrap()  

然後創建index.html文件，第一行導入創建的Bootstrap實例bootstrap：

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

再創建第2節中創建的LoginForm實例form，調用渲染模板方法，參數form賦值為實例form:

from flask import render_template  form = LoginForm()  render_template('index.html', form=form)  

再在index.html輸入以下程式碼，{{ wtf.quick_form(form) }}將實例form渲染到html頁面中。

<div class="container">      <h3>系統登入</h3>      <div class="col-md-4">          {{ wtf.quick_form(form) }}      </div>  </div>

4 index頁面路由

flask_wtf創建的form，封裝方法validate_on_submit，具有表單驗證功能。

@app.route('/', methods=['GET', 'POST'])  def index():      form = LoginForm()      if form.validate_on_submit():          print(form.data['user_name'])          return redirect(url_for('print_success'))        return render_template('index.html', form=form)  

驗證通過跳轉到print_success方法終端點：

@app.route('/success')  def print_success():      return"表單驗證通過"  

5 完整程式碼

共有兩個文件：一個py，一個html:

from flask import Flask  from flask import render_template, redirect, url_for  from wtforms import StringField,PasswordField, BooleanField, SubmitField  from flask_wtf import FlaskForm  from flask_bootstrap import Bootstrap    bootstrap = Bootstrap()    app = Flask(__name__)  app.config['SECRET_KEY']  = "hard_to_guess_secret_key$$#@"    bootstrap.init_app(app)    @app.route('/', methods=['GET', 'POST'])  def index():      form = LoginForm()      if form.validate_on_submit():          print(form.data['user_name'])          return redirect(url_for('print_success'))        return render_template('index.html', form=form)    @app.route('/success')  def print_success():      return"表單驗證通過"      class LoginForm(FlaskForm):      user_name = StringField()      password = PasswordField()      remember_me = BooleanField(label='記住我')      submit = SubmitField('Submit')    if __name__ == "__main__":      app.run(debug=True)  

html程式碼：

{% import"bootstrap/wtf.html"as wtf %}  <div class="container">      <h3>系統登入</h3>      <div class="col-md-4">          {{ wtf.quick_form(form) }}      </div>  </div>  

啟動後，控制台顯示如下：

然後網頁中輸入127.0.0.1:5000,網頁顯示：

6 兩個錯誤

例子君也是Flask新手，在調試過程中，遇到下面兩個錯誤。

1) CSRF需要配置密碼

遇到這個錯誤，解決的方法就是配置一個密碼。具體對應到第5節完整程式碼部分中的此行：

app.config['SECRET_KEY']  = "hard_to_guess_secret_key$$#@"  

2) index.html未找到異常

出現這個錯誤的原因不是因為index.html的物理路徑有問題，而是我們需要創建一個文件夾並命名為：templates，然後把index.html移動到此文件夾下。

覺得好看就點個在看吧