模拟场景如果当用户注册时输入错误而由于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前后端交互消息闪现的更多相关文章

  1. 编写一个简单的flask的前后端交互的网页(flask简单知识的讲解)

    实验原理: 1.什么是flask Flask是一个使用Python编写的轻量级Web应用框架,其WSGI工具采用Werkzeng,模板引擎使用Jinja2.Flask与 Django之间的区别就是Dj ...

  2. 类Flask实现前后端交互之代码聊天室

    前言 框架 项目目录及各自功能 流程图 后端 server backend exector 前端 ajax 页面更新 演示 简易应答模式 代理模式处理外部请求 后台日志 总结 前言 这两天老是做梦,全 ...

  3. Flask + vue 前后端分离的 二手书App

    一个Flask + vue 前后端分离的 二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...

  4. ajax学习----json，前后端交互，ajax

    json <script> var obj = {"name": "xiaopo","age": 18,"gender ...

  5. content-type常见类型辨析(以ajax与springmvc前后端交互为例)

    博客搬家: content-type常见类型辨析(以ajax与springmvc前后端交互为例) 在http报文的首部中,有一个字段Content-type,表示请求体(entity body)中的数 ...

  6. 三、vue前后端交互（轻松入门vue）

    轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...

  7. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

  8. springboot+mybatis+thymeleaf项目搭建及前后端交互

    前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...

  9. 百度ueditor的图片上传，前后端交互使用

    百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...

随机推荐

  1. Django Rest framework 框架之认证使用和源码执行流程

    用这个框架需要先安装: pip3 install djangorestframework 如果写了一个CBV的东西,继承了View. # 继承Django里面View class APIView(Vi ...

  2. Codeforces 1154G Minimum Possible LCM

    题目链接:http://codeforces.com/problemset/problem/1154/G 题目大意: 给定n个数,在这些数中选2个数,使这两个数的最小公倍数最小,输出这两个数的下标(如 ...

  3. 取得数据表中前N条记录，某列重复的话只取第一条记录

    项目需要筛选出不重复数据,以前没有做过,第一反应就是利用distinct处理,但是弄了好久也没搞出来,大家有知道的望告知下. 这次筛选没有使用distinct ,是利用group by ,利用id为唯 ...

  4. jpa 比较复杂的查询和用in关键字

    in关键字使用代码

  5. 了解AutoCAD对象层次结构 —— 2 ——文档

    再次想象另外一个场景:启动AutoCAD程序后,您新建了两个.dwg文件,也就是说创建了两个文档(Document)对象.将窗口进行层叠,您看到的窗口应该与下图类似: 图 4‑3 如何访问这些文档呢? ...

  6. linux查找符合条件的文件并删除

    找到根目录下所有的以test开头的文件并把查找结果当做参数传给rm -rf命令进行删除: 1.find / -name “test*” |xargs rm -rf 2.find / -name “te ...

  7. UNIX口令破解机

    在编写我们的UNIX口令破解机时,我们需要使用UNIX 计算口令hash 的crypt()算法.Python 标准库中已自带有crypt 库.要计算一个加密的UNIX 口令hash,只需调用函数cry ...

  8. HDU4460-Friend Chains-BFS+bitset优化

    bfs的时候用bitset优化一下. 水题 #include <cstdio> #include <cstring> #include <algorithm> #i ...

  9. [洛谷P1272] 重建道路

    类型:树形背包 传送门:>Here< 题意:给出一棵树,要求断开$k$条边来分离出一棵有$P$个节点的子树.求最小的$k$ 解题思路 和上一题类型相同,但不那么好做了——分离出的一棵子树肯 ...

  10. Matplotlib学习---用matplotlib画阶梯图（step plot）

    这里利用Nathan Yau所著的<鲜活的数据:数据可视化指南>一书中的数据,学习画图. 数据地址:http://datasets.flowingdata.com/us-postage.c ...