【Flask】学习——Web表单（普通表单和Flask-WTF）

2023-11-05 01:10
文章标签 学习 表单 web flask 普通 wtf

本文主要是介绍【Flask】学习——Web表单（普通表单和Flask-WTF），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 一、概述
  • 二、普通表单示例
    • 2.1 普通的表单
    • 2.2 flash消息优化普通表单
  • 三、WTForms支持
    • 3.1 HTML标准字段
    • 3.2 常用验证函数
  • 四、WTForm示例
  • 五、WTForm逻辑验证

一、概述

Web表单是Web应用程序的基本功能。

它是HTML页面中负责数据采集的部件，表单有三个部分组成：表单标签、表单域、表单按钮。表单允许用户输入数据，负责HTML页面数据采集，通过表单将用户输入的数据提交给服务器。

在FLask中，为了处理web表单，一般使用Flask-WTF扩展，它封装了WTForms，并且它有验证表单数据的功能

二、普通表单示例

下面是使用普通方式实现的表单：

2.1 普通的表单

在网页端输入账号、密码和确认密码后，当填写内容不为空，且密码与确认密码相同时，点击提交即可返回success字符串。当内容填写不完整时，面板显示“参数不完整”，当两次密码不相同时，面板显示 “密码不一致”。演示效果如下:
在这里插入图片描述

index.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>
</form></body>
</html>

FLask-WTF-demo.py文件：

from flask import Flask, render_template, requestapp = Flask(__name__)'''
目的：实现一个简单的登录的逻辑处理
1. 路由需要有get和post两种请求方式--》需要判断请求方式
2. 获取请求的参数
3. 判断参数是否填写以及密码是否相同
4. 如果判断都没有问题，就返回一个success
'''@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)# 3. 验证参数是否填写 & 密码是否相同if not all([username, password, password2]):print('参数不完整')elif password != password2:print('密码不一致')else:return 'success'return render_template('index.html')if __name__ == '__main__':app.run()

2.2 flash消息优化普通表单

在3.1的基础上对代码进行优化，使用flash传递消息，使提示“参数不完整”和“密码不一致”能够显示在网页上。flash在传递的过程中需要secret_key进行加密。效果如下：
在这里插入图片描述

index.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>{# 使用遍历获取flash消息 #}{% for message in get_flashed_messages() %}{{ message }}{% endfor %}</form></body>
</html>

FLask-WTF-demo.py文件：

from flask import Flask, render_template, request, flashapp = Flask(__name__)app.secret_key = 'suibianxie'   # 设置secret_key，做加密消息的混淆
'''
目的：实现一个简单的登录的逻辑处理
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)# 3. 验证参数是否填写 & 密码是否相同if not all([username, password, password2]):#  print('参数不完整')flash(u'参数不完整')      # u用于解决编码问题elif password != password2:# print('密码不一致')flash(u'密码不一致')else:return 'success'return render_template('index.html')if __name__ == '__main__':app.run()

三、WTForms支持

除了flask本身，还需要安装依赖Flask-WTF。

使用依赖时，需要像下面一样导入这些字段。

from wtforms import StringField, PasswordField, SubmitField

3.1 HTML标准字段

字段对象说明
StringField文本字段
TextAreaField多行文本字段
PasswordField密码文本字段
HiddenField隐藏文件字段
DateField文本字段，值为datetime.date文本格式
DateTimeField文本字段，值为datetime.datetime文本格式
IntegerField文本字段，值为整数
DecimalField文本字段，值为decimal.Decimal
FloatField文本字段，值为浮点数
DadioField一组单选框
SelectField下拉列表
SelectMutipleField下拉列表，可选择多个值
FileField文件上传字段
SubmitField表单提交按钮
FormField把表单作为字段嵌入另一个表单
FieldList一组指定类型的字段

3.2 常用验证函数

验证函数说明
DataRequired确保字段中有数据
EqualTo比较两个字段的值，常用于比较两次密码输入
Length验证输入的字符串长度
NumberRanger验证输入的值在数字范围内
URL验证URL
AnyOf验证输入值在可选列表中
NoneOf验证输入值不再可选列表中

使用Flash-WTF需要配置参数SECRET_KEY。

CSRF_ENABLED是为了CSRF（跨站请求伪造）保护。SECRET_KEY用来生成加密令牌，当CSRF激活的时候，该设置根据设置的密钥生成加密令牌。

四、WTForm示例

同2.1、2.2内容一样，只不过该部分使用了Flask-WTF表单，效果如下：
在这里插入图片描述
除了flask本身，还需要安装依赖Flask-WTF，下面是代码部分：

Flask-WTF-demo.py文件:

目的：实现一个简单的登录的逻辑处理
1. 路由需要有get和post两种请求方式--》需要判断请求方式
2. 获取请求的参数
3. 判断参数是否填写以及密码是否相同
4. 如果判断都没有问题，就返回一个success
''''''
给模板传递消息
flash-->需要对内容加密，因此需要设置secret_key，做加密消息的混淆
模板中需要去遍历消息
''''''
使用WTF实现表单
需要自定义表单类
'''class LoginForm(FlaskForm):username = StringField(u'用户名:')password = PasswordField(u'密码:')password2 = PasswordField(u'确认密码:')submit = SubmitField(u'提交')@app.route('/', methods=['GET', 'POST'])
def login():login_form = LoginForm()return render_template('index.html', form=login_form)if __name__ == '__main__':app.run()

index.html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><hr><form method="post">{{ form.username.label }}{{ form.username }}<br>{{ form.password.label }}{{ form.password }}<br>{{ form.password2.label }}{{ form.password2 }}<br>{{ form.submit }}
</form></body>
</html>

五、WTForm逻辑验证

通过WTF扩展实现逻辑验证，使用了DataRequired()和EqualTo()两种验证函数。在第二部分和第四部分的基础上进行代码修改。

当内容未填写完全时：
在这里插入图片描述
当全部填入正确时，返回success。

Flask-WTF-demo.py文件:

from flask import Flask, request, render_template, flash
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, EqualToapp = Flask(__name__)app.secret_key = 'suibianxie'   # 设置secret_key，做加密消息的混淆'''
目的：实现一个简单的登录的逻辑处理
1. 路由需要有get和post两种请求方式--》需要判断请求方式
2. 获取请求的参数
3. 判断参数是否填写以及密码是否相同
4. 如果判断都没有问题，就返回一个success
''''''
给模板传递消息
flash-->需要对内容加密，因此需要设置secret_key，做加密消息的混淆
模板中需要去遍历消息
''''''
使用WTF实现表单
需要自定义表单类
'''class LoginForm(FlaskForm):# validators 为列表username = StringField(u'用户名:', validators=[DataRequired()])password = PasswordField(u'密码:', validators=[DataRequired()])#  EqualTo()第一个参数表示与哪个变量对比，第二个参数表示大概不同时返回值password2 = PasswordField(u'确认密码:', validators=[DataRequired(), EqualTo('password')])submit = SubmitField(u'提交')@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,需要在html里开启if login_form.validate_on_submit():print(username, password)return 'success'else:flash('参数有误')return render_template('index.html', form=login_form)if __name__ == '__main__':app.run()

index.html文件：
注意：需要添加csrf，不然会出现错误。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><hr><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 }}
</form></body>
</html>

参考
https://www.bilibili.com/video/BV17W41177oE?p=13
https://www.bilibili.com/video/BV17W41177oE?p=14
https://www.bilibili.com/video/BV17W41177oE?p=15
https://www.bilibili.com/video/BV17W41177oE?p=16

这篇关于【Flask】学习——Web表单（普通表单和Flask-WTF）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/346390。

相关文章

使用Docker构建Python Flask程序的详细教程

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker
阅读更多...
如何使用Maven创建web目录结构

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》：本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho
阅读更多...
Java Web实现类似Excel表格锁定功能实战教程

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.
阅读更多...
如何使用Haporxy搭建Web群集

如何使用Haporxy搭建Web群集

《如何使用Haporxy搭建Web群集》Haproxy是目前比较流行的一种群集调度工具,同类群集调度工具有很多如LVS和Nginx,本案例介绍使用Haproxy及Nginx搭建一套Web群集,感兴趣的... 目录一、案例分析1.案例概述2.案例前置知识点2.1 HTTP请求2.2 负载均衡常用调度算法 2.
阅读更多...
Go学习记录之runtime包深入解析

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,：本文主要介绍Go学习记录之runtime包的... 目录前言：一、runtime包内容学习1、作用：① Goroutine和并发控制：② 垃圾回收：③ 栈和
阅读更多...
Android学习总结之Java和kotlin区别超详细分析

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,：本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1：Kotlin 如何解决 Java 的 NullPointerExceptio
阅读更多...
python web 开发之Flask中间件与请求处理钩子的最佳实践

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1
阅读更多...
SpringBoot项目Web拦截器使用的多种方式

SpringBoot项目Web拦截器使用的多种方式

《SpringBoot项目Web拦截器使用的多种方式》在SpringBoot应用中,Web拦截器（Interceptor）是一种用于在请求处理的不同阶段执行自定义逻辑的机制,下面给大家介绍Sprin... 目录一、实现 HandlerInterceptor 接口1、创建HandlerInterceptor实
阅读更多...
Python Flask 库及应用场景

Python Flask 库及应用场景

《PythonFlask库及应用场景》Flask是Python生态中​轻量级且高度灵活的Web开发框架,基于WerkzeugWSGI工具库和Jinja2模板引擎构建,下面给大家介绍PythonFl... 目录一、Flask 库简介二、核心组件与架构三、常用函数与核心操作 ​1. 基础应用搭建​2. 路由与参
阅读更多...
Web技术与Nginx网站环境部署教程

Web技术与Nginx网站环境部署教程

《Web技术与Nginx网站环境部署教程》：本文主要介绍Web技术与Nginx网站环境部署教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Web基础1.域名系统DNS2.Hosts文件3.DNS4.域名注册二.网页与html1.网页概述2.HTML概述3.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2