Flask狼书笔记 | 04_表单

简介: 4 表单表单是和用户交互最常见的方式之一,本章涉及的Python包由WTForms、Flask-WTF、Flask-CKEditor。(p104)4.1 HTML表单

4 表单

表单是和用户交互最常见的方式之一,本章涉及的Python包由WTFormsFlask-WTFFlask-CKEditor。(p104)

4.1 HTML表单

通过<form>标签创建表单,<input>标签创建字段。

<form method="post">
    <input type="text" name="username" placeholder="用户名">
</form>

WTForms:支持在Python中使用类定义表单,然后通过类定义生成对应的HTML代码。

4.2 使用Flask-WTF

Flask-WTF在Flask中集成了表单数据解析、CSRF保护、文件上传等功能。

# 设置密钥,flask-wtf使用程序密钥来对csrf令牌进行签名(?)
app.secret_key = 'secret string'

定义表单类

from wtforms import From
class LoginForm(Form):
    ...
  • 常用的WTForms字段、实例化字段常用参数、常用的WTForms验证器,见(p107)。

输出HTML代码

>>> form = LoginForm()
>>> form.username()  # 假设在类中定义了username字段
>>> form.username.label()
  • 常用的WTForms字段、实例化字段常用参数、常用的WTForms验证器,见(p107)。

输出HTML代码

>>> form = LoginForm()
>>> form.username()  # 假设在类中定义了username字段
>>> form.username.label()
  • 添加额外属性:输出的字段HTML代码默认只包含idname属性,其他属性可以:
  • 1、使用render_kw属性(p109)
  • 2、在调用时传入

在模板中渲染表单:我们需要把表单类实例传入模板,然后再模板中调用表单类的属性即可获取字段对应的HTML代码。

return render_template('basic.html', form=form)
<form method="post">
    {{ form.csrf_token }}
    {{ form.username.label }}
    {{ form.username(class='form-contorl') }} <!-- 调用时传入额外属性值 -->
</form>
  • CSRF字段:在提交表单后会自动验证该字段,为使验证通过,需渲染。
  • 可以手动编写HTML表单的代码,name属性与表单类保持一致。

4.3 处理表单数据

1 过程解析请求 --> 转换为Python数据类型 --> 验证 --> 处理。


2 提交表单在HTML中,当<form>标签声明的表单中类型为submit的提交字段被点击时,就会创建一个提交表单的HTTP请求。


HTML表单中控制提交行为的属性:action(目标URL),method(HTTP请求方法),enctype(表单数据编码类型)。(p112)

HTML表单中控制提交行为的属性:action(目标URL),method(HTTP请求方法),enctype(表单数据编码类型)。(p112)

3 验证表单数据

  • 客户端验证:可以实时动态提示用户的输入是否正确,降低服务器负载。可以通过HTML5内置的验证属性,或Javascript实现。
  • 服务器端验证:必须的,因为客户端不可靠。
<!-- 使用html5属性 -->
<input type="text" name=username" required>
  • WTForms验证机制:实例化表单类时传入数据,然后调用实例的validate()方法,错误消息会存储到实例的errors属性对应的字典中。
>>> form.errors # 错误消息字典
  • 获取数据data属性是一个匹配所有字段与对应数据的字典。
>>> form.username.data
  • PRG模式:(Post/Redirect/Get),在浏览器中,刷新页面时的默认行为是发送上一个请求,会导致重复提交表单。因此在处理表单后应返回一个重定向响应(GET)。

4 渲染错误消息:WTForms会把错误消息添加到表单类的errors属性中,这是一个匹配作为表单字段的类属性到对应的错误消息列表的字典

>>> form.username.errors

4.4 表单进阶实践

简化表单处理过程的技巧,以及表单的一些非常规应用

1 设置错误消息语言:如下,所有继承MyBaseForm的表单类,将使用新设置的错误消息默认语言。

from flask_wtf import FlaskForm 
app = Flask(__name__)
app.config['WTF_I18N_ENABLED'] = False
class MyBaseForm(FlaskForm):
    class Meta:
        locals = ['zh']
class HelloFrom(MyBaseForm):
    ...

疑惑:类内部再定义一个Meta类是什么操作?

2 使用宏渲染表单:在模板中渲染表单时,存在大量的重复工作:获取<input>定义、获取<label>定义、渲染错误消息。为了避免每一个字段重复这些代码,可以创建一个宏。(p120)

{% macro form_field(field) %}
  {{ field.label}}<br>
  {{ field(**kwargs) }}<br>
  {% if field.errors %}
    {% for error in field.errors %}
      {{ error }}
    {% endfor %}
  {% endif %}
{% end macro %}

3 自定义验证器:验证器是指在定义字段时传入validators参数列表的可调用对象,接受formfield(字段)两个位置参数。(p121)

  • 行内验证器:在表单类中定义,用来验证某个特定的字段。
  • 全局验证器:可重用。定义一个函数,在验证不通过时抛出ValidateionError异常。若需支持参数,可用工厂函数形式

工厂函数:返回一个可调用对象的函数。

4 文件上传

  • 渲染字段:在HTML中,渲染一个文件上传字段只需要将<input字段的type属性值设置为file。
<input type="file">

可以使用Flask-WTF提供的FileField类创建文件上传字段,验证器包括FileRequired(是否包含文件对象)和FileAllowed(验证文件类型)。此外,可以通过限制请求报文的最大长度来限制文件大小:

app.config['MAX_CONTENT_LENGTH'] = 3 * 1024 * 1024
  • 获取文件:可以在request.files中获取,解析为Werkzeug中的FileStorage对象。不过Flask-WTF会自动获取
request.files.get('photo')
# 在Flask-WTF中
f = form.photo.data

处理文件名:可以过滤文件名中的危险字符,或统一重命名(使用uuid)。

其它:还有保存文件、获取保存后的文件、多文件上传等问题,此处省略,用到的时候再细看吧!

疑惑:使用uuid重命名了文件,后续如何找到这个文件呢,将文件名保存到数据库?(毕竟文件名是随机生成的)


多文件:单击一次按钮,可以一次性选择多个文件并上传。心得笔记:感觉文件上传这一块弯弯绕绕挺多的,一时间看得有点懵。

5 使用Flask-CKEditor集成富文本编辑器:对我也是一个黑盒子 的感觉(p129)

疑惑:文本应该以什么形式保存?

6 单个表单多个提交按钮

如“发布文章”和“保存草稿”,需根据按钮做出不同的处理。可在表单类创建多个SubmitField类型的字段,只有被点击的字段才会出现在reqeust.form字典中,而调用data属性时则会被处理为TrueFalse

if form.validata_on_submit():
    if form.save.data:
        ...
    if form.publish.data:
        ...

7 单个页面多个表单

问题是判断当前被提交的是哪个表单。

  • 单视图处理:为两个表单的提交字段设置不同的名称。
  • 多视图处理:通常在一个处理表单的视图函数内包含了两类工作:渲染(GET)、处理提交的表单(POST)。因此可以单独创建一个渲染的视图函数,再为两个表单分别创建提交的视图函数。

:表单提交请求的目标URL通过action属性设置。

小记

表单这一节的内容比较丰富、繁杂,涉及的调包操作也较多,看完后仍有不少细节之处理解模糊。偶尔会体会到,之前看过的《Python工匠》对于我理解本书内容的帮助。

学这节的时候,我看得多,动手少,难免看了后面忘前面。一节书看完,再去看相关的源代码时却仍有些看不懂。

相关文章
|
6月前
|
JSON 前端开发 数据安全/隐私保护
通过一个form表单的渲染演示,Flask的request,重定向语法
通过一个form表单的渲染演示,Flask的request,重定向语法
52 0
通过一个form表单的渲染演示,Flask的request,重定向语法
|
6月前
|
前端开发 JavaScript 数据库
Flask狼书笔记 | 09_图片社交网站 - 大型项目的架构与需求(2)
9.8 收藏图片 前面已经学习过如何使用关联表来表示多对多关系,缺点是只能表示关系,不能存储数据(如我还想记录下收藏图片的时间戳)。这种情况下,我们可以使用关联模型来表示多对多关系。 在关联模型中,我们将Photo模型与User模型的多对多关系,分离成了User模型和Collect模型的一对多关系,和Photo模型与Collect模型的一对多关系。
140 0
|
6月前
|
存储 前端开发 API
Flask狼书笔记 | 08_个人博客(上)
8 个人博客 个人博客是一个典型的CMS(内容管理系统),通常包含前台和后台两部分。这一张将涉及更高级的项目组织方式,以及一些新的Python包:Flask-Login,Unidecode。 8.1 大型项目结构
70 0
|
6月前
|
SQL 存储 前端开发
Flask狼书笔记 | 07_留言板
7 留言板 这是一个简单的程序,涉及到的大部分是之前所学习到的基础知识。新涉及的python包: BootStrap-Flask,Flask-Moment,Faker,Flask-Debug Toolbar。
68 0
|
6月前
|
JSON API 开发工具
Flask狼书笔记 | 06_电子邮件
6 电子邮件 Web中,我们常在用户注册账户时发送确认邮件,或是推送信息。邮件必要的字段包含发信方(sender),收信方(to),邮件主题(subject),邮件正文(body)。
42 0
|
6月前
|
数据库 数据安全/隐私保护 开发者
WTForms在Flask中的应用:创建与验证表单
【4月更文挑战第16天】本文介绍了如何在Flask应用中使用WTForms进行表单处理。首先,通过`pip install WTForms`安装库,并在配置文件中启用CSRF保护。接着,创建表单类,如`RegistrationForm`,包含所需字段及验证规则。在视图函数中处理表单提交,验证数据并进行相应操作。最后,在模板中渲染表单,显示标签、输入字段及验证错误信息。WTForms提供便捷的表单创建和验证,增强应用交互性和安全性。
|
6月前
|
数据库 数据安全/隐私保护 开发者
Flask表单处理:让Web交互更轻松
【4月更文挑战第16天】本文介绍了Flask中处理表单的基本流程和实用技巧。使用Flask-WTF扩展创建表单类,如`RegistrationForm`,包含字段及验证器。在模板中渲染表单,接收并处理数据,如`register`视图函数中的`form.validate_on_submit()`。技巧包括自定义验证器、CSRF保护、动态表单字段和文件上传。Flask-WTF使Web交互更便捷,增强了安全性与灵活性。
|
前端开发 数据可视化 JavaScript
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
Python Flask Echarts数据可视化图表实战晋级笔记(4)ajax参数传递互动
124 0
|
6月前
|
存储 前端开发 JavaScript
Flask狼书笔记 | 09_图片社交网站 - 大型项目的架构与需求(1)
9 图片社交网站 本章新涉及的Python包:Flask-Dropzone, Pillow, Flask-Avatars, Whoosh, Flask-Whooshee。 9.1 项目组织架构 1、功能式架构
107 0
|
6月前
|
存储 安全 数据库
Flask狼书笔记 | 08_个人博客(下)
8 个人博客 8.4 初始化博客 1、安全存储密码 密码不要以明文的形式直接存储在数据库中,以防被攻击者盗取、泄露。一般的做法是,不存储密码本身,而存储通过密码生成的散列值。(但密码仍然可能在传输过程中被截获)
69 0