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

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

news 2025/10/14 21:31:25

课程地址：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

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/10/13 9:10:36

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

编程新知 2025/9/30 3:54:15

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/9/29 7:12:30

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/8/8 2:13:29

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/8/25 20:38:36

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/10/12 4:52:31

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

编程新知 2025/10/3 0:44:22

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/9/29 22:44:00

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2025/9/28 3:39:12