资讯专栏INFORMATION COLUMN

Flask Web Development —— Web表单(上)

CODING / 1038人阅读

摘要:每个表单域都可以连接到一个或多个是一个用于检查用户提交的输入是否合法的函数。表单域构造函数的第一个参数是一个,在渲染表单到时会使用。验证确保提交的表单域不为空。表单域验证都是直接从包中导入。表格展示了一组支持的标准表单域。

第二章中介绍的request对象公开了所有客户端发送的请求信息。特别是request.form可以访问POST请求提交的表单数据。

尽管Flask的request对象提供的支持足以处理web表单,但依然有许多任务会变得单调且重复。表单的HTML代码生成和验证提交的表单数据就是两个很好的例子。

Flask-WTF扩展使得处理web表单能获得更愉快的体验。该扩展是一个封装了与框架无关的WTForms包的Flask集成。

Flask-WTF和它的依赖集可以通过pip来安装:

(venv) $ pip install flask-wtf
1、跨站请求伪造(CSRF)保护

默认情况下,Flask-WTF保护各种形式对跨站请求伪造(CSRF)攻击。一个CSRF攻击发生在一个恶意网站发送请求给受害者登录的其他网站。

为了实现CSRF保护,Flask-WTF需要应用程序去配置一个加密密钥。Flask-WTF使用这个密钥去生成加密令牌用于验证请求表单数据的真实性。示例4-1展示如何配置加密密钥。

示例4-1. hello.py:Flask-WTF配置

app = Flask(__name__)
app.config["SECRET_KEY"] = "hard to guess string"

app.config字典通常是框架、扩展或应用程序自身存放配置变量的地方,可以使用标准字典语法添加配置值到app.config中。配置对象提供方法来从文件或环境导入配置值。

SECRET_KEY配置变量作为Flask和一些第三方扩展的通用加密密钥。加密的强度取决于这个变量的值。给你构建的每个应用程序选择不同的密钥,并确保这个字符串不被其他任何人知道。

  

注:为了提高安全性,密钥应该存储在一个环境变量中,而不是嵌入到代码中。这个会在第7章中描述。

2、表单类

使用Flask-WTF时,每个web表单是由继承自Form类的子类来展现的。该类在表单中定义了一组表单域,每个都表示为一个对象。每个表单域都可以连接到一个或多个validatorsvalidators是一个用于检查用户提交的输入是否合法的函数。

示例4-2展示了一个拥有文本框和提交按钮的简单web表单。

示例4-2. hello.py:表单类定义

from flask.ext.wtf import Form
from wtforms import StringField, SubmitField 
from wtforms.validators import Required

class NameForm(Form):
    name = StringField("What is your name?", validators=[Required()]) 
    submit = SubmitField("Submit")

表单中的域被定义为类的变量,且每个类的变量都指定一个表单域类型对象。在上一个示例中,NameForm表单有一个name文本框和submit提交按钮。StringField类表示一个type="text"属性的标签。SubmitField类表示一个type="submit"属性的标签。表单域构造函数的第一个参数是一个label,在渲染表单到HTML时会使用。

StringField构造函数包含可选参数validators,它定义了一组检查来验证用户提交的数据。Required()验证确保提交的表单域不为空。

  

注:Flask-WTF扩展定义了表单基类,所以它从flask.ext.wtf导入。表单域、验证都是直接从WTForms包中导入。

表格4-1展示了一组WTForms支持的标准表单域。

表格4-1. WTForms标准HTML表单域

表格4-2展示了一组WTForms内建验证。

表格4-2. WTForms验证

3、HTML渲染的表单

表单域是可调用的,调用时从模板渲染它们到HTML。假设视图函数传递一个参数名为formNameForm实例给模板,模板就会生成一个简单的HTML表单,如下所示:

{{ form.name.label }} {{ form.name() }} {{ form.submit() }}

当然,结果是什么都没有。为了改变表单的外观显示,任何发送给该表单域的参数会被转换为HTML表单域属性;例如,你可以给定表单域idclass属性,然后定义CSS样式:

{{ form.name.label }} {{ form.name(id="my-text-field") }} {{ form.submit() }}

即使有HTML属性,努力用这种方式渲染表单是非常重要的,所以最好是尽可能的使用Bootstrap自带的一系列表单样式。Flask-Bootstrap使用Bootstrap的预定义表单样式来提供高级的帮助函数来渲染整个Flask-WTF表单,这些操作都只需要一个调用即可完成。使用Flask-Bootstrap,上一个表单可以像下面这样来渲染:

{% import "bootstrap/wtf.html" as wtf %}
{{ wtf.quick_form(form) }}

import指令和常规的Python脚本一样的作用并且允许模板元素被导入并在许多模板中使用。被导入的bootstrap/wtf.html文件,定义了帮助函数使用Bootstrap来渲染Flask-WTF表单。wtf.quick_form()函数传入Flask-WTF表单对象并使用默认Bootstrap样式渲染它。示例4-3展示了完整的hello.py模板。

示例4-3. templates/index.html:使用Flask-WTF和Flask-Bootstrap渲染表单

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block title %}Flasky{% endblock %}

{% block page_content %}





{{ wtf.quick_form(form) }}
{% endblock %}

目前模板的内容区有两块。第一块是类为page-header的div输出一个问候语。这里使用了模板条件判断语句。在Jinja2中格式为{% if variable %}...{% else %}...{% endif %}。如果判断条件为True则渲染ifelse之间的内容。如果判断条件为False则渲染elseendif之间的内容。示例模板会渲染字符串“Hello, Stranger!”当name模板参数未定义的时候。第二块内容使用wtf.quick_form()函数渲染NameForm对象。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/37454.html

相关文章

  • Flask Web Development —— Web表单(下)

    摘要:局部变量用于保存从表单中接收到的名字,初始化时变量为。在语句中,这个名字被赋值给局部变量且表单域的数据属性通过赋值为空字符串而被清除。示例重定向和用户会话在上一个版本中,局部变量用于保存用户在表单中输入的姓名。 4、视图函数中的表单操作 在新版本的hello.py中,index()视图函数渲染表单并接收其数据。示例4-4展示更新后的index()视图函数。 示例4-4. hello...

    yeooo 评论0 收藏0
  • Flask Web Development —— 模板(

    摘要:用真实的值替换变量并返回最终响应字符串,这个过程称为渲染。示例展示模板实现该响应。控制结构提供一些控制结构用于改变模板流。这个示例展示如何使用循环做到这些同样支持宏,这和代码中的函数很像。 写代码最关键的是要易于维护且结构清晰整洁。目前为止,你看到的例子都过于简单从而没有做这方面的要求。Flask视图函数希望将两个应该完全独立的任务一并处理,两个任务有两种代码,一并处理势必会引发问题。...

    fizz 评论0 收藏0
  • Flask Web Development —— 模板(下)

    摘要:如果路由重组,模板中的链接将被打断而变得无法访问。静态文件应用程序不仅仅是由代码和模板组成。当服务器收到来自之前示例的,它会产生一个响应包含的文件内容。一个优雅的解决方案是允许服务器只发送时间给浏览器,由浏览器转为当地时间并渲染。 4、链接 任何应用程序都有多个路由,必然需要包含链接来连接不同的页面,例如导航栏。 在模板中,对于简单的路由直接写URLs做链接是非常琐碎麻烦的,而给带...

    raoyi 评论0 收藏0
  • Flask Web Development —— Email

    摘要:函数携带目的地址主题邮件体模板和一组关键字参数。许多扩展操作是在假设有活动的应用程序和请求上下文的情况下进行的。但是当函数在一个不同的线程上执行,应用程序上下文需要人为地创建使用。例如,执行函数可以将邮件发送到的任务队列中。 许多类型的应用程序都会在某些事件发生的时候通知用户,常用的沟通方法就是电子邮件。尽管在Flask应用程序中,可以使用Python标准库中的smtplib包来发送电...

    SKYZACK 评论0 收藏0
  • Flask Web Development —— 基本应用程序结构(下)

    摘要:有两类应用级和请求级。一个响应中非常重要的部分是状态码,默认设置来指示请求已经成功处理。重定向通常由响应状态码注明并且重定向的由头部的给出。因为这些变化,应用程序获得一组基本的命令行选项。运行显示可用信息在应用程序上下文的内部运行一个。 5、请求-响应循环 现在你已经玩过一个基本的Flask应用程序,你也许想要知道更多关于Flask如何施展魔力。下面章节描述了一些框架设计方面的特点。...

    caohaoyu 评论0 收藏0

发表评论

0条评论

CODING

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<