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>