Flask-WTF框架入门指南

Flask-WTF是一个功能丰富的Python框架,它简单易用,即使是初学者也能轻松上手Web开发项目。虽然它是一个微型框架,但它提供了开发API或Web项目所需的一切。Flask-WTF的一个特别有用的功能是WTForms,它以一种有趣的方式管理表单。

WTForms代表WT Forms,它帮助提供交互式的用户界面。Flask和Django都严重依赖这个Python库WT Forms。本文将更详细地讨论这一点,并结合示例和代码来理解这个概念。让开始吧。

为什么使用Flask-WTF?

Web应用程序只有在拥有美观且方便的用户界面时才显得有趣。在HTML中,使用表单标签来设计界面。它提供了各种输入类型,如文本、文本区域、整数、单选按钮、选择框等。但是HTML表单的一个主要问题是动态渲染表单元素很困难,HTML也没有提供验证用户输入的方法。

这就是WTForms发挥作用的地方。这些是具有验证和渲染功能的灵活表单库。使用WTForms,可以在Python脚本中定义表单字段,然后使用HTML模板渲染它们。

除了这些酷炫的功能外,WTForms还提供了以下功能,这也是使用这个模块非常有帮助的原因。

  • 提供带有CSRF令牌的安全表单。
  • 与WTForms集成。
  • 提供与Flask Uploads兼容的文件上传功能。

安装Flask-WTF

要使用WT Forms,使用pip安装器通过以下命令安装:

$ pip install flask-wtf

从这个模块中,可以导入Form类,使用它来执行所有表单操作。一些标准表单字段包括:

  • TextField:用于表示HTML表单元素的文本字段。
  • BooleanField:用于表示复选框。
  • IntegerField:表示显示整数值的文本字段。
  • TextAreaField:表示文本区域表单元素。
  • PasswordField:用于从用户那里获取密码作为表单输入。
  • SubmitField:它代表HTML的提交按钮。它基本上替换了HTML的这段代码。

如何使用WTForms?

现在,已经安装了flask-wtf模块,并且也了解了它。所以,如果想使用wtforms生成表单,只需要遵循这些简单的步骤:

  1. 导入所需的表单模块和表单字段,如TextAreaField、IntegerField等。
  2. 下一步是创建表单模型。
  3. 显示HTML表单并通过表单提交的数据进行验证(如果需要)。

WTForms示例

现在,不多说,通过一个示例深入了解。将制作一个简单的注册表单。它还将包含一些Bootstrap来使其更美观。整个项目将涉及4个文件。

此文件将包含使用flask-wtf模块制作表单的代码。然后,将在HTML代码中使用此文件的Form类。

from flask_wtf import FlaskForm from wtforms import validators, ValidationError from wtforms import TextField, IntegerField, TextAreaField, SubmitField, RadioField, SelectField class SignUpForm(FlaskForm): name = TextField("Candidate Name ",[validators.DataRequired("Please enter your name.")]) Address = TextAreaField("Address") email = TextField("Email") skill = SelectField('Your Skill', choices = [('excel', 'Excel'),('py', 'Python'),('draw','Draw')]) submit = SubmitField("Submit")

保存此代码为forms.py。这段代码的前三行是导入需要的模块。表单将需要文本字段、输入字段等。可以直接从‘wtforms’导入这些字段。接下来,制作一个“SignUpForm”类来定义各种表单字段。‘name’变量指向‘Candidate Name’文本字段。‘Address’变量指向TextField ‘Email’。‘skill’变量包含一个下拉菜单,SelectField用于各种技能,submit变量是使用SubmitField的‘Submit’按钮。将为每个表单创建一个Python类,以保持简单。

这是将创建的Flask应用程序,用于渲染HTML页面并创建简单的API端点。

from flask import Flask, render_template, request, flash from forms import SignUpForm app = Flask(__name__) app.secret_key = 'development key' @app.route('/') def home(): return "Home page" @app.route('/signup', methods=['GET', 'POST']) def signup(): form = SignUpForm() return render_template('contact.html', form=form) @app.route('/success', methods=['GET', 'POST']) def success(): form = SignUpForm() if request.method=="POST": print("Candidate Name:",form.name.data) print("Address:",form.Address.data) print("Email:",form.email.data) print("Skills:",form.skill.data) return render_template("success.html") if __name__ == '__main__': app.run(debug=True)

保存此代码为app.py。在signup函数中,从forms.py导入SignUpForm类。在渲染contact.html页面时将此表单作为参数传递给render_template函数。

Flask-WTF默认防止所有表单遭受CSRF攻击。这是通过在隐藏元素()中嵌入一个令牌来实现的。这个令牌用于检查请求的真实性。因此,在Flask-WTF可以生成CSRF令牌之前,需要添加一个密钥。就像上面的代码中这样做:

app.secret_key = ‘development key’

引号中的字符串可以是任何内容。可以写任何随机字符,但不应该容易被猜到。

在这个HTML文件中,将使用wtf_form的表单类制作一个注册表单HTML页面。HTML的表单标签需要两件事,一个是action,另一个是method。这里,action是“http://localhost:5000/success”,method = “POST”。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sign Up Form</title> </head> <body> <h2>Sign Up Form</h2> <form action="http://localhost:5000/success" method="POST"> {{ form.name.label }} {{ form.name(class="form-control") }} {{ form.Address.label }} {{ form.Address(class="form-control") }} {{ form.email.label }} {{ form.email(class="form-control") }} {{ form.skill.label}} {{ form.skill(class="form-control") }} {{ form.submit(class="btn btn-primary") }} </form> </body> </html>

在div class container中,使用jinja模板来放置表单中的值。

要从类表单中获取字段的标签:{{ form.name.label }}。

要从类SignUpForm中获取字段的值:{{ form.Address }}。

如果想应用Bootstrap样式,可以这样做:{{ form.Address(class="form-control")}}。

同样,也适用于电子邮件字段、技能字段和提交按钮。

数据提交成功!

这是提交表单后路由到的HTML文件,用于显示数据成功提交的消息。

运行代码:python app.py。首先访问URL:http://localhost:5000/signup。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485