WTForms主要是两个功能:1.生成HTML标签  2.对数据格式进行验证

官网:https://wtforms.readthedocs.io/en/stable/

这篇介绍用wtform生成html标签,前端只需要框架,元素使用wtform自动生成

安装:

使用wtform重新建模和写前端

from flask_wtf import Form
import wtforms class EmployeeForm(Form):
name = wtforms.StringField("姓名")
# gender = wtforms.RadioField("性别", choices=[('男', '男'), ('女', '女')])
gender = wtforms.RadioField("性别", choices=[('男', '男'), ('女', '女')])
job = wtforms.StringField("职位", default='工程师')
birthdate = wtforms.DateField("生日")
idcard = wtforms.StringField("身份证号")
address = wtforms.StringField("地址")
salary = wtforms.DecimalField("工资")
# 如果是固定不变的值可以这样写
# department = wtforms.SelectField("部门", choices=[(1, '财务部'), (2, '技术部'), (3, '市场部')])
department_id = wtforms.SelectField("部门") # 视图层进行查询并把部门信息的值赋给form.department

# 视图层
from datetime import datetime
from flask.views import MethodView
from flask import render_template, redirect, url_for, request from personal.models import db, Employee, Department
from personal.froms import EmployeeForm class EmployeeCreateOrEdit(MethodView):
def get(self, id=None):
form = EmployeeForm()
form.department_id.choices = [(d.id, d.name) for d in Department.query.all()] # 查询出部门信息,方便页面渲染
# form.gender.choices = [('男', '男'), ('女', '女')]
return render_template('admin/emp-edit.html', form=form) def post(self, id=None):
form = EmployeeForm(request.form)
emp = Employee(
None, None, None, None, None, None, None,
datetime.now()
)
form.populate_obj(emp) # form里面的对象,name、gender···赋给emp
db.session.add(emp)
db.session.commit()
return redirect(url_for('admin.emp_list'))

from flask import Blueprint

admin = Blueprint('admin', __name__)  # 声明蓝图

# 把蓝图下的视图导进来注册到蓝图
from admin.views import * admin.add_url_rule('/emp-list/', view_func=EmployeelListView.as_view('emp_list'))
admin.add_url_rule('/emp-del/<int:id>/', view_func=EmployeelDeleteView.as_view('emp_del'))
# admin.add_url_rule('/emp-create/', view_func=EmployeeCreateView.as_view('creat_emp'))
admin.add_url_rule('/emp-create/', view_func=EmployeeCreateOrEdit.as_view('creat_emp'))

页面渲染使用form模型里面定义的内容渲染

{% extends 'admin/base.html' %}

{% block stylesheet%}

{% endblock %}

{% block page_head %}
<!-- page head start-->
<div class="page-head">
<h3 class="m-b-less">人事列表</h3>
<!--<span class="sub-title">Welcome to Static Table</span>-->
<div class="state-information">
<ol class="breadcrumb m-b-less bg-less">
<li><a href="#">首页</a></li>
<li><a href="#">人事管理</a></li>
<li class="active">人事列表</li>
</ol>
</div>
</div>
<!-- page head end-->
{% endblock %} {% block main_content %} <div class="wrapper"> <div class="row">
<div class="col-lg-12">
<section class="panel">
<header class="panel-heading">
新增员工
</header>
<div class="panel-body">
<form class="form-horizontal" method="post" action="#" role="form">
<div class="form-group">
{# <label for="name" class="col-lg-2 col-sm-2 control-label">姓名</label>#}
{{ form.name.label(class_="col-lg-2 col-sm-2 control-label") }}
<div class="col-lg-10">
{# <input type="text" class="form-control" id="name" name="name">#}
{{ form.name(class_="form-control") }}
</div>
</div>
<div class="form-group">
{{ form.department_id.label(class_="col-lg-2 col-sm-2 control-label") }}
<div class="col-lg-3">
{{ form.department_id(class_="form-control m-b-10") }}
</div>
</div>
<div class="form-group">
{{ form.gender.label(class_="col-lg-2 col-sm-2 control-label") }}
<div class="col-lg-10">
{% for gender in form.gender %}
{{ gender }}{{ gender.label }}
{% endfor %}
</div>
</div>
<div class="form-group">
{{ form.job.label(class_="col-lg-2 col-sm-2 control-label") }}
<div class="col-lg-4">
{{ form.job(class_="form-control") }}
</div>
</div>
<div class="form-group">
{{ form.birthdate.label(class_="col-lg-2 col-sm-2 control-label") }}
<div class="col-lg-10">
{{ form.birthdate(class_="form-control") }}
</div>
</div>
<div class="form-group">
{{ form.idcard.label(class_="col-lg-2 col-sm-2 control-label") }}
<div class="col-lg-10">
{{ form.idcard(class_="form-control") }}
</div>
</div>
<div class="form-group">
{{ form.address.label(class_="col-lg-2 col-sm-2 control-label") }}
<div class="col-lg-10">
{{ form.address(class_="form-control") }}
</div>
</div>
<div class="form-group">
{{ form.salary.label(class_="col-lg-2 col-sm-2 control-label") }}
<div class="col-lg-2">
{{ form.salary(class_="form-control") }}
</div>
</div> <div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-primary">提交</button>
<input type="reset" class="btn btn-default" value="重置">
<a href=" {{ url_for('admin.emp_list') }} " class="btn btn-default">返回列表</a>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
{% endblock %} {% block script%} {% endblock %}

页面效果和之前的一模一样

插入数据,成功

测开之路一百四十六:WTForms之表单应用的更多相关文章

  1. 测开之路一百四十九:jinja2模板之宏

    jinja2是python的模板引擎, 在写python web使用的过程中,macro可以节省大量的代码 比如上一篇的渲染页面 <!DOCTYPE html><html lang= ...

  2. 测开之路一百四十八:WTForms表单验证

    使用WTForms表单验证,可以在数据建模时就设置验证信息和错误提示 创建模型时,设置验证内容,如必填.格式.长度 from flask_wtf import Formfrom wtforms imp ...

  3. 测开之路一百四十五:SQLAlchemy与后台模板整合之新增、查询、删除

    实现在页面上点击展示页就展示内容,点击新增页就触发新增功能 项目结构 admin.__init__ from flask import Blueprint admin = Blueprint('adm ...

  4. 测开之路一百四十四:ORM之SQLAlchemy查询

    在上一篇的基础上,插入数据 查询 Department.query.all() # 用表对象查db.session.query(Department).all() # 用db对象查 查询前两条,直接p ...

  5. 测开之路一百四十二:ORM框架之SQLAlchemy建库、建表、数据库操作

    flask-SQLAlchemy是在原生SQLAlchemy的基础之上做了一层封装,安装flask-SQLAlchemy会自动安装SQLAlchemy 安装 传统的sql建表建字段 通过flask-S ...

  6. 测开之路一百二十六:flask之获取request请求数据

    可以根据flask的request对象获取所有的请求信息 path = request.path # 获取请求地址method = request.method # 获取请求方法ip = reques ...

  7. FastAPI 学习之路(十六)Form表单

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  8. 测开之路一百五十五:jquery-validation前台数据验证

    前面做的wtform验证是服务器端的验证,需要把数据传输到服务器,服务器验证后再吧结果传输到前端,网络慢的时候,用户体验不好,所以需要前端验证,且后端验证不能少 传统的js或者jquery如果要验证信 ...

  9. 测开之路一百五十四:ajax+json前后台数据交互

    在实际工作中,前后端数据交互大部分都是用的json格式,后端把数据处理完后,把json传给前端,前端再解析 项目结构 models里面加入把数据转为字典的方法 from datetime import ...

随机推荐

  1. 关于导航自定义视图距离边界问题,点击状态栏TableView不能回滚到顶部问题

    一: 默认Navigation的自定义customView,设置为 Left or Right BarButtonItem 的时候会 与屏幕边界有个15像素的距离. 导致自定义视图的上的子视图响应区域 ...

  2. 【maven】IDEA:存在jar包,pom.xml文件没报错,但是Maven-Project-Dependencies有红线报错

    1.这个问题很简单 把pom.xml里这些出错的jar包的引用先删除,再刷新一次,再添上,就行了 2.大概是idea有点反应迟钝

  3. Delphi 注释

  4. Ubuntu无法安装nginx

    1.问题Reading package lists... DoneBuilding dependency tree       Reading state information... DoneSom ...

  5. 记一次使用dubbo过程中版本冲突导致的坑

    前言:2019年09月23日临下班,产品的一个变更需求临近尾声阶段.本地测试OK,兴致冲冲的想着发布到测试环境,验证一下没有问题,五分钟结束战斗,明天就开始下个需求了.随在CE(公司的devOps系统 ...

  6. javascript的基础知识点

    一:鼠标提示框 需求描述:鼠标移入都input上,div显示,移出,div消失 分析:控制display=block/none 鼠标移入,鼠标移出事件  <input type="bu ...

  7. LOJ-6280-数列分块入门4

    链接: https://loj.ac/problem/6280 题意: 给出一个长为n 的数列,以及 n个操作,操作涉及区间加法,区间求和. 思路: sum维护区间和, tag维护每个区间多加的,不是 ...

  8. python接口自动化四(json数据处理)

    前言 有些post的请求参数是json格式的,这个前面第二篇post请求里面提到过,需要导入json模块处理. 一般常见的接口返回数据也是json格式的,我们在做判断时候,往往只需要提取其中几个关键的 ...

  9. Idea+Spring boot 开启热部署

    热部署是spring boot的一大亮点功能,开发者不必因为改动一点代码就去频繁的关开服务. 1) 在pom文件中加载热部署依赖和插件 2)CTRL + SHIFT + A --> 查找make ...

  10. C# 、Java数组申明、初始化区别

    一.数组申明   int[] a1 int a2[] C# 支持 不支持 Java 支持 支持 二.数组申明且初始化    int[] a1 = new int[] { 2, 31 } int a1[ ...