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

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

news 2025/7/5 13:48: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

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/6/21 3:33:03

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/6/21 16:37:38

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/6/21 10:27:51

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2025/7/5 2:26:55

【LeetCode】3309. 连接二进制表示可形成的最大数值（递归|回溯|位运算）

LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 题目描述解题思路Java代码 题目描述 题目链接&#xff1a;LeetCode 3309. 连接二进制表示可形成的最大数值&#xff08;中等&#xff09; 给你一个长度为 3 的整数数组 nums。 现以某种顺序 连接…...

编程新知 2025/7/4 1:14:28

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/6/25 2:12:34

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

编程新知 2025/7/4 14:28:19

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程新知 2025/7/4 12:40:44

JavaScript 标签加载

目录 JavaScript 标签加载script 标签的 async 和 defer 属性&#xff0c;分别代表什么&#xff0c;有什么区别1. 普通 script 标签2. async 属性3. defer 属性4. type"module"5. 各种加载方式的对比6. 使用建议 JavaScript 标签加载 script 标签的 async 和 defer …...

编程新知 2025/6/16 11:59:43

Python爬虫（52）Scrapy-Redis分布式爬虫架构实战：IP代理池深度集成与跨地域数据采集

目录 一、引言&#xff1a;当爬虫遭遇"地域封锁"二、背景解析&#xff1a;分布式爬虫的两大技术挑战1. 传统Scrapy架构的局限性2. 地域限制的三种典型表现 三、架构设计&#xff1a;Scrapy-Redis 代理池的协同机制1. 分布式架构拓扑图2. 核心组件协同流程 四、技术实…...

编程新知 2025/7/4 13:43:10