Flask 入門-（三）Form表單提交

前言

在web程序中，form表單應(yīng)用廣泛， 比如用戶登錄， 像QQ登錄這種的實現(xiàn)。本文采用Flask實現(xiàn)簡單的Form表單提交的demo。

最終效果:


image.png

測試環(huán)境

  • Ubuntu20.04/win11
  • Flask
  • VSCode

Flask Form表單實現(xiàn)

一般的Form表單實現(xiàn)

一般在HTML中， form表單采用<form></form> 標簽進行定義， 在form標簽中加入<inuput></input>標簽：

    <form action="#" method="post">
        <div>
            <label for="username">Username</label>
            <input type="text" name="username" id="" placeholder="input username">
        </div>
        <div>
            <label for="pwd">Password</label>
            <input type="text" name="pwd" id="" placeholder="input password">
        </div>
        <input type="submit" value="submit">
    </form>

Flask中Form表單的實現(xiàn)

在Flask中，一般不采用上面那種方式，F(xiàn)lask提供了一些擴展 Flask-WTF 和 wtforms, Flask中一般對Form表單的操作采用Flask-WTF實現(xiàn)。

pip install flask-wtf

wtforms 提供了Form表單常用的控件:

  • fields: StringField, PasswordField, BooleanField, SubmitField, 用于生成<input>標簽
  • validators: 驗證器， 驗證輸入是否合法
    "DataRequired",
    "data_required",
    "Email",
    "email",
    "EqualTo",
    "equal_to",
    "IPAddress",
    "ip_address",
    "InputRequired",
    "input_required",
    "Length",
    "length",
    "NumberRange",
    "number_range",
    "Optional",
    "optional",
    "Regexp",
    "regexp",
    "URL",
    "url",
    "AnyOf",
    "any_of",
    "NoneOf",
    "none_of",
    "MacAddress",
    "mac_address",
    "UUID",
    "ValidationError",
    "StopValidation",

flask-wtf擴展包提供了一個類: FlaskForm, 一般自定義的Form都要繼承這個FlaskForm。
注意: 由于瀏覽器具有cookies功能，為了Form表單提交的安全性考慮， Form表單提交的時候需要指定CSRF令牌， 需要在Flask中設(shè)置 SECRET_KEY：

app.config['SECRET_KEY'] = 'hello-flask'   # RuntimeError: A secret key is required to use CSRF.

SECRET_KEY的值是隨機的字符串。

Flask Form表單的具體應(yīng)用步驟:

  • Step1: 自定義Form類，繼承FlaskForm 
class LoginForm(FlaskForm):
    username = StringField(label='Username', validators=[DataRequired(), Length(1, 30)])
    password = PasswordField(label='Password', validators=[DataRequired(), Length(4, 10)])
    remember = BooleanField(label='Remember me')
    submit = SubmitField(label='Login')
  • Step2: 配置視圖函數(shù)，實例化form對象, 并且將form對象傳遞給render_template()函數(shù)
    一般Form表單提交采用POST請求， 因此需要在路由里面設(shè)置 methods='POST'
@app.route('/', methods=['GET', 'POST'])
def index():
    form = LoginForm()
    if form.validate_on_submit():
        global username
        global pwd
        username = form.username.data
        pwd = form.password.data
        # 重定向為GET請求
        return redirect((url_for('success')))
    return render_template('index.html', form=form)
  • Step3: 在HTML中渲染Form，生成Form標簽。
    為了美觀以及易用性考慮，F(xiàn)orm表單的渲染使用 bootstrap-flask進行渲染。
    bootstrap: Twitter公司開源的前端框架，提供了bootstrap.css和bootstrap.mini.css， 包含了常用的css樣式，在開發(fā)的時候不用過多考慮樣式問題。
    bootstrap-flask: Flask的一個python擴展，就是對bootstrap進行了封裝，在HTML中的用法和bootstrap用法相同。

pip install bootstrap-flask

bootstrap-flask的使用過程:
加載bootstrap的CSS文件(這里直接采用CDN加載， 也可以下載到本地進行加載) ---> 使用Jinja2語法導入render_form()宏函數(shù) ---> 使用render_form()渲染傳入的form對象。

   {{ bootstrap.load_css() }}
   {% from 'bootstrap/form.html' import render_form  %}

    <main class="container">
        {{ render_form(form=form, form_type="basic") }}
        {{ bootstrap.load_js() }}
    </main>

關(guān)于render_form()宏函數(shù):

{# valid form types are "basic", "inline" and "horizontal" #}
{% macro render_form(form,
                    action="",
                    method="post",
                    extra_classes=None,
                    role="form",
                    form_type="basic",
                    horizontal_columns=('lg', 2, 10),
                    enctype=None,
                    button_map={},
                    button_style="",
                    button_size="",
                    id="",
                    novalidate=False,
                    render_kw={}) %}

測試工程

目錄結(jié)構(gòu)

文件目錄結(jié)構(gòu)非常簡單，沒有包含CSS/JS文件，只有HTML模板。


image.png

代碼實現(xiàn)

  • app.py
from flask import Flask, render_template, url_for, redirect, flash
from flask_bootstrap import Bootstrap
from wtforms import StringField, PasswordField, BooleanField, SubmitField
from flask_wtf import FlaskForm
from wtforms.validators import DataRequired, Length

# https://bootstrap-flask.readthedocs.io/en/latest/

class LoginForm(FlaskForm):
    username = StringField(label='Username', validators=[DataRequired(), Length(1, 30)])
    password = PasswordField(label='Password', validators=[DataRequired(), Length(4, 10)])
    remember = BooleanField(label='Remember me')
    submit = SubmitField(label='Login')


app = Flask(__name__)
app.config['SECRET_KEY'] = 'hello-flask'   # RuntimeError: A secret key is required to use CSRF.
bootstrap = Bootstrap(app=app)  # 初始化bootstrap

username = None
pwd = None

@app.route('/login_success')
def success():
    flash(message=username)
    flash(message=pwd)
    return render_template('success.html')


@app.route('/', methods=['GET', 'POST'])
def index():
    form = LoginForm()
    if form.validate_on_submit():
        global username
        global pwd
        username = form.username.data
        pwd = form.password.data
        # 重定向為GET請求
        return redirect((url_for('success')))
    return render_template('index.html', form=form)
app.run()
  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flask_form</title>
    {{ bootstrap.load_css() }}
    {% from 'bootstrap/form.html' import render_form  %}
</head>
<body>
    <main class="container">
        {{ render_form(form=form, form_type="basic") }}
        {{ bootstrap.load_js() }}
    </main>
</body>
</html>
  • success.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flask_form</title>
    {{ bootstrap.load_css() }}
</head>
<body>
    <main class="container">
        {% for message in get_flashed_messages() %}
            {{ message }}
        {% endfor %}
        {{ bootstrap.load_js() }}
    </main>
</body>
</html>

運行結(jié)果:


image.png
image.png

觀察bootstrap-flask生成的HTML, 打開瀏覽器調(diào)試窗口，可以看到HTML代碼:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flask_form</title>
    <link rel="stylesheet"  integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    
</head>
<body>
    <main class="container">
        
    <form action="" method="post"
            class="form" role="form">
        <input id="csrf_token" name="csrf_token" type="hidden" value="IjZiYzNjZTFiODg3NTA3OTBjMmNiYmI1ODBjYjkwODM4MWQxYWI3NGYi.Yfa-Xg.Fg_26W5499T3niSfJzvmdvIA_w8">
    <div class="form-group required">
        <label class="form-control-label" for="username">Username</label>
        <input class="form-control" id="username" maxlength="30" minlength="1" name="username" required type="text" value="">      
    </div>
    <div class="form-group required">
        <label class="form-control-label" for="password">Password</label>
       <input class="form-control" id="password" maxlength="10" minlength="4" name="password" required type="password" value="">       
    </div>
        
    <div class="form-group form-check"><input class="form-check-input" id="remember" name="remember" type="checkbox" value="y">
        <label class="form-check-label" for="remember">Remember me</label>
    </div>
    <input class="btn btn-primary btn-md" id="submit" name="submit" type="submit" value="Login">
    </form>
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    </main>
</body>
</html>

  1. bootstrap-flask 的 render_form()宏函數(shù)在渲染form表單時候自動會添加 CSRF令牌： <input id="csr_token" name="csrf_token" type="hidden" value="IjZiYzNjZTFiODg3NTA3OTBjMmNiYmI1ODBjYjkwODM4MWQxYWI3NGYi.Yfa-Xg.Fg_26W5499T3niSfJzvmdvIA_w8">

  2. 當采用默認CDN時候bootstrap-flask 會自動加載 jquery.js, popper.js, bootstrap.min.js 這3個JavaScript

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

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

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