python中Flask Web 表单的使用方法介绍

目录
  • 简介
  • 普通表单提交
  • Flask-WTF基础
  • 使用Flask-WTF处理表单
  • Flask消息闪现
  • 文件上传
  • 文件上传的另一种写法

简介

表单的操作是Web程序开发中最核心的模块之一，绝大多数的动态交互功能都是通过表单的形式实现的。本文会教大家实现简单的表单操作。

普通表单提交

在创建模板login.html页面中直接写form表单。

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="post">
        <input type="text" name="username" placeholder="Username">
        <input type="password" name="password" placeholder="Password">
        <input type="submit" value="提交">
    </form>
    {% if method == 'GET' %}
        请求方式：{{method}}
    {% elif method == 'POST' %}
        请求方式：{{method}}
        用户名：{{ username }}
        密码：{{ password }}
    {% endif %}
    
</body>
</html>

接下来，在视图函数中获取表单数据

login.py

from flask import Flask, render_template, request​
app = Flask(__name__)​
# index 视图函数
@app.route('/login', methods=['GET', 'POST'])
def login():
    context = dict()
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        print(username, password)
        context = {
            'username': username,
            'password': password,
        }
        context.update({'method': request.method})
    else:
        context.update({'method': request.method})
    return render_template('login.html', **context)
@app.route('/')
def index():
    return 'hello'
if __name__ == '__main__':
    app.run(debug=True)

当我们点击提交之后，则会显示：

上面的实现方式是直接采用表单的提交方式。但是有个弊端，假如参数很多的情况下，后台也需要一一进行验证，每次都是先接收参数，再对参数进行校验的话，工作量就会非常的庞大，而且还会出现csrf攻击，这时我们就可以采用Flask-WTF来创建表单，从而避免上述弊端。

Flask-WTF基础

Flask-WTF的主要作用是对用户的请求数据进行验证。我们可以使用pip命令安装该依赖，

pip install flask-wtf

在flask web程序中，因为类FlaskForm由Flask-WTF拓展定义，所以可以从flask.wtf中导入FlaskForm。而字段和函数可以直接从WTForms包中导入，WTForms包中可以支持如下所示的HTML标准字段。

字段 说明
StringField 表示文本字段
TextAreaField 表示多行文本字段
PasswordField 表示密码文本字段
HiddenField 表示隐藏文本字段
DateField 表示日期的文本字段
DateTimeFiled 表示时间的文本字段
IntegerFiled 表示整数类型的文本字段
DecimalField 表示Decimal类型的文本字段
FloatFiled 表示Float类型的文本字段
RadioFiled 表示单选框字段
SelectFiled 表示下拉列表字段

WTForm也包含验证器，它对表单字段进行验证，非常方便。

字段 说明
DataRequire 检查输入的字段是否为空
Email 检查字段是否符合邮件格式的约定
IPAddress 在输入字段中验证IP地址
Length 验证输入字段中的字符串长度是否符合给定长度
NumberRange 验证给定范围内输入字段中的文字
URL 验证是否为合法的URL

使用Flask-WTF处理表单

编写两个视图函数，以及一个form表单类，用于注册以及跳转index页面。

login.py

from flask import Flask, render_template, redirect, url_for, session
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, EqualTo
app = Flask(__name__)
app.config["SECRET_KEY"] = "xhosd6f982yfhowefy29f"​
class RegisterForm(FlaskForm):
    username = StringField(label="用户名", validators=[DataRequired('用户名不能为空')])
    password = PasswordField(label="密码", validators=[DataRequired('密码不能为空')])
    password_comfirm = PasswordField(label="确认密码", validators=[DataRequired('密码不能为空'), EqualTo('password', '两次密码不一致')])
    submit = SubmitField(label='提交')​
@app.route('/register', methods=['GET', 'POST'])
def register():
    form  = RegisterForm()
    if form.validate_on_submit():
        uname = form.username.data
        pwd = form.password.data
        pwd_com = form.password_comfirm.data
        print(uname, pwd, pwd_com)
        session['username'] = uname
        return redirect(url_for('index'))
    return render_template('register.html', form=form)
@app.route('/index')
def index():
    username = session.get('username', '')
    return 'hello %s' % username
if __name__ == '__main__':
    app.run(debug=True)

接下来编写一个html模板文件，用于用户注册使用。

register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="post">
        {{form.csrf_token}}
        {{form.username.label}}
        <p>{{ form.username }}</p>
        {% for msg in form.username.errors %}
            <p>{{ msg }}</p>
        {% endfor %}
​
        {{form.password.label}}
        <p>{{ form.password }}</p>
        {% for msg in form.password.errors %}
            <p>{{ msg }}</p>
        {% endfor %}
​
        {{form.password_comfirm.label}}
        <p>{{ form.password_comfirm }}</p>
        {% for msg in form.password.errors %}
            <p>{{ msg }}</p>
        {% endfor %}
​
        {{ form.submit }}
    </form>
</body>
</html>

Flask消息闪现

在Flask框架中，方法flash()功能是实现消息闪现提示效果。Flask官方对闪现的解释是对用户的请求做出无刷新的响应。类似于Ajax的刷新效果。

举一个简单的例子，当用户通过表单发送完请求之后，假如用户名或者是密码输入错误，那么服务器就会返回错误的提示信息，并在表单页面上显示。

具体代码，如下所示：

login.py

from flask import Flask, flash, redirect, render_template, request, url_for
app = Flask(__name__)
app.secret_key = 'random string'
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/login', methods=['GET', 'POST'])
def login():
    error = None
    if request.method == 'POST':
        if request.form['username'] != 'admin' or request.form['password'] != 'admin':
            flash("用户名或密码错误")
        else:
            flash('登录成功')
            return redirect(url_for('index'))
    return render_template('login.html')
if __name__ == '__main__':
    app.run(debug=True)

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
</head>
<body>
    <form action="" method="post">
        <p>username</p>
        <input type="text" name="username">
        <p>password</p>
        <input type="password" name="password">
        <input type="submit" value="登录">
    </form>
    {% for message in get_flashed_messages() %}
        {% if message %}
            {{message}}
        {% endif %}
    {% endfor %}
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            {% for message in messages %}
                <p>{{ message }}</p>
            {% endfor %}
        {% endif %}
    {% endwith %}
    <h3>welcome</h3>
    <a href="{{url_for('login')}}" rel="external nofollow" >login</a>
</body>
</html>

上面的代码实现了URL的跳转，我们首先会进入首页，首页中包含了进入登录页面的链接。

文件上传

在Flas Web程序中要实现文件的上传非常简单，与传递post和get非常的类似。基本流程如下：

  • （1）将在客户端上传的文件保存到flask.request.files对象。
  • （2）使用flask.request.files对象获取上传上来的文件名和文件对象
  • （3）调用文件对象中的方法save()将文件保存到指定的目录中。

简易的文件上传程序如下所示：

upload.py

from flask import Flask, flash, render_template, request
app = Flask(__name__)
​
@app.route('/upload', methods=['GET', 'POST'])
def upload():
    if request.method == 'GET':
        return render_template('upload.html')
    else:
        file = request.files['file']
        if file:
            file.save(file.name + '.png')
            return '上传成功'
@app.route('/')
def index():
    return render_template('index.html')
if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>文件上传首页</h1>
    <a href="{{url_for('upload')}}" rel="external nofollow" >文件上传</a>
</body>
</html>

upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
​
        <input type="file" name="file">
        <input type="submit" value="点击我上传">
    </form>
</body>
</html>

本程序需要点击跳转之后才能进入文件上传页面，这样写的目的只是因为我比较懒，不想再浏览器中输入一大串的url。

目前上述程序仅仅可以上传图片！

文件上传的另一种写法

在Flask中上传文件的步骤非常简单，首先需要一个HTML表单，将enctype属性设置为"multipart/form-data"即可。URL处理程序会从request.file[]对象中提取文件，并将它保存到所需要的位置上。

每个上传的文件首先会保存到服务器上的临时位置，然后将其保存到最终的实际位置。建议使用secure_filename函数获取。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/uploader" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="提交">
    </form>
</body>
</html>

upload.py

from flask import Flask, render_template, request
from werkzeug.utils import secure_filename
import os
app = Flask(__name__)
app.config['UPLOAD_FLODER']= 'upload/' # 设置文件保存的路径
@app.route('/')
def upload_file():
    return render_template('upload.html')
@app.route('/uploader', methods=['GET', 'POST'])
def uploader():
    if request.method == 'POST':
        f = request.files['file']
        print(request.files)
        f.save(os.path.join(app.config['UPLOAD_FLODER'], secure_filename(f.filename)))
        return '上传成功'
    else:
        render_template('upload.html')
if __name__ == '__main__':
    app.run(debug=True)

到此这篇关于python中Flask Web 表单的使用方法介绍的文章就介绍到这了,更多相关Java Flask 表单内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用Python的Flask框架表单插件Flask-WTF实现Web登录验证

    使用Python的Flask框架表单插件Flask-WTF实现Web登录验证

    表单是让用户与我们的网页应用程序交互的基本元素.Flask 本身并不会帮助我们处理表单,但是 Flask-WTF 扩展让我们在我们的 Flask 应用程序中使用流行的 WTForms 包.这个包使得定义表单和处理提交容易一些. Flask-WTF 我们想要使用 Flask-WTF 做的第一件事情(在安装它以后,GitHub项目页:https://github.com/lepture/flask-wtf )就是在 myapp.forms 包中定义一个表单. # ourapp/forms.py fr

  • Python Flask-web表单使用详解

    Python Flask-web表单使用详解

    Flask-WTF扩展可以把处理web表单的过程变成一种愉悦的体验. 一.跨站请求伪造保护 默认情况下,Flask-WTF能够保护所有表单免受跨站请求伪造的攻击.恶意网站把请求发送到被攻击者已登录的网站时就会引起CSRF攻击. 为了实现CSRF保护,Flask-WTF需要程序设置一个密钥.Flask-WTF使用这个密钥生成加密令牌,再用令牌验证请求中表单数据的真伪.设置密钥的方法如下所示: app = Flask(__name__) app.config['SECRET_KEY']='hard

  • 在Python的Flask中使用WTForms表单框架的基础教程

    在Python的Flask中使用WTForms表单框架的基础教程

    下载和安装 安装 WTForms 最简单的方式是使用 easy_install 和 pip: easy_install WTForms # or pip install WTForms 你可以从 PyPI 手动 下载 WTForms 然后运行 python setup.py install . 如果你是那种喜欢这一切风险的人, 就运行来自 Git 的最新版本, 你能够获取最新变更集的 打包版本, 或者前往 项目主页 克隆代码仓库. 主要概念 Forms 类是 WTForms 的核心容器. 表单(

  • python框架flask表单实现详解

    这篇文章主要介绍了python框架flask表单实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 表单 表单用于注册,修改用户数据等场景. flask-wtf提供了一个包,可以创建表单:pip install flask-wtf 为了防止跨域请求,flask_wtf自己生成一个秘钥,用秘钥生成加密口令,然后用口令验证表单中的数据真伪(是否被篡改过) from flask import Flask from flask import req

  • Python的Flask框架中web表单的教程

    Python的Flask框架中web表单的教程

     概要 在前面章节我们为主页定义了一个简单的模板,部分尚未实现的模块如用户或帖子等使用模拟的对象作为临时占位. 本章我们将看到如何利用web表单填补这些空白. web表单是web应用中最基本的构建要素,我们将通过表单来实现用户发帖和应用登录功能. 完成本章内容你需要基于前面章节完成的微博应用代码,请确认这些代码已安装并能正常运行. 配置 Flask-WTF是WTForms项目的Flask框架扩展,我们将用他来帮助我们处理web表单. 大部分Flask扩展都需要定义相关配置项,所以我们先来在应用根

  • 在Python的Flask框架中构建Web表单的教程

    在Python的Flask框架中构建Web表单的教程

    尽管Flask的request对象提供的支持足以处理web表单,但依然有许多任务会变得单调且重复.表单的HTML代码生成和验证提交的表单数据就是两个很好的例子. Flask-WTF扩展使得处理web表单能获得更愉快的体验.该扩展是一个封装了与框架无关的WTForms包的Flask集成. Flask-WTF和它的依赖集可以通过pip来安装: (venv) $ pip install flask-wtf 1.跨站请求伪造(CSRF)保护 默认情况下,Flask-WTF保护各种形式对跨站请求伪造(CS

  • python中Flask Web 表单的使用方法介绍

    python中Flask Web 表单的使用方法介绍

    目录 简介 普通表单提交 Flask-WTF基础 使用Flask-WTF处理表单 Flask消息闪现 文件上传 文件上传的另一种写法 简介 表单的操作是Web程序开发中最核心的模块之一,绝大多数的动态交互功能都是通过表单的形式实现的.本文会教大家实现简单的表单操作. 普通表单提交 在创建模板login.html页面中直接写form表单. login.html <!DOCTYPE html> <html lang="en"> <head>    <

  • Flask处理Web表单的实现方法

    web表单是web应用程序的基本功能. 它是HTML页面中负责数据采集的部件.表单有三个部分组成:表单标签.表单域.表单按钮.表单允许用户输入数据,负责HTML页面数据采集,通过表单将用户输入的数据提交给服务器. 在Flask中,为了处理web表单,我们一般使用Flask-WTF扩展,它封装了WTForms,并且它有验证表单数据的功能. WTForms支持的HTML标准字段 字段对象 说明 字段对象 说明 StringField 文本字段 TextAreaField 多行文本字段 Passwor

  • Jquery中ajax提交表单几种方法(get、post两种方法)

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的方法.$get方式提交表单get() 方法通过远程HTTP ,下面我来介绍两个提交表单数据的方法. $get方式提交表单 get() 方法通过远程 HTTP GET 请求载入信息 格式 $(selector).get(url,data,success(response,status,xhr),dataType

  • Vue中使用vee-validate表单验证的方法

    Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起.往常使用jquery的validate插件做表单验证方便吧,你也可以在Vue里引入jquery的validate插件(如何引入jquery在我上一篇博文有介绍,点击查看).但是我们是做vue项目也,不到实在解决不了还是建议不要引入,因为Vue自己就有表单验证的插件,那就是vee-validate. 我在这并不是详细讲解vee-validate的使用功能,只是快速了解如何在项目里使用vee-v

  • Spring Boot与Kotlin处理Web表单提交的方法

    我们在做web开发的时候,肯定逃不过表单提交,这篇文章通过Spring Boot使用Kotlin 语言 创建和提交一个表单. 下面我们在之前<Spring Boot 与 Kotlin使用Freemarker模板引擎渲染web视图>项目的基础上,增加处理表单提交. build.gradle 文件没有变化,这里贴一下完整的build.gradle group 'name.quanke.kotlin' version '1.0-SNAPSHOT' buildscript { ext.kotlin_v

  • Python中list列表的一些进阶使用方法介绍

    判断一个 list 是否为空 传统的方式: if len(mylist): # Do something with my list else: # The list is empty 由于一个空 list 本身等同于 False,所以可以直接: if mylist: # Do something with my list else: # The list is empty 遍历 list 的同时获取索引 传统的方式: i = 0 for element in mylist: # Do somet

  • Python中条件选择和循环语句使用方法介绍

    同C语言.Java一样,Python中也存在条件选择和循环语句,其风格和C语言.java的很类似,但是在写法和用法上还是有一些区别.今天就让我们一起来了解一下. 一.条件选择语句 Python中条件选择语句的关键字为:if .elif .else这三个.其基本形式如下: 复制代码 代码如下: if condition: block elif condition: block ... else block 其中elif和else语句块是可选的.对于if和elif只有condition为True时,

随机推荐