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

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

news 2026/1/15 23:14:33

课程地址：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++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/1/15 4:24:04

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2026/1/15 4:39:38

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2026/1/15 3:58:15

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2026/1/15 4:58:01

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/1/15 6:54:43

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/15 5:37:41

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2026/1/15 6:17:38

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2026/1/15 6:04:32

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

编程新知 2026/1/15 4:58:45

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...

编程新知 2026/1/15 4:58:26