Flask框架之表单处理

最新推荐文章于 2024-06-26 14:02:33 发布

Zionnnnnnnn

最新推荐文章于 2024-06-26 14:02:33 发布

阅读量1k

点赞数 1

文章标签： Flask Web表单 Flask-WTF 表单验证 SECRET_KEY

本文链接：https://blog.csdn.net/weixin_43453421/article/details/122339936

版权

Web 表单是 Web 应用程序的基本功能，它是 HTML 页面中负责数据采集的部件。通常情况下，表单有三个部分组成，分别是表单标签、表单域、表单按钮。表单允许用户输入数据，负责HTML 页面数据采集，通过表单将用户输入的数据提交给服务器。实际上，要让模板动态呈现表单数据，可使用 request.form 属性传递数据过来即可。

创建 py文件

# 引入Flask
from flask import Flask, render_template, request

# 创建Flask实例
app = Flask(__name__)
app.debug = True


@app.route('/logintest/')
def login_test():
    return render_template("login_test.html")


@app.route('/handle/', methods=['POST'])
def handle():
    # form 表单信息
    form_results = request.form
    # 显示
    name = form_results.get('name')
    age = form_results.get('age')
    pro = form_results.get('pro')
    description = form_results.get('description')
    # 数据
    results = {
        '姓名': name,
        '年龄': age,
        '程序成绩': pro,
        '自我评价': description,
    }
    return render_template("results.html", results=results)


if __name__ == '__main__':
    # 在测试环境下开启服务
    app.run()

在 templates目录下创建对应的两个html文件:

login_test.html results.html

login_test.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录测试</title>
</head>
<body>
    <h1>表单显示</h1>
    {#  action="handle" 意思是从路由访问这个函数 #}
    {#  注意这个 /handle/ 要跟路由保持一致,斜杠也要对应上否则会出错  #}
    <form method="post" action="/handle/">
        <p>姓名：<input type="text" name="name" ></p>
        <p>年龄：<input type="number" name="age"></p>
        <p>编程成绩：<input type="number" name="pro"></p>
        <p>自我评价：<textarea name="description" ></textarea> </p>
        <p><input type="submit" value="提交"></p>
    </form>
</body>
</html>

results.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示结果</title>
</head>
<body>
    <h1>结果</h1>
    <table border="1">
        {% for key,value in results.items() %}
            <tr>
                <td>{{ key }}</td>
                <td>{{ value }}</td>
            </tr>
        {% endfor %}
    </table>
</body>
</html>

现在查看结果：

提交之后立马跳转

表单扩展

下面通过 Flask-WTF 扩展库、使用 Flask-WTF 实现表单

在 Flask 框架中，为了快速处理 Web 表单，我们一般使用 Flask-WTF 库，它封装了 WTForms ，并且它有验证表单数据的功能。若要使用该库，则需要先进行安装

pip install Flask-WTF==0.14

还需特别注意的是，使用 Flask-WTF 库时，必须要配置参数 SECRET_KEY 属性。当设定好了 SECRET_KEY 后，可用来生成加密令牌，当 CSRF 激活时，该设置会根据设置的密匙生成加密令牌。

*使用 Flask-WTF 实现表单

对于 Flask-WTF 扩展库，可以定义模型，此时需要继承自 Form 基类，需从 flask.ext.wtf 中导入，且字段和验证函数可以直接从 WTForms 包中导入。此处，因 Flask 与 werkzeug 的兼容性问题，因此要安装 werkzeug pip install werkzeug==0.16.0

用一个简单案例来实现表单，功能有输入用户名、输入密码与确认密码，以及提交按钮

新建一个py文件，注意py名不要为flask_wtf，否则会出现库名文件名相同导致执行不成功

# 引入Flask
from flask import Flask, render_template, request, flash
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField, PasswordField
from wtforms.validators import DataRequired, EqualTo

# 创建Flask实例
app = Flask(__name__)
app.debug = True

# 密钥
app.config["SECRET_KEY"] = "123abchello"


class LoginForm(FlaskForm):
    # 用户名
    username = StringField(label=u'用户名', validators=[DataRequired()])
    # 密码
    password = PasswordField(label=u"密码", validators=[DataRequired()])
    # 确认密码
    repwd = PasswordField(label=u'确认密码', validators=[DataRequired(), EqualTo("password", "两次密码输入不一致")])
    # 提交
    submit = SubmitField(label=u"提交")


@app.route("/index/")
def index():
    post_form = LoginForm()
    return render_template("wtf_index.html", form=post_form)


@app.route("/login/", methods=["GET", "POST"])
def login():
    if request.method == "POST":
        post_form = LoginForm()
        if post_form.validate_on_submit():
            name = post_form.username.data
            password = post_form.password.data
            repwd = post_form.repwd.data
            print("姓名:", name)
            print("密码:", password)
            print("确认密码:", repwd)
            flash(f"欢迎{name}")
        else:
            flash("信息有误，请重新输入!")
        return render_template("wtf_hello.html", form=post_form)


if __name__ == '__main__':
    # 在测试环境下开启服务
    app.run()

在 templates目录下创建对应的两个html文件:wtf_index.html wtf_hello.html

wtf_index.html ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wtf_login</title>
</head>
<body>
    <h1>登录表单</h1>
    <form method="post" action="/login/">
        {{ form.csrf_token() }}
        <p><b>{{ form.username.label }}</b>{{ form.username }}</p>
        <p><b>{{ form.password.label }}</b>{{ form.password }}</p>
        <p><b>{{ form.repwd.label }}</b>{{ form.repwd }}</p>
        <p><b>{{ form.submit() }}</b></p>
        {% for msg in get_flashed_messages() %}
            {{ msg }}
        {% endfor %}
    </form>
</body>
</html>

wtf_hello.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好\(@^0^@)/你好</title>
</head>
<body>
    {% for msg in get_flashed_messages() %}
            <h1>{{ msg }}</h1>
    {% endfor %}
</body>
</html>

运行上述程序，在地址栏输入 http://127.0.0.1:5000/index 后，效果如下