Flask form前后端交互消息闪现

最新推荐文章于 2024-05-27 11:37:08 发布

T525174893

最新推荐文章于 2024-05-27 11:37:08 发布

阅读量410

点赞数

文章标签： python 前端后端 ViewUI

原文链接：http://www.cnblogs.com/Niuxingyu/p/10170933.html

版权

模拟场景如果当用户注册时输入错误而由于form表单是同步提的交跳转到另一个网页时提示注册失败这时用户还需返回注册页面重新填写大大降低了客户体验，消息闪现能伪装成异步（实际还是同步）就是自己提交给自己然后进行验证的，大大提高了用户体验。

普通form:

　　py文件

#flask的消息闪现依赖于flask库，用户发送的请求方式存储在request模块中
from flask import Flask,flash,render_template,request,session,redirect
#跳转依赖于redirect模块

app = Flask(__name__)


app.config.from_pyfile('config.ini')


#登陆成功后跳转
@app.route('/heloo')
def hello():
    return "hello 欢迎 %s" %session['name']

#指定请求方式,methods属性
@app.route('/',methods=['GET','POST'])
def index():
    #判断client发送的请求类型
    #自己请求自己的逻辑中，get只用来解析模板，而post用来判断数据逻辑
    if request.method == 'POST':
        #使用for属性来接收列表提交过来的数据
        username = request.form.get('username')
        passwored = request.form.get('password')
        passwored1 = request.form.get('password1')

        #模拟登陆 将用户名密码保存在session
        session['name'] = username
        session['password'] = passwored

        #判断数据是否同时存在，判断数据是否为空
        if not all([username,passwored,passwored1]):
            #利用闪现消息来提醒用户
            flash('参数不足')
        elif passwored != passwored1:
            flash("两次密码不一致")
        else:
            flash("注册成功")
            #第一种直接跳转网址
            return redirect('http://127.0.0.1:5000/heloo')
    #将定义好的表单类传递给模板，进行方法设置
    return render_template('day4_wtform.html',form = RegistefForm())

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

　　html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flask普通表单提交数据，使用flask消息闪现来将反馈显示给用户</title>
</head>
<body>
    <h1>用户注册</h1><br><br>
    {# action属性，如果不写，默认提交给自己，method属性，指定该表单的提交方式 #}
    <form method="POST">
        <label for="">用户名</label>
        <input type="text" name="username" placeholder="用户名">
        <br>
        <label for="">密码</label>
        <input type="password" name="password">
        <br>
        <label for="">确认密码</label>
        <input type="password" name="password1">
        <br>

        {# 将flash消息闪现和后台联系起来 #}
        {# 将消息闪现里面的所有消息遍历，取出需要返回给用户信息 #}
        {% for message in get_flashed_messages() %}
            {{message}}
        {% endfor %}

        <input type="submit" value="注册">
    </form>
</body>
</html>

flask form扩展wtforms库

　　py文件：

#flask的消息闪现依赖于flask库，用户发送的请求方式存储在request模块中,跳转依赖于redirect模块,render_template模板模块,session
from flask import Flask,render_template,request,flash,session,redirect
#导入wtf扩展的表单类
from flask_wtf import FlaskForm
#导入需要的字段
from wtforms import SubmitField,StringField,PasswordField

app = Flask(__name__)

app.config.from_pyfile('config.ini')
#定义一个类
class my_from(FlaskForm):
    #写好需要的form内需要的属性
    username = StringField('用户名')
    password = PasswordField('密码')
    password1 = PasswordField('确认密码')
    submit = SubmitField('注册') 
#注册成功跳转的页面
@app.route('/showlogin')
def indexx():
    #给模板传入参数
    return render_template('day4练习2.html',username = session['username'],password = session['password'])

#指定请求方式,methods属性
@app.route('/',methods=['POST','GET'])
def index():
    #判断请求
    if request.method == 'POST':
        # 获取form表单数据
        username = request.form.get('username')
        password = request.form.get('password')
        password1 = request.form.get('password1')
        #判断数据是否为空
        if not all([username,password,password1]):
            flash('信息部完整')
        #判断两次密码是否一致
        elif password != password1:
            flash('两次密码不一致')
        
        else:
            # 成功后给session加入数据
            session['username'] = username
            session['password'] = password
            flash('注册成功')
            #跳转页面
            return redirect('/showlogin')
    #导入模板和定义wtform属性的整个类
    return render_template('day4练习.html',my_from = my_from())

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

　　html文件：

　　wtform库数据的传入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
　　　#指定请求方式　
    <form method="POST">
            {{my_from.username.label}}:{{my_from.username}}<br>
            {{my_from.password.label}}:{{my_from.password}}<br>
            {{my_from.password1.label}}：{{my_from.password1}}<br>
            {% for i in get_flashed_messages() %}
            {{i}}
            {% endfor %}
            {{my_from.submit}} 
    </form>
</body>
</html>

　　显示注册好的账号和密码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    用户名：{{username}}<br>
    密码：{{password}}
</body>
</html>