flask-wtf的使用

---

一、安装flask-wtf

flask-wtf 对 wtforms 进行了封装使它能够在 flask 框架中可以被调用，其中 flask-wtf 的功能都是继承自 wtforms ，因此安装 flask-wtf 时会自动安装 wtforms 模块。

• 使用 pip 进程安装

pip install flask-wtf

• 查看安装结果

二、创建表单类

表单类可以继承自flask-wtf封装的flaskform类，可以从wtforms导入表单字段的类型，如下表单类的创建：

# -*- coding: utf-8 -*-
from flask_wtf import flaskform
from wtforms import stringfield, radiofield, datefield, decimalfield, selectfield

class employeeform(flaskform):
    name = stringfield('姓名')
    gender = radiofield('性别', default='男')
    job = stringfield('职位')
    birthdate = datefield('出生日期')
    idcard = stringfield('身份证号')
    address = stringfield('地址')
    salary = decimalfield('工资')
    department = selectfield('部门')

三、创建视图方法

根据创建好的表单类，我们就可以创建我们的视图函数，来处理和呈现我们的代码逻辑：

# -*- coding: utf-8 -*-
from flask import render_template
from flask.views import methodview
from pms.forms import employeeform

class employeeeditorcreateview(methodview):
    def get(self, id=none):
        form = employeeform()
        return render_template('admin/emp-create-or-edit.html', form=form)

    def post(self, id=none):
        pass

# 添加视图函数规则，并添加视图函数的endpoint
employee.add_url_rule('/create_or_edit/<id>', view_func=employeeeditorcreateview.as_view('emp_create_or_edit'))

四、前台页面展示

在前台页面我们就可以使用我们传递的表单类进行form表单控件的替换了：

<form class="form-horizontal" role="form" method="post" action="{{ url_for('admin.emp_add') }}">
  {# 姓名 #}
  <div class="form-group">
    {# <label for="name" class="col-lg-2 col-sm-2 control-label">姓名</label>#}
    {# 使用flask-wtf表单控件之后，label标签也可以省略#}
    {{ form.name.label(class="col-lg-2 col-sm-2 control-label") }}
    <div class="col-lg-6">
      {# <input type="text" class="form-control" id="name" name="name">#}
      {# 如果你希望某些控件的属性也添加进来，可以直接在name中加入，方式如下：#}
      {{ form.name(class="form-control") }}
    </div>
  </div>
</form>

展示效果：

五、补充

flask-wtf 默认为每个表单启用了 csrf 保护，它会为我们自动生成 csrf 令牌。在flask-wtf 中默认情况会使用程序密钥对 csrf 令牌进行签名，所以我们需要为程序设置密钥：

app.secret_key = 'henjsa3ij7hff9kg'