flask后台管理系统快速开发案例之表单验证以及前端模板渲染

前端框架和模型都建好了，现在开始进行业务逻辑的编写了，我们写的这个功能是商品信息的添加，要添加商品信息，就需要有表单提交数据
提交过来的数据我们必然就要进行数据的校验，于是乎，在flask中，我们引入wtf进行表单类的编写，利用表单类进行数据的校验
先贴上表单类的代码：

import os

from flask_wtf import FlaskForm

from wtforms import StringField, SelectField, TextAreaField, IntegerField, FileField, BooleanField, PasswordField, \
    ValidationError, SelectMultipleField
from wtforms.validators import InputRequired

import constants



class ProductForm(FlaskForm):
    name = StringField(label='商品名称',render_kw={
        'class':"form-control",
        'placeholder':'请输入商品名称'
    })
    status = SelectField(label='商品状态',choices=constants.PROD_STATUS_CHOICE, render_kw={
        'class': "form-control",
        'placeholder': '请选择商品状态'
    })

    content = TextAreaField(label='商品内容',render_kw={
        'class':"form-control",
        'placeholder':'请输入商品内容'
    })

    desc = StringField(label='商品内容',render_kw={
        'class':"form-control",
        'placeholder':'请输入商品推荐语'
    })
    types = SelectField(label='商品内容',choices=constants.PROD_TYPE_CHOICE,render_kw={
        'class':"form-control",
        'placeholder':'请选择商品类型'
    })
    price = IntegerField(label='商品价格',render_kw={
        'class':"form-control",
        'placeholder':'请输入商品价格'
    })
    origin = IntegerField(label='商品原价',render_kw={
        'class':"form-control",
        'placeholder':'请输入商品原价'
    })
    img = FileField(label='商品主图',render_kw={
        'class':"form-control",
        'placeholder':'请选择商品主图'
    })
    channel = StringField(label='商品来源',render_kw={
        'class':"form-control",
        'placeholder':'请输入商品来源'
    })
    buy_link = StringField(label='商品购买链接',render_kw={
        'class':"form-control",
        'placeholder':'请输入商品购买链接'
    })
    sku_count = IntegerField(label='商品库存',render_kw={
        'class':"form-control",
        'placeholder':'请输入商品库存'
    })
    remain_count = IntegerField(label='商品剩余库存',render_kw={
        'class':"form-control",
        'placeholder':'请输入商品剩余库存'
    })
    view_count = IntegerField(label='商品浏览次数',render_kw={
        'class':"form-control",
        'placeholder':'请输入商品库存'
    })
    score = IntegerField(label='商品评分',render_kw={
        'class':"form-control",
        'placeholder':'请输入商品评分'
    })
    is_valid = BooleanField(label='商品是否有效',render_kw={
        'class':"checkbox",
        'type': "checkbox",
        'id': "checkbox1",
        'placeholder':'请选择'
    })
    reorder = IntegerField(label='商品排序',render_kw={
        'class':"form-control",
        'placeholder':'请输入商品排序序号'
    })
    classify = SelectMultipleField(label='商品分类',coerce=int, choices='', render_kw={
        'class': "form-control",
        # 'placeholder': '请选择商品分类'
    })
    def validate_name(self,field):
        name = field.data
        print(name )
        if len(name ) > 12:
            raise ValidationError('商品名称长度不能大于12')
        return name 

看起来是不是有点冗余，没事，建议你们也多写写，从基础开始，熟能生巧。

好，现在给大家解释一下，表单类的相关参数
label 类似于label标签，作用也一样，你懂得
default input的默认输入值
validator=[] 这个是定义表单验证的规则
widget 定义页面的显示方式，如文本框还是选择框
description 描述文字 ，类似于django的help_text
render_kw={} 可以添加或者替换标签属性

接下来是表单的常用类型字段
1，文本方向
StringField 字符串输入
PasswordField 密码输入
TextAreaField 长文本输入
HiddenField 隐藏表单域

2，数值类型
FloatField 浮点数输入
IntegerField 整数输入
DecimalField 更精准的小数输入

3，选择类型
RadioField 单选
SelectField 下拉框单选
SelectMultipleField 下拉框多选
BooleanField 勾选

4，日期类型：
DateField 日期选择
DateTimeField 日期时间选择，有时分秒

5，文件上传
FileField 文件单选
MultipleFileField 文件多选

6，其他
SubmitField 提交按钮，这个他都有
FieldList 自定义表单选择列表
FormField 多个字段构成的选项

这是三个用的不多，感兴趣的朋友自行了解
以上纯手打

def validate_name(self,field):
		pass

“”“
这一句表单验证的自定义方法
你可以写在表单类里面
也可以随意写在哪里
放在validators=[validate_name]里面一样可以起到相同效果
”“”

来看一下前端渲染

{% extends 'base/base.html' %}
{% block title %}
    <title>新增商品</title>
{% endblock %}
{% block content %}

    <form action="{{ url_for('mall.prod_add') }}" method="post" enctype="multipart/form-data">
    {{ form.csrf_token }}
      <div class="form-group">
        {{ form.name.label }}
        {{ form.name }}
        <p class="help-block">{{ form.name.description }}</p>
      </div>
      <div class="form-group">
        {{ form.desc.label }}
        {{ form.desc }}
      </div>
      <div class="form-group">
        {{ form.price.label }}
        {{ form.price }}
      </div>
      <div class="form-group">
        {{ form.origin.label }}
        {{ form.origin }}
      </div>
      <div class="form-group">
        {{ form.channel.label }}
        {{ form.channel }}
      </div>
      <div class="form-group">
        {{ form.buy_link.label }}
        {{ form.buy_link }}
      </div>
      <div class="form-group">
        {{ form.sku_count.label }}
        {{ form.sku_count }}
      </div>
      <div class="form-group">
        {{ form.remain_count.label }}
        {{ form.remain_count }}
      </div>
      <div class="form-group">
        {{ form.view_count.label }}
        {{ form.view_count }}
      </div>
      <div class="form-group">
        {{ form.score.label }}
        {{ form.score }}
      </div>
      <div class="form-group">
        <label for="#checkbox1">{{ form.is_valid.label.text }}</label>
        {{ form.is_valid }}
      </div>
      <div class="form-group">
        {{ form.reorder.label }}
        {{ form.reorder }}
      </div>
      <div class="form-group">
        {{ form.status.label }}
        {{ form.status }}
      </div>
      <div class="form-group">
        {{ form.types.label }}
        {{ form.types }}
      </div>
      <div class="form-group">
        {{ form.classify.label }}
        {{ form.classify }}
      </div>
      <div class="form-group">
        {{ form.img.label }}
        {{ form.img }}
      </div>
      <div class="form-group">
        {{ form.content.label }}
        {{ form.content }}
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default">新增商品</button>
    </form>
{% endblock %}

{{ form.classify.label.text }}这个就是提取label的text文本内容

好了，表单方面的内容就写到这里了
接下来就是视图逻辑的编写了，下篇文章见