前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >tornado 结合wtforms使用表单操作

tornado 结合wtforms使用表单操作

作者头像
编程黑洞
发布于 2023-03-06 11:29:07
发布于 2023-03-06 11:29:07
43900
代码可运行
举报
文章被收录于专栏:编程黑洞编程黑洞
运行总次数:0
代码可运行

# 简介

在获取请求时,需要将请求的参数进行验证。 使用wtformstornado的结合,可以获取到请求的参数,并且对参数进行验证。

该项目的github地址: tornado_learning.git (opens new window)

# 例子

创建student的form

代码: apps/shchool/forms.py

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
from wtforms_tornado import Form
from wtforms import StringField, IntegerField, TextAreaField
from wtforms.validators import DataRequired, Length

class StudentForm(Form):
    """
    可以作为student的 post 和 put 的表单使用。
    """

    id = IntegerField("id", null=True)
    name = StringField("姓名", validators=[DataRequired("请输入姓名")])
    age = IntegerField("年龄", validators=[DataRequired("请输入年龄")])
    desc = TextAreaField("个人简介", validators=[DataRequired("请输入个人简介")])

然后通过form接收参数,对参数进行验证,验证通过则操作model,对数据库进行保存操作

通过遍历student_from.errors得到校验失败的字段,然后再返回到前端提示。

代码: apps/school/handler.py

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import tornado

from apps.school.forms import StudentForm
from apps.school.models import Student
from tornado_learning.handler import BaseHandler

class StudentHandler(BaseHandler):

        async def post(self):

        ret_data = {}

        student_form = StudentForm(self.request.arguments)
        if student_form.validate():
            await self.application.objects.create(Student, **student_form.data)

            ret_data["ret"] = "success"
        else:
            for field in student_form.errors:
                ret_data[field] = ret_data.errors[field][0]

        return self.finish(ret_data)

# html表单

还可以通过wtforms创建对应的model模板表单。

个人不是很推荐使用,因为前后端耦合性太强。

获取表单

代码: apps/school/forms.py

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class StudentFormHandler(BaseHandler):

    def get(self):
        studentForm = StudentForm()
        return self.render("student.html", studentForm=studentForm)

表单的html模板 将该文件放在templates路径下

代码: templates/student.html

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<form action="/student" , method="post">
    {% autoescape None %}
    {% for field in studentForm %}
        <span>{{ field.label.text }} :</span>
        {{ field(placeholder="请输入"+field.label.text) }}

        {% if field.errors %}
            {% for error_msg in field.errors %}
                <div class="error-msg">{{ error_msg }}</div>
                {% end %}
                {% else %}
                <div class="error-msg"></div>
            {% end %}
    {% end %}

    <label>
        <span>&nbsp;</span>
        <input type="submit" class="button" value="提交"/>
    </label>
</form>
</body>
</html>

需要在设置项中设置模板路径 代码:tornado_learning/settings.py

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
settings = {
    "template_path": "templates"
}

# wtforms 读取json

使用wtforms_json可以使表单直接对json参数的读取。

初始化wtforms_json

首选需要对wtforms_json初始化。 代码: server.py

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import wtforms_json
wtforms_json.init()

在handler中获取json参数,然后读入到form中

代码: apps/school/handler.py

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class TeacherHandler(BaseHandler):
   
    async def post(self):

        ret_data = {}

        param = self.request.body.decode("utf8")
        param = json.loads(param)

        teacherForm = TeacherForm.from_json(param)
        print(teacherForm.data)
        if teacherForm.validate():
            teacher = await self.application.objects.create(Teacher, **teacherForm.data)

            ret_data["ret"] = "success"
        else:
            for field in teacherForm.errors:
                ret_data[field] = teacherForm.errors[field][0]

        return self.finish(ret_data)
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-08-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue中父组件和子组件交互的方式
vue中使用component来表示组件,通过封装组件,我们可以将代码最大程度的复用,可以说组件是vue中的核心。
程序那些事儿
2023/03/07
5.9K0
vue中父组件和子组件交互的方式
Vue-自定义事件之—— 子组件修改父组件的值
如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你
xing.org1^
2018/05/17
1.3K0
浅学Vue3
NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。2020年3月17日,Github宣布收购npm,GitHub现在已经保证npm将永远免费。
QGS
2024/01/14
3490
0基础菜鸟学前端之Vue.js
  简介:0基础前端菜鸟,啃了将近半月前端VUE框架,对前端知识有了初步的了解。下面总结一下这段时间的学习心得。 文章结构 前端基础 Vue.js简介 Vue.js常用指令 Vue.js组件 Vue
互联网金融打杂
2018/04/03
4.4K0
0基础菜鸟学前端之Vue.js
vue2知识点:组件自定义事件
父组件给子组件传值使用props属性, 那么需要子组件更新父组件时,要使用自定义事件<font color='red'>\$on和\$emit:</font>
刘大猫
2024/10/27
1220
来吧!一文彻底搞定Vue组件!
组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么。
达达前端
2019/12/16
1K0
来吧!一文彻底搞定Vue组件!
vue—你必须知道的
不要在实例属性或者回调函数中(例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数。因为箭头函数会绑定父级上下文,所以 this 不会按照预期指向 Vue 实例,然后 this.myMethod 将是未定义。
超然
2018/08/03
2K0
Vue中父组件以及子组件传值问题
前言:在一些页面中不单单的纯纯的一个vue文件,vue讲究组件化开发,但是一般的肯定会产生交互事件,今天了解了这个传值,特此的来记录一下。
全栈程序员站长
2022/08/18
9260
Vue中父组件以及子组件传值问题
(12)打鸡儿教你Vue.js
使用 $on(eventName)监听事件 使用 $emit(eventName) 触发事件
达达前端
2019/07/03
4150
(12)打鸡儿教你Vue.js
Vue父组件与子组件传递事件/调用事件
如上:通过this.$emit()来触发父组件的方法。具体就是子组件触发$emit绑定的事件watchChild,然后父组件监听watchChild,一旦watchChild被触发便会触发父组件的parentReceive方法。
IT工作者
2022/02/17
3.5K0
vue+elementUI 实现设置还款日字母弹窗组件
还款业务,设置每月还款日,选每月几号扣款,不需要29、30、31,因为不是每个月都有这三天的
GoodTime
2024/03/05
1480
vue+elementUI 实现设置还款日字母弹窗组件
vue-router(element侧导栏,子组件内容切换,不传参)使用的详细步骤
淼学派对
2023/10/14
5670
vue-router(element侧导栏,子组件内容切换,不传参)使用的详细步骤
47·灵魂前端工程师养成-Vue终极进阶属性
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/11/08
4320
47·灵魂前端工程师养成-Vue终极进阶属性
Vue子组件与父组件(看了就会)
<font color="red" size=4>另外,组件创建还有两种创建方式:
程序员海军
2022/02/15
1.1K0
Vue搭建后台系统需要做的几点(持续更新中)
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119328459
马克社区
2022/05/24
2510
从零开始学 Web 之 Vue.js(六)Vue的组件
在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
Daotin
2018/09/30
2.3K0
从零开始学 Web 之 Vue.js(六)Vue的组件
Vue.js——组件快速入门(下篇)
上一篇我们重点介绍了组件的创建、注册和使用,熟练这几个步骤将有助于深入组件的开发。
Vincent-yuan
2020/07/08
10.1K0
Vue.js——组件快速入门(下篇)
vue中$refs、$emit、$on的使用场景
子组件调用父组件的方法并传递数据 注意:子组件标签中的时间也不区分大小写要用“-”隔开
青梅煮码
2023/03/02
4530
Vue 组件实战
在Vue中我们可以使用插值来展示数据,插值的普通函数,只要页面一刷新,函数就会重新运算,不管和函数有关没关的值都会变,函数也会重新计算,导致运行效率降低;
HammerZe
2022/05/09
9090
Vue 组件实战
vue父子组件传值
父组件可以在引用子组件的时候, 通过属性绑定(v-bind:) 的形式, 把需要传递给子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用。
砖业洋__
2023/05/06
5170
vue父子组件传值
相关推荐
vue中父组件和子组件交互的方式
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验