Flask 入门

您所在的位置：网站首页 › flash密码框 › Flask 入门

Flask 入门

2023-11-18 06:32| 来源: 网络整理| 查看: 265

前言

在web程序中，form表单应用广泛，比如用户登录，像QQ登录这种的实现。本文采用Flask实现简单的Form表单提交的demo。

最终效果:

image.png 测试环境 Ubuntu20.04/win11 Flask VSCode Flask Form表单实现一般的Form表单实现

一般在HTML中， form表单采用标签进行定义，在form标签中加入标签：

Username Password Flask中Form表单的实现

在Flask中，一般不采用上面那种方式，Flask提供了一些扩展 Flask-WTF 和 wtforms, Flask中一般对Form表单的操作采用Flask-WTF实现。

pip install flask-wtf

wtforms 提供了Form表单常用的控件:

fields: StringField, PasswordField, BooleanField, SubmitField, 用于生成标签 validators: 验证器，验证输入是否合法 "DataRequired", "data_required", "Email", "email", "EqualTo", "equal_to", "IPAddress", "ip_address", "InputRequired", "input_required", "Length", "length", "NumberRange", "number_range", "Optional", "optional", "Regexp", "regexp", "URL", "url", "AnyOf", "any_of", "NoneOf", "none_of", "MacAddress", "mac_address", "UUID", "ValidationError", "StopValidation",

flask-wtf扩展包提供了一个类: FlaskForm, 一般自定义的Form都要继承这个FlaskForm。注意: 由于浏览器具有cookies功能，为了Form表单提交的安全性考虑， Form表单提交的时候需要指定CSRF令牌，需要在Flask中设置 SECRET_KEY：

app.config['SECRET_KEY'] = 'hello-flask' # RuntimeError: A secret key is required to use CSRF.

SECRET_KEY的值是随机的字符串。

Flask Form表单的具体应用步骤: Step1: 自定义Form类，继承FlaskForm class LoginForm(FlaskForm): username = StringField(label='Username', validators=[DataRequired(), Length(1, 30)]) password = PasswordField(label='Password', validators=[DataRequired(), Length(4, 10)]) remember = BooleanField(label='Remember me') submit = SubmitField(label='Login') Step2: 配置视图函数，实例化form对象, 并且将form对象传递给render_template()函数一般Form表单提交采用POST请求，因此需要在路由里面设置 methods='POST' @app.route('/', methods=['GET', 'POST']) def index(): form = LoginForm() if form.validate_on_submit(): global username global pwd username = form.username.data pwd = form.password.data # 重定向为GET请求 return redirect((url_for('success'))) return render_template('index.html', form=form) Step3: 在HTML中渲染Form，生成Form标签。为了美观以及易用性考虑，Form表单的渲染使用 bootstrap-flask进行渲染。 bootstrap: Twitter公司开源的前端框架，提供了bootstrap.css和bootstrap.mini.css，包含了常用的css样式，在开发的时候不用过多考虑样式问题。 bootstrap-flask: Flask的一个python扩展，就是对bootstrap进行了封装，在HTML中的用法和bootstrap用法相同。

pip install bootstrap-flask

bootstrap-flask的使用过程: 加载bootstrap的CSS文件(这里直接采用CDN加载，也可以下载到本地进行加载) ---> 使用Jinja2语法导入render_form()宏函数 ---> 使用render_form()渲染传入的form对象。

{{ bootstrap.load_css() }} {% from 'bootstrap/form.html' import render_form %} {{ render_form(form=form, form_type="basic") }} {{ bootstrap.load_js() }}

关于render_form()宏函数:

{# valid form types are "basic", "inline" and "horizontal" #} {% macro render_form(form, action="", method="post", extra_classes=None, role="form", form_type="basic", horizontal_columns=('lg', 2, 10), enctype=None, button_map={}, button_style="", button_size="", id="", novalidate=False, render_kw={}) %} 测试工程目录结构

文件目录结构非常简单，没有包含CSS/JS文件，只有HTML模板。

image.png 代码实现 app.py from flask import Flask, render_template, url_for, redirect, flash from flask_bootstrap import Bootstrap from wtforms import StringField, PasswordField, BooleanField, SubmitField from flask_wtf import FlaskForm from wtforms.validators import DataRequired, Length # https://bootstrap-flask.readthedocs.io/en/latest/ class LoginForm(FlaskForm): username = StringField(label='Username', validators=[DataRequired(), Length(1, 30)]) password = PasswordField(label='Password', validators=[DataRequired(), Length(4, 10)]) remember = BooleanField(label='Remember me') submit = SubmitField(label='Login') app = Flask(__name__) app.config['SECRET_KEY'] = 'hello-flask' # RuntimeError: A secret key is required to use CSRF. bootstrap = Bootstrap(app=app) # 初始化bootstrap username = None pwd = None @app.route('/login_success') def success(): flash(message=username) flash(message=pwd) return render_template('success.html') @app.route('/', methods=['GET', 'POST']) def index(): form = LoginForm() if form.validate_on_submit(): global username global pwd username = form.username.data pwd = form.password.data # 重定向为GET请求 return redirect((url_for('success'))) return render_template('index.html', form=form) app.run() index.html flask_form {{ bootstrap.load_css() }} {% from 'bootstrap/form.html' import render_form %} {{ render_form(form=form, form_type="basic") }} {{ bootstrap.load_js() }} success.html flask_form {{ bootstrap.load_css() }} {% for message in get_flashed_messages() %} {{ message }} {% endfor %} {{ bootstrap.load_js() }}

运行结果:

image.png image.png

观察bootstrap-flask生成的HTML, 打开浏览器调试窗口，可以看到HTML代码:

flask_form Username Password Remember me

bootstrap-flask 的 render_form()宏函数在渲染form表单时候自动会添加 CSRF令牌：

当采用默认CDN时候bootstrap-flask 会自动加载 jquery.js, popper.js, bootstrap.min.js 这3个JavaScript

【本文地址】

Flask 入门

Flask 入门

今日新闻

推荐新闻