Flask form前后端交互消息闪现

模拟场景如果当用户注册时输入错误而由于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>

Flask form前后端交互消息闪现的更多相关文章

编写一个简单的flask的前后端交互的网页(flask简单知识的讲解)
实验原理: 1.什么是flask Flask是一个使用Python编写的轻量级Web应用框架,其WSGI工具采用Werkzeng,模板引擎使用Jinja2.Flask与 Django之间的区别就是Dj ...
类Flask实现前后端交互之代码聊天室
前言框架项目目录及各自功能流程图后端 server backend exector 前端 ajax 页面更新演示简易应答模式代理模式处理外部请求后台日志总结前言这两天老是做梦,全 ...
Flask + vue 前后端分离的二手书App
一个Flask + vue 前后端分离的二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...
ajax学习----json，前后端交互，ajax
json <script> var obj = {"name": "xiaopo","age": 18,"gender ...
content-type常见类型辨析(以ajax与springmvc前后端交互为例)
博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...
三、vue前后端交互（轻松入门vue）
轻松入门vue系列 Vue前后端交互六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值基于Promise处理多个A ...
2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要初窥后端框架 css简介 css选择器今日内容详细初次体验前后端交互 # 代码无需掌握只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
springboot+mybatis+thymeleaf项目搭建及前后端交互
前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...
百度ueditor的图片上传，前后端交互使用
百度ueditor的使用一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...

随机推荐

umount -fl用法
umount, 老是提示:device is busy, 服务又不能停止的.可以用"umount -fl"解决! 挂载: mount - mount a filesystem mo ...
使用IWMS的网站打开显示“未能加载文件或程序集”，解决方案
首先,会出现这样的问题原因是: 1.应用程序集里面有些事互相引用的,所以问题有多种情况,第一.这个应用程序集出问题了: 2.它所依赖的那个程序集出问题了: 3.在项目生成的时候,代码里面有逻辑错误: ...
springboot swagger2 泛型踩坑记
最近使用一些工具需要和swagger打通,swagger的格式总是不对. 后来查了一下:哈哈. https://blog.csdn.net/hupingjin/article/details/8299 ...
Ehlib(Delphi控件) v9.2.024 D7-XE10.2 免费绿色特别版
下载地址:https://www.jb51.net/softs/579413.html#downintro2 EHLib是一个DELPHI 下的非常棒的第三方Grid控件,比DELPHI自带的强大许多 ...
存储过程中的 SET XACT_ABORT ON 和事务
在存储过程中写SET XACT_ABORT ON 有什么用? SET XACT_ABORT ON是设置事务回滚的!当为ON时,如果你存储中的某个地方出了问题,整个事务中的语句都会回滚为OFF时,只回滚 ...
为什么int型最大的数是2147483647
32位的电脑中,用二进制表示,最大的就是32个1,用十进制表示为2^32-1,大概40多亿(4294967295) 对于有符号的,第一位用作表示正负(0,1),最大的就是31个1,用十进制表示为2^3 ...
Tembin
1:组织机构和用户之间是多对一的关系,一个组织结构可以有多个成员,一个成员只能属于一个组织机构. 2:app里面的邀请成员:是邀请发送短信通知用户注册tembin账户,当用户去注册的时候下面就会显示所 ...
mpi4python
转载:https://zhuanlan.zhihu.com/p/25332041 前言在高性能计算的项目中我们通常都会使用效率更高的编译型的语言例如C.C++.Fortran等,但是由于Python ...
Recursive sequence HDU - 5950 (递推矩阵快速幂优化)
题目链接 F[1] = a, F[2] = b, F[i] = 2 * F[i-2] + F[i-1] + i ^ 4, (i >= 3) 现在要求F[N] 类似于斐波那契数列的递推式子吧, 但 ...
Nginx websocket反向代理
L:106 现在主流的反向代理,通过长链接可以从服务器推送数据到页面升级成websocket反向代理必须根据上面的配置做配置缺点无法多路复用,也就是没办法并行我们测试下Websocket反向代理 ...

Flask form前后端交互消息闪现

Flask form前后端交互消息闪现的更多相关文章

随机推荐

热门专题