模拟场景如果当用户注册时输入错误而由于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. web项目中的监听器，过滤器以及自定义servlet的执行顺序

    可以看到web容器一启动就会实例化监听器的contextInitialized(ServletContextEvent event)方法,然后是过滤器的init()方法,最后在用户访问web应用的 时 ...

  2. Java Json 数据下划线与驼峰格式进行相互转换

    概述 今天遇见一个需求,需要对json数据进行下划线与驼峰格式之间进行转换,在Fastjson.Jackson.Gson都提供了转换的方式,在这里进行一下列举. User类: public class ...

  3. 在windows 7上安装TensorFlow

    TensorFlow是一个开源软件库,用于各种感知和语言理解任务的机器学习.目前被50个团队用于研究和生产许多Google商业产品,如语音识别.Gmail.Google 相册和搜索,其中许多产品曾使用 ...

  4. saltstack一

    Saltstack概述 Salt一种全新的基础设施管理方式,部署轻松,在几分钟内可运行起来,扩展性好,很容易管理上万台服务器,速度够快,服务器之间秒级通讯. salt底层采用动态的连接总线, 使其可以 ...

  5. Java多线程2：线程的使用及其生命周期

    一.线程的使用方式 1.继承Thread类,重写父类的run()方法 优点:实现简单,只需实例化继承类的实例,即可使用线程 缺点:扩展性不足,Java是单继承的语言,如果一个类已经继承了其他类,就无法 ...

  6. servletContext和request对象的生命周期比较

    ServletContext: 创建:服务器启动 销毁:服务器关闭 域的作用范围:整个web应用 Request: 创建:访问时创建request 销毁:响应结束request销毁 域的作用范围:一次 ...

  7. 解决spring多线程不共享事务的问题

    在一个事务中使用多线程操作数据库时,若同时存在对数据库的读写操作,可能出现数据读取的不准确,因为多线程将不会共享同一个事务(也就是说子线程和主线程的事务不一样),为了解决这个问题,可以使用spring ...

  8. BizTalk Server 如何处理大消息

    什么是大消息? 遗憾的是,此问题的答案不而直接与特定的消息大小,绑定,取决于你的 Microsoft 的特定瓶颈 BizTalk Server 系统. 与大消息关联的问题可分为以下几类: 内存不足错误 ...

  9. Ubuntu16.04安装使用wps

    Ubuntu16.04安装使用wps 1.wps官网下载并安装wps 此处以Debian安装包为例,官网下载路径 http://www.wps.cn/product/wpslinux/# 直接安装: ...

  10. Windows服务一直“正在启动”怎么杀

    转载:https://blog.csdn.net/huanglong8/article/details/71156848 PS:cmd 记得使用 管理员身份运行 这里需要通过控制台 命令行来查询PID ...