当前位置： 首页 > news >正文

Web 框架 Flask 快速入门（二）表单

news 文章来源：https://blog.csdn.net/m0_63238256/article/details/128934574 2024/11/7 13:40:10

课程地址：Python Web 框架 Flask 快速入门

文章目录

  • 🌴 表单
    • 1、表单介绍
    • 2、表单的简单实现
      • 1. 代码
      • 2. 代码的执行逻辑
    • 3、使用wtf扩展实现
    • 4、bug记录：表单验证总是失败

🌴 表单

1、表单介绍

当我们在网页上填写账号密码进行登录的时候，就是在填写一个“表单”。web表单是web应用程序种最基本的功能。

2、表单的简单实现

下面的代码实现了这样的功能：

  • 前端发起请求时，收到一个含表单的网页
  • 在网页填写表单提交到后端
  • 后端对表单进行验证，显示成功或错误信息到前端

网页显示：

在这里插入图片描述

1. 代码

前端代码（index2.html）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!-- 一个表单 --><form method="post"><label>用户名:</label><input type="text" name="username"><br><label>密码：</label><input type="password" name="password"><br><label>确认密码：</label><input type="password" name="password2"><br><input type="submit" value="提交"><br><!-- 使用遍历获取闪现的消息 -->{% for message in get_flashed_messages() %}{{ message }}{% endfor %}</form></body>
</html>

后端代码（python）：

from flask import Flask, render_template, request, flashapp = Flask(__name__)app.secret_key = 'qfmz''''
目的：实现一个简单的登录的逻辑处理
1. 路由需要有get和post两种请求方式 --> 需要判断请求方式
2. 获取请求的参数
3. 判断参数是否填写 & 密码是否相同
4. 如果判断都没有问题，就返回一个success
''''''
给模板传递消息
flash --> 需要对内容加密，因此设置secret_key，做加密消息的混淆
模板中遍历消息
'''@app.route('/', methods=['GET', 'POST'])
def index():# request: 请求对象 --> 获取请求方式、数据# 1. 判断请求方式if request.method == 'POST':# 2. 获取请求参数username = request.form.get('username')password = request.form.get('password')password2 = request.form.get('password2')print(username)print(password)print(password2)# 3. 判断参数是否填写 & 密码是否相同if not all([username, password, password2]):flash('参数不完整')elif password != password2:flash('密码不一致')else:return 'success'# 2. 获取请求参数return render_template('index2.html')app.run(debug=True)

2. 代码的执行逻辑

我填写一个表单时，这些代码的执行逻辑是怎样的呢？我知道这些代码能跑，但我总感觉自己和这些代码之间的隔阂较大，我不知道我在网页中的没一步操作是哪些代码在发挥作用。对此，debug单步执行是一个很有用的帮助理解的办法。

我知道，一个请求就对应着一个响应。那么总结下，进入一个网页，填写和提交表单的过程中应该是发生了2次请求，同时也有2次响应。

  • 第1次，我进入网页，网页对后端发送GET请求，后端判断请求类型不是POST，于是直接返回（不是返回html源代码，是在flask的模板引擎里走了一遭的）index2.html，前端就显示一个需要填写的表单。

  • 第2次，我填写完表单进行提交后，网页将表单中填写的数据作为参数，对后端发送POST请求，使用webob库解析environ得到的post参数如下：

    MultiDict([('username', '1'), ('password', '******'), ('password2', '******')])

    然后后端根据请求再返回一个网页到前端。

3、使用wtf扩展实现

显示效果与前面的“简单实现”一样，前端代码写起来会简单一些，后端的表单逻辑验证也可以直接使用库实现。

前端代码（index.html）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><form method="post">{{ form.csrf_token() }}{{ form.username.label }}{{ form.username }}<br>{{ form.password.label }}{{ form.password }}<br>{{ form.password2.label }}{{ form.password2 }}<br>{{ form.submit }}<!-- 使用遍历获取闪现的消息 -->{% for message in get_flashed_messages() %}{{ message }}{% endfor %}</form></body>
</html>

后端代码（python）

from flask import Flask, render_template, request, flash
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, EqualToapp = Flask(__name__)app.secret_key = 'qfmz''''
使用WTF实现表单
自定义表单类
'''
class LoginForm(FlaskForm):username = StringField('用户名', validators=[DataRequired()])password = PasswordField('密码', validators=[DataRequired()])password2 = PasswordField('确认密码', validators=[DataRequired(), EqualTo('password', '密码填入不一致！')])submit = SubmitField('提交')@app.route('/', methods=['GET', 'POST'])
def login():login_form = LoginForm()# 1. 判断请求方式if request.method == 'POST':# 2. 获取请求参数username = request.form.get('username')password = request.form.get('password')password2 = request.form.get('password2')# 3. 逻辑验证，WTF一句话# 自动包含CSRF_token验证，前端代码记得写上{{ form.csrf_token() }}if login_form.validate_on_submit():print(username, password, password2)return 'success'else:flash('填写错误，请确保每项都填，且两次密码填写一致。')return render_template('index.html', form=login_form)app.run(debug=True)

4、bug记录：表单验证总是失败

起初没加csrf时，以为是它的原因；后来加了还是失败，总以为是我csrf没写好，在网上搜csrf相关的文章和教程，然而令我没想到的是，最终问题是在验证函数EqualTo()这里，

# 问题代码
password2 = PasswordField('确认密码', validators=[DataRequired(), EqualTo(password, '密码填入不一致！')])
# 修改
password2 = PasswordField('确认密码', validators=[DataRequired(), EqualTo('password', '密码填入不一致！')])

相关文章：

Web 框架 Flask 快速入门（二）表单

课程地址&#xff1a;Python Web 框架 Flask 快速入门 文章目录&#x1f334; 表单1、表单介绍2、表单的简单实现1. 代码2. 代码的执行逻辑3、使用wtf扩展实现4、bug记录&#xff1a;表单验证总是失败&#x1f334; 表单 1、表单介绍 当我们在网页上填写账号密码进行登录的时…...

编程日记 2023/2/12 20:22:12

C++基础（5） - 复合类型（上）

文章目录数组1、什么是数组2、数组的声明3、数组的初始化4、数组的访问5、二维数组6、memset —— 给数组中每一个元素赋同样的值字符串&#xff08;字符数组&#xff09;1、string.h 头文件1.1 strlen()1.2 strcmp()1.3 strcpy()1.4 strcat()string 类简介1、C11 字符串初始化…...

编程日记 2023/2/12 20:21:04

java重写（@Override）介绍及实例说明

1.概述方法的重写&#xff08;override&#xff09;是封装的特性之一。在子类中可以根据需要对基类中继承来的方法进行重写。重载和重写没有任何关系。作用&#xff1a;通过重写&#xff0c;子类既可以继承父类的东西&#xff0c;又可以灵活的扩充。1.override注解是告诉编译器…...

编程日记 2023/2/12 20:19:55

基于STM32的虚拟示波器

仓库地址 https://github.com/shuai132/ScopeMCU ScopeMCU Oscilloscope for MCU MCU: STM32F103C8Tx 需配合ScopeGUI使用 截图说明见wiki 最新版Releases Introduction 用最少的硬件成本&#xff0c;做一个实用的虚拟示波器。 这是硬件部分&#xff0c;基于STM32最小…...

编程日记 2023/2/12 20:18:44

搭建云端vscode-server，使用web ide进行远程开发

使用乌班图系统&#xff0c;搭建自己的网页vs code开发环境github地址&#xff1a;GitHub - coder/code-server: VS Code in the browser安装脚本curl -fsSL https://code-server.dev/install.sh | sh出现deb package has been installed.表示已经正确安装。测试启动2.1修改配置…...

编程日记 2023/2/12 20:17:34

Linux clock子系统及驱动实例

文章目录基本概念CLK子系统时钟API的使用clock驱动实例1、时钟树2、设备树3、驱动实现fixed_clk固定时钟实现factor_clk分频时钟实现gate_clk门控时钟实现基本概念 晶振&#xff1a;晶源振荡器 PLL&#xff1a;Phase lock loop&#xff0c;锁相环。用于提升频率 OSC&#xff1a…...

编程日记 2023/2/12 20:16:25

GIS数据格式坐标转换（地球坐标WGS84、GCJ-02、火星坐标、百度坐标BD-09、国家大地坐标系CGCS2000）

文章目录前言一、坐标系1.地球坐标 (WGS84)2.国测局坐标系(GCJ-02、火星坐标系)3.百度坐标(BD-09)4.国家大地2000坐标系(CGCS2000)二、百度坐标系(BD-09) 与火星坐标系(GCJ-02)的转换1.核心代码2.转换验证百度地图高德地图腾讯地图三、火星坐标系 (GCJ-02) 与百度坐标系 (BD-09…...

编程日记 2023/2/12 20:15:14

流媒体传输系列文章汇总

流媒体传输系列文章汇总 文章目录流媒体传输系列文章汇总引言流媒体交互协议详解视频封装协议详解流媒体环境搭建其他引言 从去年开始编写有关流媒体传输相关知识的文章&#xff0c;已发表文章22篇&#xff0c;阅读量也超过了10万&#xff0c;为了方便各位阅读&#xff0c;本文…...

编程日记 2023/2/12 20:14:07

“万字“ Java I/O流讲解

Java I/O流讲解 每博一文案 谁让你读了这么多书&#xff0c;又知道了双水村以外还有一个大世界&#xff0c;如果从小你就在这个天地里&#xff0c;日出而作&#xff0c;日落而息。 那你现在就会和众乡亲抱同一理想&#xff1a;经过几年的辛劳&#xff0c;像大哥一样娶个满意的…...

编程日记 2023/2/12 20:11:46

数据库（Spring）事务的四种隔离级别

文章目录Spring&#xff08;数据库&#xff09;事务隔离级别分为四种&#xff08;级别递减&#xff09;1、Serializable&#xff08;串行化&#xff09;2、REPEATABLE READ&#xff08;可重复读&#xff09;3、READ COMMITTED&#xff08;读以提交&#xff09;4、Read Uncommit…...

编程日记 2023/2/12 20:10:35

RabbitMQ详解（一）：RabbitMQ相关概念

RabbitMQ是目前非常热门的一款消息中间件&#xff0c;不管是互联网大厂还是中小企业都在大量使用。作为一名合格的开发者&#xff0c;有必要对RabbitMQ有所了解&#xff0c;本系列是RabbitMQ快速入门文章&#xff0c;主要内容包括RabbitMQ是什么、RabbitMQ核心概念、五种消息模…...

编程日记 2023/2/12 20:08:17

​ICLR 2023 | GReTo：以同异配关系重新审视动态时空图聚合

©PaperWeekly 原创 作者 | 周正阳单位 | 中国科学技术大学论文简介动态时空图数据结构在多种不同的学科中均普遍存在&#xff0c;如交通流、空气质量观测、社交网络等&#xff0c;这些观测往往会随着时间而变化&#xff0c;进而引发节点间关联的动态时变特性。本文的主要…...

编程日记 2023/2/12 20:07:10

线程池分享总结

线程池介绍 可以复用线程池的每一个资源 控制资源的总量 为什么要使用线程池 问题一&#xff1a;反复创建线程开销大 问题二&#xff1a;过多的线程会占用太多内存 解决以上两个问题的思路 • 用少量的线程——避免内存占用过多 • 让这部分线程都保持工作&#xff0c;且可…...

编程日记 2023/2/12 20:05:59

AOSP Android11系统源码和内核源码

推荐阅读 商务合作 安全产品 安全服务 2023年招聘 安全培训服务 软件定制服务 Android系统定制服务 安全/软件开发的课程列表 1.下载repo工具 (1).创建bin&#xff0c;并加入到PATH中 mkdir ~/binPATH~/bin:$PATH (2).安装依赖库 sudo apt-get install bison g-mult…...

编程日记 2023/2/12 20:04:46

layui框架学习（6：基础菜单）

菜单是应用系统的必备元素&#xff0c;虽然网页中的导航也能作为菜单使用&#xff0c;但菜单和导航的样式和用途有所不同&#xff08;不同之处详见参考文献5&#xff09;。Layui中用不同的预设类定义菜单和导航的样式&#xff0c;同时二者依赖的模块也不一样。本文主要学习和记…...

编程日记 2023/2/12 20:03:30

第十三届蓝桥杯 C++ B组省赛 C 题——刷题统计（AC）

1.刷题统计 1.题目描述 小明决定从下周一开始努力刷题准备蓝桥杯竞赛。他计划周一至周五每天 做 aaa 道题目, 周六和周日每天做 bbb 道题目。请你帮小明计算, 按照计划他将在 第几天实现做题数大于等于 nnn 题? 2.输入格式 输入一行包含三个整数 a,ba,ba,b 和 nnn. 3.输出…...

编程日记 2023/2/12 20:02:21

C++中的多态

【1】表现形式&#xff1a;同样的调用语句有多种不同的表现形态 【2】分类&#xff1a;静态联编和动态联编 静态联编有函数重载(运算符重载是特殊的函数重载),模板 【3】重点说下动态联编 【3.1】动态联编的实现需要以下步骤&#xff1a; 有继承关系、父类函数有virtual关…...

编程日记 2023/2/12 20:01:15

Swift如何保证线程安全

Swift可以通过以下几种方式来保证线程安全 使用互斥锁&#xff08;Mutex&#xff09;&#xff1a;使用互斥锁可以防止多个线程同时访问共享数据&#xff0c;保证线程安全。 使用OSAtomic操作&#xff1a;OSAtomic操作可以在多线程环境中安全地执行原子操作。 使用DispatchQue…...

编程日记 2023/2/12 20:00:09

整型提升+算术转换——“C”

各位CSDN的uu们你们好呀&#xff0c;今天小雅兰的内容是之前操作符那篇博客中没有讲完的内容&#xff0c;整型提升这个小知识点也非常重要&#xff0c;那现在&#xff0c;就让我们进入操作符的世界吧 隐式类型转换 算术转换 操作符的属性 隐式类型转换 表达式求值的顺序一部…...

编程日记 2023/2/12 19:59:02

Freemarker介绍

2. Freemarker介绍 FreeMarker 是一个用 Java 语言编写的模板引擎&#xff0c;它基于模板来生成文本输出。FreeMarker与 Web 容器无关&#xff0c;即在 Web 运行时&#xff0c;它并不知道 Servlet 或 HTTP。它不仅可以用作表现层的实现技术&#xff0c;而且还可以用于生成 XML…...

编程日记 2023/2/12 19:57:55

【软件测试开发】Junit5单元测试框架

目录1. 注解Test 注解BeforeEach BeforeAllAfterEach AfterAll2. 断言 assertassertequalsassertTrue assertFalseassertNull assertNotNull3. 用例执行顺序方法排序&#xff0c;通过 Order 注解来排序4. 测试套件 Suite5. 参数化单参数stringsints6. 参数化多参数CsvSourceCsv…...

编程日记 2023/2/12 19:56:40

【C语言技能树】程序环境和预处理

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 我会一直往里填充内容哒&#xff01; &…...

编程日记 2023/2/12 19:55:33

数据库的三大范式

1.为什么需要数据库设计 设计数据表的时候&#xff0c;要考虑很多的问题: 用户需要哪些数据&#xff0c;我们在数据表中要保存哪一些数据怎么保证数据表中的数据的正确性如何降低数据表的冗余度开发人员怎么才能更方便的使用数据库 如果数据库设计得不合理的话&#xff0c;可…...

编程日记 2023/2/12 19:54:25

【MT7628】开发环境搭建-Fedora12安装之后无法上网问题解决

1.按照如下图所示，打开Network Connections 2.点击Network Connections，弹出如下界面...

编程日记 2023/2/12 19:53:16

[Android Studio]Android 数据存储-文件存储学习笔记-结合保存QQ账户与密码存储到指定文件中的演练

&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea; Android Debug&#x1f7e7;&#x1f7e8;&#x1f7e9;&#x1f7e6;&#x1f7ea; Topic 发布安卓学习过程中遇到问题解决过程&#xff0c;希望我的解决方案可以对小伙伴们有帮助。 &#x1f4cb;笔记目…...

编程日记 2023/2/12 19:52:06

【openGauss实战9】深度分析分区表

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…...

编程日记 2023/2/12 19:50:55

XSS跨站脚本攻击剖析与防御：初识XSS

目录 跨站脚本介绍 1. 什么是XSS跨站脚本 2. XSS跨站脚本实例 3. XSS漏洞的危害 XSS的分类 1. 反射型XSS 2. 持久性XSS XSS构造 1. 利用< >标记注射Html /Javascript 2. 利用HTML标签属性值执行XSS 3. 空格回车Tab 4. 对标签属性值转码 5. 产生自己的事件…...

编程日记 2023/2/12 19:49:48

Python 高级编程之网络编程 Socket（六）

文章目录一、概述二、Python socket 模块1&#xff09;Socket 类型1、创建 TCP Socket2、创建 UDP Socket2&#xff09;Socket 函数1、服务端socket函数2、客户端socket函数3、公共socket函数三、单工&#xff0c;半双工以及全双工通信方式的区别四、单工&#xff0c;半双工以及…...

编程日记 2023/2/12 19:48:40

centos学习记录

遇到的问题及其解决办法 centos7安装图形化界面 yum groupinstall ‘X Window System’ yum groupinstall -y ‘GNOME Desktop’ 安装完成后输入init 5进入图形化界面 centos7安装vmware-tools 第一步卸载open-vm-tools 输入命令 yum remove open-vm-tools 输入命令 reboot 在…...

编程日记 2023/2/12 19:47:32

为什么说网络安全是风口行业？

前言 “没有网络安全就没有国家安全”。当前&#xff0c;网络安全已被提升到国家战略的高度&#xff0c;成为影响国家安全、社会稳定至关重要的因素之一。 网络安全行业特点 1、就业薪资非常高&#xff0c;涨薪快 2021年猎聘网发布网络安全行业就业薪资行业最高人均33.77万&…...

编程日记 2023/2/12 19:46:22

资讯类网站建设/百度广告联盟

1 使用&#xff1a; 一直以来习惯了使用printf函数&#xff0c;但是对于可变参数没有深入研究过&#xff0c;觉得可变参数是一个神奇的技术^0^。。。工作闲下来的时候&#xff0c;想研究研究看可变参数的使用和原理。目前C提供的可变参数的申明为void function(const char *for…...

编程日记 2024/11/7 10:52:28

怎么在网站上做签到/搜索引擎最佳化

之前讲到重排&#xff0c;布局的时候使用flex时&#xff0c;比使用inline-block和float时重排更快&#xff0c;所以在布局时可以优先考虑Flex。 H5新增srcset&#xff0c;sizes和元素用来做响应式图片&#xff0c;虽然对性能有提高&#xff0c;但是要准备很多的图片&#xff0c…...

编程日记 2024/11/7 7:35:50

iis6.1的网站建设及权限设置/互联网下的网络营销

//阿里面试//2010 年&#xff0c;阿里正当红。那年 BAT 的名气还没有现今那么响亮。就业的时候&#xff0c;很多毕业生还是会选择 HP, IBM, EMC, SONY, ORACLE&#xff0c;Microsoft 等一类的外企。这些外企在毕业生眼中代表的是名牌&#xff0c;权威&#xff0c;以及自由&…...

编程日记 2024/11/7 5:01:52

上海网站建设_永灿品牌建站/关键词歌曲歌词

今天&#xff0c;从全球视角转到中国&#xff0c;越来越多的用户也正在面临数据从本地向云端数据库&#xff08;DBaaS&#xff09;迁移&#xff0c;数据库迁移到云端 DBaaS&#xff0c;可以为用户带来两个方面的主要价值&#xff1a;1、降低成本&#xff1b;2、提高数据库高可用…...

编程日记 2024/11/7 3:08:20

自己做的网站怎么置顶/谷歌关键词分析工具

vue 从入门到精通(二) 上一篇总结了一些vue的理论知识&#xff0c;如果你没看懂的话……那返回去继续去看啊&#xff01;反正我要开始第二篇了。 vue提供了大量的指令&#xff0c;比如&#xff1a;v-if,v-bind,v-on……太多&#xff0c;多写项目&#xff0c;多看API&#xff0c…...

编程日记 2024/11/6 23:46:01

wordpress用旧的编辑器/seo实战密码电子书

电信物联网开放平台NB-IoT商业项目已投产一、NB-IoT模组硬件设备 BC28模组二、物联平台开发SSH集成电信物联SDK三、微信小程序前端四、NB-IoT商业项目已投产http://www.qchcloud.cn/tn/article/26转载于:https://blog.51cto.com/14042154/2391299...

编程日记 2024/11/6 21:58:17