Flask狼书笔记 | 04_表单

请添加图片描述

文章目录

  • 4 表单
    • 4.1 HTML表单
    • 4.2 使用Flask-WTF
    • 4.3 处理表单数据
    • 4.4 表单进阶实践
    • 小记

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 Fromclass LoginForm(Form):...
  • 常用的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)

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'] = Falseclass 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工匠》对于我理解本书内容的帮助。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/54973.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023国赛数学建模E题思路模型代码 高教社杯

本次比赛我们将会全程更新思路模型及代码&#xff0c;大家查看文末名片获取 之前国赛相关的资料和助攻可以查看 2022数学建模国赛C题思路分析_2022国赛c题matlab_UST数模社_的博客-CSDN博客 2022国赛数学建模A题B题C题D题资料思路汇总 高教社杯_2022国赛c题matlab_UST数模社…

【C/C++】父类指针指向子类对象 | 隐藏

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

ICCV 2023 Oral | 从无约束图像集合中生成新视角的交叉光线神经辐射场

文章链接&#xff1a;https://arxiv.org/abs/2307.08093 代码链接&#xff1a;https://github.com/YifYang993/CR-NeRF-PyTorch.git 01. 介绍 本工作旨在通过从不受限制的图像集合&#xff08;例如从互联网中爬取的图像&#xff09;中合成新视角图片&#xff0c;从而提供3D沉浸…

5.网络原理之初识

文章目录 1.网络发展史1.1独立模式1.2网络互连1.3局域网LAN1.3.1基于网线直连1.3.2基于集线器组建1.3.3基于交换机组建1.3.4基于交换机和路由器组建1.3.4.1路由器和交换机区别 1.4广域网WAN 2.网络通信基础2.1IP地址2.2端口号2.3认识协议2.4五元组2.5 协议分层2.5.1 分层的作用…

DTC状态变化例子 4

例子1&#xff1a; 此示例概述了两个操作周期排放相关的 OBD DTC 中 DTC 状态位的操作。该图显示了两个操作周期排放相关的 OBD DTC 的处理。该处理也可应用于非排放相关的 OBD DTC&#xff0c;此处显示仅供一般参考。 0 接收到清除诊断信息 → DTC 状态字节初始化。 1, 2 相关…

(动态规划) 剑指 Offer 48. 最长不含重复字符的子字符串 ——【Leetcode每日一题】

❓剑指 Offer 48. 最长不含重复字符的子字符串 难度&#xff1a;中等 请从字符串中找出一个最长的不包含重复字符的子字符串&#xff0c;计算该最长子字符串的长度。 示例 1: 输入: “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”&#xff0c;所以其长度为…

JVM7:垃圾回收是什么?从运行时数据区看垃圾回收到底回收哪块区域?垃圾回收如何去回收?垃圾回收策略,引用计数算法及循环引用问题,可达性分析算法

垃圾回收是什么&#xff1f;从运行时数据区看垃圾回收到底回收哪块区域&#xff1f; 垃圾回收如何去回收&#xff1f; 垃圾回收策略 引用计数算法及循环引用问题 可达性分析算法 垃圾回收是什么&#xff1f;从运行时数据区看垃圾回收到底回收哪块区域&#xff1f;垃圾回收如何去…

ctfshow web入门 web103-web107

1.web103 和102一样 payload: v2115044383959474e6864434171594473&v3php://filter/writeconvert.base64-decode/resource1.php post v1hex2bin2.web104 值只要一样就可以了 payload: v21 post v113.web105 考查的是$$变量覆盖,die可以带出数据,输出一条消息&#xf…

C# winform加载yolov8模型测试(附例程)

第一步&#xff1a;在NuGet中下载Yolov8.Net 第二步&#xff1a;引用 using Yolov8Net; 第三步&#xff1a;加载模型 private IPredictor yolov8 YoloV8Predictor.Create("D:\\0MyWork\\Learn\\vs2022\\yolov_onnx\\best.onnx", mylabel); 第四步&#xff1a;图…

c++存取dat数据

众所周知&#xff0c;dat是一个类似加密的二进制格式文件&#xff0c;很多人喜欢将游戏数据保存在dat文件中&#xff0c;只有知道你的存放格式&#xff0c;才能够将数据破解出来&#xff0c;因而研究了dat文件的存取方式。其实就是c文件的操作&#xff0c;只不过是在取的时候需…

0基础入门C++之类和对象下篇

目录 1.再谈构造函数1.1构造函数赋值1.2初始化列表1.3explicit关键字 2.static成员2.1概念2.1静态成员变量2.2静态成员函数2.3特性 3.匿名对象4.友元函数4.1友元函数4.2友元类 5.内部类6.再次理解类和对象 1.再谈构造函数 首先我们先来回忆一下构造函数&#xff1a; 构造函数是…

华为OD-整数对最小和

题目描述 给定两个整数数组array1、array2&#xff0c;数组元素按升序排列。假设从array1、array2中分别取出一个元素可构成一对元素&#xff0c;现在需要取出k对元素&#xff0c;并对取出的所有元素求和&#xff0c;计算和的最小值 代码实现 # coding:utf-8 class Solution:…

【工具使用】Git的使用

dev代表开发版 1. git clone 命令 通过 git add <name> 对文件进行跟踪&#xff0c;把<name>加入到暂存区 git commit -m XXXXXXX 提交修改并补充XXXXX作为注释 “暂存”状态&#xff1a;出现了一些修改&#xff0c;但是还没有提交 对于Java来说&#xff0c;.cl…

goland 中的调试器 -- Evaluate

今天一个好朋友 找到我&#xff0c;问我关于goland中Evaluate 小计算器的使用方式&#xff0c;说实话&#xff0c;我在此之前也没用过这个东西&#xff0c;然后我就找一些相关文档&#xff0c;但是这类文档少的可怜&#xff0c;所以我就稍微研究一下&#xff0c;找找材料&#…

数组名和函数名是指针?指针和引用底层一样?

在2023/8/26日晚上&#xff0c;我看到一个所谓“典”的视频&#xff0c;一开始还没太在意&#xff0c;后面想了想发现我貌似也一直犯了以下的错误&#xff0c;而错误的原因在于我在新手阶段学习C/C并不是查阅文档扎好脚步学习的&#xff0c;而是被铺天盖地的新手学习基础教程里…

Java“牵手”天猫商品列表数据,关键词搜索天猫商品数据接口,天猫API申请指南

天猫商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取天猫商品列表和商品详情页面数据&#xff0c;您可以通过开放平台的接口或者直接访问天猫商城的网页来获取商品详情信息。以下是两种常用方法的介绍&…

Vue2向Vue3过度Vuex核心概念actions

目录 1 核心概念 - actions1.定义actions2.组件中通过dispatch调用 2 辅助函数 -mapActions 1 核心概念 - actions state是存放数据的&#xff0c;mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化)&#xff0c; actions则负责进行异步操作 说…

云南森林火灾vr消防模拟安全演练系统训练消防员火灾和事故的适应和应对能力

据统计,每一场破坏性地震发生后,会引发次生的灾害,而火灾是其中之一。导致火灾的原因,推测是地震时使供电线路短路,引燃易燃物,火灾就随即发生。所以,在日常生活中,定期的消防演练还是非常必要的, VR消防&#xff0c;是VR公司深圳华锐视点利用VR虚拟现实技术&#xff0c;将VR和…

Unity项目如何上传Gitee仓库

前言 最近Unity项目比较多&#xff0c;我都是把Unity项目上传到Gitee中去&#xff0c;GitHub的话我用的少&#xff0c;可能我还是更喜欢Gitee吧&#xff0c;毕竟Gitee仓库用起来更加方便&#xff0c;注意Unity项目上传时最佳的方式是把 Asste ProjectSetting 两个文件夹上传上…

CFC编程入门_【10分钟学会】

什么是CFC&#xff1a; 【差不多10分钟全学会】 CFC是图形化编程&#xff0c; 跟单片机的连线一样&#xff0c; 唯一的区别&#xff1a;功能块右侧是【只能输出】引脚。 只有左侧引脚可以输入输出。 有哪些控件&#xff1a; 指针&#xff1a;用于拖动功能块。 控制点&#xf…