模拟场景如果当用户注册时输入错误而由于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. python爬虫之Splash使用初体验

    Splash是什么: Splash是一个Javascript渲染服务.它是一个实现了HTTP API的轻量级浏览器,Splash是用Python实现的,同时使用Twisted和QT.Twisted(Q ...

  2. 进程有一个全局变量i，还有有两个线程。i++在两个线程里边分别执行100次，能得到的最大值和最小值分别是多少？

    转自https://blog.csdn.net/biubiu741/article/details/77990592 i++不是原子操作,也就是说,它不是单独一条指令,而是3条指令: 1.从内存中把i ...

  3. table index & delete array item

    table index & delete array item https://www.iviewui.com/components/table#ZDYLMB 编辑 row = { " ...

  4. python数学第三天【方向导数】

    1.方向导数 2. 梯度 3. 凸函数: 4. 凸函数的判定 5. 凸函数的一般表示 6. 凸性质的应用

  5. Python——进程队列

    队列 先进先出 from multiprocessing import Queue q = Queue(5) #队列的大小 q.put(1) #放入内容 q.put(2) #放入内容 q.put(3) ...

  6. Installing Office Online Server for SharePoint 2016

    Office Online Server is the next version of the Office Web Apps, which allows your users to view and ...

  7. css背景色 透明字体不透明

    .demo{ padding: 25px; background-color: rgba(,,,0.5);/* IE9.标准浏览器.IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ }

  8. mysql 集群方案

    试试基于Galera的MySQL高可用集群  mha  mgr

  9. UOJ275 [清华集训2016] 组合数问题 【Lucas定理】【数位DP】

    题目分析: 我记得很久以前有人跟我说NOIP2016的题目出了加强版在清华集训中,但这似乎是一道无关的题目? 由于$k$为素数,那么$lucas$定理就可以搬上台面了. 注意到$\binom{i}{j ...

  10. Django+Xadmin打造在线教育系统(六)

    讲师相关功能实现 拷贝并修改teacher-list.html和teacher-detail.html, 继承base模板 # 讲师列表 path('teacher_list/', TeacherLi ...