Flask WEB表單-WTF簡單使用

時間 2021-01-19

標籤 html 前端 web flask 後端安全服務器 app ide post 欄目 Python 简体版

原文原文鏈接

web表單是web應用程序的基本功能html

它是HTML頁面中負責數據採集的不見。表單有三個部分組成：表單標籤、表單域、表單按鈕。表單容許用戶輸入數據，負責HTML頁面數據採集，經過表單將用戶輸入的數據提交給服務器。前端

在Flask中，爲了處理web表單，咱們通常使用Flask-WTF擴展，它封裝了WTForms，而且它有驗證表單數據的功能web

沒有使用WTF的後端代碼flask

from flask import Flask,render_template,request
app = Flask(__name__)

'''
目的：實現一個簡單的登錄的邏輯處理
1.路由須要有get和post兩種請求方式 -->須要判斷請求方式
2.獲取請求的參數
3.判斷參數是否填寫，以及密碼是否相同
4.若是判斷都沒有問題，就返回一個success
'''
'''
給模版傳遞消息 
flash ---> 須要對內容加密，須要設置secret_key，作加密消息的混淆
模板中須要遍歷消息
'''
app.secret_key = 'sunwenbo'

@app.route('/wtf',methods=['GET','POST'])
def wtf():
    #request:請求對象--->獲取請求方式、數據
    #1.判斷請求方式
    if request.method == 'POST':
        #2.獲取請求的參數
        username = request.form.get('username')
        password = request.form.get('password')
        password2 = request.form.get('password2')
        print username
        #3.判斷參數是否填寫，以及密碼是否相同
        if not all([username,password,password2]):
            #解決編碼問題u
            flash(u'參數不完整')
            #print '參數不完整'
        elif password != password2:
            flash(u'密碼不一致')
            #print '密碼不一致'
        else:
            return 'success'
    return render_template('wtf.html')

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

沒有使用WTF的前端代碼後端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WTF表單</title>
</head>
<body>
<form method="post">
    <label>用戶名：</label><input type="text" name="username"><br>
    <label>密碼：</label><input type="password" name="password"><br>
    <label>確認密碼：</label><input type="password" name="password2"><br>
    <input type="submit" value="提交">

{# 使用遍歷獲取閃現的消息 #}
    {% for message in get_flashed_messages() %}
        {{ message }}
    {% endfor %}

</form>

</body>
</html>

使用WTF後端代碼

from flask import Flask,render_template,request,flash
from flask_wtf import FlaskForm
from wtforms import StringField,PasswordField,SubmitField
from wtforms.validators import DataRequired,EqualTo

# 解決編碼問題
import sys
reload(sys)
sys.setdefaultencoding("utf-8")

app = Flask(__name__)

'''
使用WTF實現表單
1.自定義表單類
'''

class LoginForm(FlaskForm):
    username = StringField('用戶名:',validators=[DataRequired()])
    password = PasswordField('密碼:',validators=[DataRequired()])
    password2 = PasswordField('確認密碼:',validators=[DataRequired(),EqualTo('password','密碼填入的不一致')])
    submit = SubmitField('提交')

@app.route('/form',methods=['GET','POST'])
def login():
    login_form = LoginForm()
    # 1. 判斷請求方式
    if request.method == 'POST':
        # 2. 獲取請求參數
        username = request.form.get('username')
        password = request.form.get('password')
        password2 = request.form.get('password2')
        # 3. 驗證參數，WTF能夠一句話就實現全部的校驗
        # 咱們沒有CSRF token,使用WTF會考慮更高的安全性
        if login_form.validate_on_submit():
            print username,password
            return 'success'
        else:
            flash('參數有誤')
    return render_template('wtf.html',form=login_form)

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

使用WTF前端代碼

<form method="post">
    {# 開啓csrf token #}
    {{ form.csrf_token() }}
    {{ form.username.label }}{{ form.username }} <br>
    {{ form.password.label }}{{ form.password }} <br>
    {{ form.password2.label }}{{ form.password2 }} <br>
    {{ form.submit }}
</form>