Python学习笔记：6.3.9 flask-wtf插件

前言：本文是学习网易微专业的《python全栈工程师 - Flask高级建站》课程的笔记，欢迎学习交流。同时感谢老师们的精彩传授！

一、课程目标

• flask-wtf简介
• 定义表单类
• 表单模版渲染

二、详情解读

2.1.flask-wtf简介

flask-wtf可以让我们在后台定义表单，并且还提供表单数据验证、csrf安全防范等能力，让我们使用表单更加方便。
插件安装：

pipenv installl flask-wtf

flask-wtf需要配置app.secret_key参数（csrf保护）
安装成功后生成flask_wtf，wtforms模块

2.2.表单类FlaskForm

2.2.1.后台创建表单类

from flask_wtf import FlaskForm
# 这里的字段类型是指html表单元素类型
from wtforms import StringField, PasswordField, SubmitField......
class LoginForm(FlaskForm):# 这里的username将会是文本的name属性值username = StringField("username") # 传入的参数是label值password = PasswordField("password")submit = SubmitField("login")

实例化：

form = LoginForm()
render_template(..., form = form)

2.2.2.字段类型与html表单元素对照表

实操：
Step1：在项目目录新建目录forms，并新建文件forms/account_form.py，写以下代码：

# -*- coding=utf-8 -*-
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitFieldclass LoginForm(FlaskForm):username = StringField('用户名')password = PasswordField('密码')submit = SubmitField('立即登录')

Step2：修改app.py中的login()视图函数：

.
.
.
from setttings import config
# 先引入LoginForm
from forms.account_form import LoginForm.
.
.
@app.route('/login', methods=['get', 'post'])
def login():# 实例化LoginFormform = LoginForm()message = Noneif request.method == "POST":username = request.form['username']password = request.form['password']user = User.query.filter_by(username=username).first()if user and user.validate_password(password):session['user'] = user.username# 登录成功返回首页return redirect(url_for("index"))else:message = "用户名与密码不匹配"return render_template("login.html", message = message,form=form  # 将form传递给模版)

2.3.前端模版渲染

2.3.1.前台输出form表单

{{form.username.label}}{{form.username}}
{{form.password.label}}{{form.password}}
{{form.submit}}

输出的时候，可以给表单元素添加属性

{{form.username(class="form-control", id="in1")}}

实操：
修改templates/login.html文件中的表单部分：

.
.
.

<form action="" method="post">						<div class="form-group">{{form.username.label}}{{form.username(class="form-control", id="username", placeholder="请填写您的用户名")}}div><div class="form-group">{{form.password.label}}{{form.password(class="form-control", id="password", placeholder="设置一个密码")}}div><div class="form-group">{{form.submit(class="btn btn-default", id="btn1")}}div>
form>
<form action="" method="post">{% for field in form %}<div class="form-group">{{field.label}}{{field(class="form-control")}}div>{% endfor %}
form>
.
.
.

2.4.渲染关键字render_kw

2.4.1.render_kw

可以在定义表单字段的时候，通过render_kw设定表单字段html属性

username = StringField("username", render_kw={"class": "form-control", "placeholder": "请填写用户名"})

实操：
Step1：修改forms/account_form.py中的LoginForm()：

# -*- coding=utf-8 -*-
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitFieldclass LoginForm(FlaskForm):username = StringField('用户名', render_kw={"class": "form-control", "placeholder": "输入用户名"})password = PasswordField('密码', render_kw={"class": "form-control", "placeholder": "输入密码"})# 这里第一个参数为空，因为登录按钮不用显示label的值submit = SubmitField('', render_kw={"class": "btn btn-default", "value": "立即登录"})

Step2：修改templates/login.html文件中的表单部分：

.
.
.
<form action="" method="post">{% for field in form %}{% if field.widget.input_type != "hidden" %}<div class="form-group">{{field.label}}{{field}}div>{% else %}{{field}}{% endif %}{% endfor %}
form>
.
.
.

2.5.复选框CheckBox

2.5.1.CheckBox

wtforms提供了RadioField，但是没有CheckBoxField，BooleanField并不能提供多选框界面，需要自己创建一个CheckBoxField类

wtforms提供了widgets部件，可以通过widgets来定义自己的字段外观，从数据意义上来讲，radio与select是一样的，checkbox与select多选是一样的，所以只要将多选的select外观变为CheckBox就可以了：

class CheckBoxField(SelectMultipleField):widget = widgets.TableWidget(width_table_tag=False) # ListWidgetoption_widget = widgets.CheckboxInput()

实操：
Step1：修改forms/account_form.py文件：

# -*- coding=utf-8 -*-
# -*- coding=utf-8 -*-
from flask_wtf import FlaskForm
# 新增 SelectMultipleField, widgets, RadioField
from wtforms import StringField, PasswordField, SubmitField, SelectMultipleField, widgets, RadioField# 新增下面这个class
class CheckBoxField(SelectMultipleField):# 这个方式前端是用table显示，with_table_tab=False设置把table去掉widget = widgets.TableWidget(with_table_tag = False) # widget = widgets.ListWidget() # 这种方式前端是用ul li显示option_widget = widgets.CheckboxInput()class LoginForm(FlaskForm):username = StringField('用户名', render_kw={"class": "form-control", "placeholder": "输入用户名"})password = PasswordField('密码', render_kw={"class": "form-control", "placeholder": "输入密码"})# 多选框选项choices = [(1, "一周免登录"), (2, "二周免登录"), (3, "三周免登录")]remember = CheckBoxField('记忆方式', choices=choices)# 单选框选项sex_choices = [(1, '女'), (2, '男')]    sex = RadioField('性别', choices=sex_choices)# 这里第一个参数为空，因为登录按钮不用显示label的值submit = SubmitField('', render_kw={"class": "btn btn-default", "value": "立即登录"})

2.6.整合ckeditor字段

除了直接在前端生成ckeditor外，也可以通过form类方法创建ckeditor，原理与直接使用ckeditor是一样的，只是通过form类输出相应的代码

1.安装插件：

pipenv install flask-ckeditor

安装后生成flask_ckeditor模块。

2.可以在配置文件中加入CKEditor的配置。

3.创建form类的时候，创建对应的ckeditor字段

from flask_ckeditor import CKEditorField
class ArticleForm(FlaskForm):...content = CKEditorField('文章内容')

模版页面中加入：

{{ckeditor.config(name="content")}}

实操：
Step1：修改settings.py文件：

class BaseConfig:SQLALCHEMY_TRACK_MODIFICATIONS = TrueSQLALCHEMY_DATABASE_URI = "sqlite:///my.db"ALLOW_UPLOAD_TYPE = ["image/jpeg", "image/png", "image/gif"]SECRET_KEY = "123456"# 新增下面的配置#CKEDITOR配置CKEDITOR_WIDTH = "\"100%\""CKEDITOR_HEIGHT = "600"CKEDITOR_FILE_UPLOADER = "upload.ckeditor_upload"CKEDITOR_FILE_BROWSER = "upload.ckeditor_browser"
.
.
.

Step2：修改libs.py文件：

# -*- coding=utf-8 -*-
from flask_sqlalchemy import SQLAlchemy
from flask import session, redirect, url_for
from functools import wraps
# 新增下面这两行+++++
from flask_wtf.csrf import CSRFProtect
from flask_ckeditor import CKEditor# 创建数据库对象
# 这里不用传入app实例对象，因为这里尚未创建app实例
db=SQLAlchemy()
#新增下面这两行+++++
csrf = CSRFProtect()
ckeditor = CKEditor()def login_required(func):@wraps(func)def decorator_nest(*args, **kwargs):if not "user" in session:return redirect(url_for("login"))else:print(func)return func(*args, **kwargs)return decorator_nest

Step3：修改app.py文件：

from flask import Flask, render_template
from flask import request, redirect, url_for
# 引入ckeditor
from libs import db, ckeditor
.
.
.
db.init_app(app)
# 新增下面这一行
ckeditor.init_app(app)
.
.
.

Step4：替换forms/account_form.py文件为以下代码：

# -*- coding=utf-8 -*-
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, SelectMultipleField, \widgets, RadioField, TextAreaField,SelectFieldclass CheckBoxField(SelectMultipleField):widget = widgets.TableWidget(with_table_tag = False)# widget = widgets.ListWidget()option_widget = widgets.CheckboxInput()class LoginForm(FlaskForm):username = StringField('用户名', render_kw={"class": "form-control", "placeholder": "输入用户名"})password = PasswordField('密码', render_kw={"class": "form-control", "placeholder": "输入密码"})# 多选框选项choices = [(1, "一周免登录"), (2, "二周免登录"), (3, "三周免登录")]remember = CheckBoxField('记忆方式', choices=choices)sex_choices = [(1, '女'), (2, '男')]sex = RadioField('性别', choices=sex_choices)# 这里第一个参数为空，因为登录按钮不用显示label的值submit = SubmitField('', render_kw={"class": "btn btn-default", "value": "立即登录"})# 注册表单
class RegisterForm(FlaskForm):name = StringField('真实姓名', render_kw={"class": "form-control"})username = StringField('用户名', render_kw={"class": "form-control"})password = PasswordField('密码', render_kw={"class": "form-control"})confirmpassword = PasswordField('确认密码', render_kw={'class': 'form-control'})sex = RadioField('选择性别', choices=[(1, '男'), (0, '女')])like = CheckBoxField('选择爱好',choices=[(1, '钓鱼'), (2, '游泳'), (3, '看书'), (4, '旅游')],render_kw={"class": "checkbox-inline"})city = SelectField('选择城市', choices=[('010', '北京'),('021', '上海'),('0512', '苏州'),])intro = TextAreaField('简介')submit = SubmitField('', render_kw={"class": "form-control", "value": "立即注册"})

Step5：修改templates/user/register.html文件：

.
.
.{%  endblock %}{% block footer %}{{ super() }}<script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}">script>{{ ckeditor.config(name="intro")}}{% endblock %}body>
html>

三、课程小结

• flask-wtf
  使用flask-wtf来创建form表单，通过flask-wtf可以更方便的在html页面中生成一个表单，从模版中可以看到 ，省去了很多前端代码。
• 自定义checkbox
flask-wtf中并没有我们需要的多选框，因此需要自定义checkbox
• 整合ckeditor。
  通过flask-ckeditor将ckeditor整合到flask-wtf里面。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！