网站的建设费用,礼品公司网站制作,网页设计与网站开发超链接,科技小巨人申报条件课程地址#xff1a;Python Web 框架 Flask 快速入门 文章目录#x1f334; 表单1、表单介绍2、表单的简单实现1. 代码2. 代码的执行逻辑3、使用wtf扩展实现4、bug记录#xff1a;表单验证总是失败#x1f334; 表单
1、表单介绍
当我们在网页上填写账号密码进行登录的时… 课程地址Python Web 框架 Flask 快速入门 文章目录 表单1、表单介绍2、表单的简单实现1. 代码2. 代码的执行逻辑3、使用wtf扩展实现4、bug记录表单验证总是失败表单
1、表单介绍
当我们在网页上填写账号密码进行登录的时候就是在填写一个“表单”。web表单是web应用程序种最基本的功能。
2、表单的简单实现
下面的代码实现了这样的功能
前端发起请求时收到一个含表单的网页在网页填写表单提交到后端后端对表单进行验证显示成功或错误信息到前端
网页显示 1. 代码
前端代码index2.html
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/title/headbody!-- 一个表单 --form methodpostlabel用户名:/labelinput typetext nameusernamebrlabel密码/labelinput typepassword namepasswordbrlabel确认密码/labelinput typepassword namepassword2brinput typesubmit 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(debugTrue)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 langenheadmeta charsetUTF-8titleTitle/title/headbodyform methodpost{{ 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 successelse:flash(填写错误请确保每项都填且两次密码填写一致。)return render_template(index.html, formlogin_form)app.run(debugTrue)4、bug记录表单验证总是失败
起初没加csrf时以为是它的原因后来加了还是失败总以为是我csrf没写好在网上搜csrf相关的文章和教程然而令我没想到的是最终问题是在验证函数EqualTo()这里
# 问题代码
password2 PasswordField(确认密码, validators[DataRequired(), EqualTo(password, 密码填入不一致)])
# 修改
password2 PasswordField(确认密码, validators[DataRequired(), EqualTo(password, 密码填入不一致)])
