WTF 表单的显示 | 学习笔记

简介: 快速学习 WTF 表单的显示

开发者学堂课程【Python Web 框架 Flask 快速入门WTF  表单的显示】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/603/detail/8793


WTF表单的显示


目录

一、安装  Flask  扩展包

二、使用  WTF  实现表单


一丶安装  Flask  扩展包

from flask import Flask,render_template,requst,flash

from flask_wtf import FlaskForm

from wtforms import StringField,PasswordField,SubmitField

#解决编码问题

import sys

reload(sys)

sys.setdefaultencoding(“utf-8”)

app = Flask(_name_)

app.secret_key = ‘itheima’

目的:实现一个简单的登录逻辑处理

1.路由器需要有  get  和  post  两种请求方式 --> 需要判断请求方式

2.获取请求的参数

3.判断参数是否填写 & 密码是否相同

4.如果判断都没有问题,就返回一个  success

给模板传递消息

flash -->  需要对内容加密,因此需要设置  secret_key  ,做加密消息的混淆

模板中需要遍历消息


二、使用  WTF  实现表单

使用  WTF  实现表单

自定义表单类

class LoginForm(FlaskForm):

username = StringField(u’用户名:’)

password = PasswordField(‘密码:’)

password2 = PasswordField(‘确认密码:’)

submit = SubmitField(‘提交’)

@app.route(‘/form’,methods=[‘GET’,’POST’])

def login():

login_form = LoginForm()

return render_template(‘index.html’,login_form=login_form)

创建网页的代码:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charest=”UTF-8”>

<title>Title</title>

</head>

<body>

<form method=”post”>

<label>用户名:</label><input type=”text” name=”username”><br>

<label>密码:</label><input type=”password” name=”password”><br>

<label>确认密码:</label><input type=”password” name=”password2”><br>

<input type=”submit” value=”提交”><br>

(#使用遍历获取闪现的消息#)

{% for message in get_flashed_messages() %}

{{ message }}

{% endfor %}

</form>

<hr>

<form method=”post”>

{{form.usrname.label }}{{ form.username }}

{{ form.password.label }}{{ form.password }}

{{ form.password2.label }}{{ form.password2 }}

{{ form.submit }}<br>

</form>

</body>

</html>

相关文章
|
4月前
|
前端开发
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
element ui实现多层级复杂表单的操作(添加与回显)之回显功能实现
|
4月前
|
JavaScript 小程序 API
uniapp中的uview组件库丰富的Form 表单用法
uniapp中的uview组件库丰富的Form 表单用法
757 0
|
9月前
|
JSON 安全 数据库
在 Django 中呈现 HTML 表单(GET 和 POST)
在 Django 中呈现 HTML 表单(GET 和 POST)
76 0
|
前端开发 Java
前端——HTML或者JSP页面--执行完某事件后刷新页面,重置表单,清空数据
前端——HTML或者JSP页面--执行完某事件后刷新页面,重置表单,清空数据
Ant Design 中表单内容如何设置,更改,回显功能写法
Ant Design 中表单内容如何设置,更改,回显功能写法
192 0
|
前端开发
react中form表单编辑的时候回显无法回显
react中form表单编辑的时候回显无法回显
83 0
|
XML JavaScript 前端开发
odoo 给form表单视图内联列表添加按钮
odoo 给form表单视图内联列表添加按钮
180 0
|
JavaScript 前端开发
odoo 通过Javascript显示或隐藏form自带按钮
odoo 通过Javascript显示或隐藏form自带按钮
141 0
Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例
Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例
848 0
Element-ui中 表单(Form)校验的几种形式 及 表单嵌套表格含上传(Upload)组件的综合案例
|
存储 SQL 前端开发
Django Blog | 10 自定义Form,美化页面并实现文章编辑功能
Django Blog | 10 自定义Form,美化页面并实现文章编辑功能
417 0
Django Blog | 10 自定义Form,美化页面并实现文章编辑功能