文档章节

Flask 表单学习

AllenOR灵感
 AllenOR灵感
发布于 2017/09/10 01:19
字数 1385
阅读 1
收藏 0

1. 表单介绍

什么是表单?

表单是 HTML 页面中负责 数据采集 功能的部件。它往往由三个部分组成,即表单标签、表单域、表单按钮。我们可以通过表单,将用户输入的数据提交给服务端,并交由服务端进行处理。

表单标签
  • 用于声明表单的范围,位于表单标签中的元素将被提交
  • 语法:<form>...</form>
  • 属性:Method, Enctype, action ......
表单域
  • 表单域包含了文本框,密码框等多种类型
  • 语法:<input ...... />
  • 属性:type, name, value ......
表单按钮
  • 文本框 <... type = "text">
  • 密码框 <... type = "password">
  • 文本区域 <... type = "textarea">
  • 文件上传框 <... type = "file">
  • 单选框 <... type = "radio">
  • 复选框 <... type = "checkbox">

2. 表单的提交方式

1. GET 方式

GET 方式通过 URL 提交数据,数据在 URL 中可以看到。GET 方式的适用场合为:

  • 单纯的数据请求,不进行其他操作
  • 表单数据较短,不超过 1024 个字符
  • 对安全性要求一般的场合

2. POST 方式

POST 方式,数据放置在 HTML header 中提交。POST 方式的适用场合为:

  • 数据不仅仅用于请求,还需要将数据插入数据库内
  • 表单数据过长时,比如是一篇博客内容
  • 要传送的数据不是 ASCII 编码

实战

我们首先创建以下文件目录:

192:test ming$ tree 
.
├── app.py
├── static
└── templates
    └── index.html

2 directories, 2 files

之后,我们首先来编写 index.html 中的表单代码,如下:

<!DOCTYPE html>
<html>
<head>
    <title> flask form </title>
</head>
<body>
    <div align="center">
    <h1> User Management </h1>
    <form method="post">
        <input type="text" name="username" placeholder="username" /> <br />
        <input type="password" name="password" placeholder="password" /> <br />
        <input type="submit" value="Submit" />
        <input type="reset" value="reset" />
    </form>
    </div>
</body>
</html>

然后,编写 app.py 中的代码,如下:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from flask import Flask 
from flask import request, render_template, redirect

app = Flask(__name__)

@app.route('/user', methods = ['GET', 'POST'])
def hello_world():
    if request.method == 'POST':
        # request.form 表示我们获取表单中的数据
        username = request.form['username']
        password = request.form['password']
        if username == 'admin' and password == 'admin':
            return redirect("http://www.jianshu.com/notebooks/6873024/latest")
        else:
            return render_template('index.html')
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

然后我们利用 python app.py 运行程序,得到如下界面:


之后,我们还可以向 index.html 中发送参数,具体可以看这个博客。接下来,我们修改 app.py 程序来向 index.html 文件发送参数,如下代码加入 message 参数:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from flask import Flask 
from flask import request, render_template, redirect

app = Flask(__name__)

@app.route('/user', methods = ['GET', 'POST'])
def hello_world():
    if request.method == 'POST':
        # request.form 表示我们获取表单中的数据
        username = request.form['username']
        password = request.form['password']
        if username == 'admin' and password == 'admin':
            return redirect("http://www.jianshu.com/notebooks/6873024/latest")
        else:
            message = "Login Failed"
            return render_template('index.html', message = message)
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

修改 index.html 文件如下:

<!DOCTYPE html>
<html>
<head>
    <title> flask form </title>
</head>
<body>
    <div align="center">
    <h1> User Management </h1>
    {% if message %}
        {{message}}
    {% endif %}
    <form method="post">
        <input type="text" name="username" placeholder="username" /> <br />
        <input type="password" name="password" placeholder="password" /> <br />
        <input type="submit" value="Submit" />
        <input type="reset" value="reset" />
    </form>
    </div>
</body>
</html>

运行以上代码之后,我们点击 Submit 按钮之后,就会显示 message 传递的 Login Failed 参数,运行界面如下:


以上方法基本就能实现表单和 flask 框架之间的信息传递,但是当需要传递的信息很多时,上面这种方法就会显得非常臃肿和麻烦。那么,我们就可以利用 flask 的扩展来简化我们的代码。首先我们需要在终端中安装这个扩展,可以利用以下命令来安装:

sudo pip install Flask-wtf

之后,我们可以利用这个扩展在表单中构建用户名和密码的输入框。首先我们需要引入表单类、文本框、密码框和验证器,如下:

# 引入表单类
from wtforms import Form
# 引入文本框
from wtforms import TextField
# 引入密码框
from wtforms import PasswordField
# 引入验证器,验证表单内容是否正确
from wtforms import validators

之后,修改 app.py 中的代码,如下:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from flask import Flask 
from flask import request, render_template, redirect

app = Flask(__name__)

# 引入表单类
from wtforms import Form
# 引入文本框
from wtforms import TextField
# 引入密码框
from wtforms import PasswordField
# 引入验证器,验证表单内容是否正确
from wtforms import validators

class LoginForm(Form):
    # 表名 username 是一个必须填入的对象,用验证器来进行验证
    username = TextField("username", [validators.Required()])
    password = PasswordField("password", [validators.Required()])

@app.route('/user', methods = ['GET', 'POST'])
def hello_world():

    myForm = LoginForm(request.form)
    return render_template('index.html', form = myForm, message = False)

if __name__ == '__main__':
    app.run()

之后,我们修改 index.html 中的代码,如下:

<!DOCTYPE html>
<html>
<head>
    <title> flask form </title>
</head>
<body>
    <div align="center">
    <h1> User Management </h1>
    {% if message %}
        {{message}}
    {% endif %}
    <form method="post">
        Username: {{form.username}} <br />
        Password: {{form.password}} <br />
        <input type="submit" value="Submit" />
        <input type="reset" value="reset" />
    </form>
    </div>
</body>
</html>

然后,我们运行一下代码,可以得到和上面一样的界面,运行界面如下:


之后,我们向 app.py 中加入验证表单的代码,具体如下:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from flask import Flask 
from flask import request, render_template, redirect

app = Flask(__name__)

# 引入表单类
from wtforms import Form
# 引入文本框
from wtforms import TextField
# 引入密码框
from wtforms import PasswordField
# 引入验证器,验证表单内容是否正确
from wtforms import validators

class LoginForm(Form):
    # 表名 username 是一个必须填入的对象,用验证器来进行验证
    username = TextField("username", [validators.Required()])
    password = PasswordField("password", [validators.Required()])

@app.route('/user', methods = ['GET', 'POST'])
def hello_world():

    myForm = LoginForm(request.form)
    if request.method == 'POST':
        # myForm.validators() 判断表单里面的值是否有效
        if myForm.username.data == 'admin' and myForm.password.data == 'admin' and myForm.validators():
            return redirect('http://www.jianshu.com/notebooks/6873024/latest')
        else:
            message = "Login Failed"
            return render_template('index.html', form = myForm, message = message)
    return render_template('index.html', form = myForm, message = False)

if __name__ == '__main__':
    app.run()

至此,你应该已经学会了,如何使得flask 和表单之间的链接吧。

本文转载自:http://www.jianshu.com/p/dac0dad56c34

共有 人打赏支持
AllenOR灵感
粉丝 10
博文 2634
码字总数 82983
作品 0
程序员
python学习-flask-模版/表单

2.1初始化 所有 Flask 程序都必须创建一个程序实例。Web 服务器使用一种名为 Web 服务器网关接口 (Web Server Gateway Interface,WSGI)的协议,把接收自客户端的所有请求都转交给这个对象处...

时间之友
01/03
0
0
(旧)3- Flask构建弹幕微电影网站- 课程介绍

Flask 构建微电影视频网站 已上线演示地址: http://movie.mtianyan.cn 项目源码地址:https://github.com/mtianyan/movieproject 持续更新教程与代码commit。欢迎大家一起学习,star。 介绍微...

天涯明月笙
02/11
0
0
Flask-WTF 之防止CSRF***学习记录

CSRF 保护 这部分文档介绍了 CSRF 保护。 为什么需要 CSRF? Flask-WTF 表单保护你免受 CSRF 威胁,你不需要有任何担心。尽管如此,如果你有不包含表单的视图,那么它们仍需要保护。 例如,由...

MK先生
06/26
0
0
(三)Flask 学习 —— web 表单

web 表单 回顾 在上一章节中,我们定义了一个简单的模板,使用占位符来虚拟了暂未实现的部分,比如用户以及文章等。 在本章我们将要讲述应用程序的特性之一–表单,我们将会详细讨论如何使用...

水果糖
2016/02/25
1K
0
《Flask Web开发:基于Python的Web应用开发实战》.PDF

简介 本书不仅适合初级Web开发人员学习阅读,更是Python程序员用来学习高级Web开发技术的优秀参考书。 • 学习Flask应用的基本结构,编写示例应用; • 使用必备的组件,包括模板、数据库、W...

jackmk
2017/08/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里P8架构师深度概述分布式架构

简介 作为一名架构师,我们要专业,要能看懂代码,及时光着臂膀去机房,也能独挡一面!及时同事搞不定问题,或者撂挑子,你也能给老大一个坚定的眼神:不怕,有我在!还能在会议室上滔滔不绝...

java知识分子
8分钟前
0
0
zabbix利用自带的模板监控mysql数据库

zabbix利用自带的模板监控mysql数据库                                     作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任。 有些东...

linjin200
14分钟前
0
0
当刷新的Sandbox后,需要重新发布社区

当刷新的Sandbox后,需要重新发布社区 然后在登录页面设置中选择login/forgot password

在山的那边
15分钟前
0
0
Ubuntu 镜像文件下载

https://www.ubuntu.com/download/desktop

15834278076
19分钟前
0
0
解决php -v查看到版本于phpinfo()打印的版本不一致问题

一般造成这种原因可能是升级或多版本 用php -v 和phpinfo()查出来版本不一致,怎么解决呢 编辑/etc/profile文件在最后一行添加一个环境变量: export PATH="/usr/local/php/bin:$PATH" 最后保...

xiaogg
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部