flask实现一个登录界面
基础的Flask项目结构
forms.py
:定义登录表单和表单字段的文件。templates/login.html
:用于渲染登录表单的 HTML 模板文件。routes.py
:定义应用的路由和视图函数的文件。__init__.py
:创建并初始化 Flask 应用的文件。run.py
:启动应用的文件。
/myproject
/myproject
__init__.py
routes.py
forms.py
/templates
login.html
/static
run.py
安装 Flask 和 Flask-WTF (一个用于处理表单的 Flask 扩展):
pip install flask flask-wtf
创建表单的定义 (forms.py
):
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired
class LoginForm(FlaskForm):
username = StringField('Username', validators=[DataRequired()])
password = PasswordField('Password', validators=[DataRequired()])
submit = SubmitField('Login')
这个文件中,我们定义了一个名为 LoginForm 的类,它代表登录表单。这个表单有两个字段:username 和 password,这两个字段都使用了 DataRequired 验证器,意味着这两个字段是必填的。在表单的最后,我们还定义了一个 submit 字段,它是一个提交按钮。
创建一个 HTML 模板来渲染表单 (templates/login.html
):
<html>
<body>
<form method="POST">
{{ form.hidden_tag() }}
<p>
{{ form.username.label }}<br>
{{ form.username(size=32) }}
</p>
<p>
{{ form.password.label }}<br>
{{ form.password(size=32) }}
</p>
<p>{{ form.submit() }}</p>
</form>
</body>
</html>
这个 HTML 文件定义了一个表单,它使用 POST 方法提交。这个表单的每个字段都来自 LoginForm 类。我们使用了 Flask-WTF 提供的特殊语法 {{ form.field_name }}
来渲染这些字段。使用这种方式,Flask-WTF 会自动处理字段的渲染,包括字段的验证错误等。
在 routes.py
文件中定义一个路由,以处理表单的提交和页面的渲染:
from flask import Flask, render_template, flash, redirect, url_for
from .forms import LoginForm
app = Flask(__name__)
app.config['SECRET_KEY'] = 'you-will-never-guess'
@app.route('/login', methods=['GET', 'POST'])
def login():
form = LoginForm()
if form.validate_on_submit():
flash('Login requested for user {}, remember_me={}'.format(
form.username.data, form.remember_me.data))
return redirect(url_for('login'))
return render_template('login.html', title='Sign In', form=form)
在这个文件中,我们首先创建了一个 Flask 应用,并且设置了一个名为 ‘SECRET_KEY’ 的配置项,这个配置项用于启用所有 Flask 和某些其扩展的加密功能。
然后我们定义了一个名为 login 的视图函数。这个函数首先创建了一个 LoginForm 实例,然后检查这个表单是否通过了所有的验证(即所有的字段都已填写)。如果表单通过了验证,我们会显示一条消息,然后重定向到登录页。否则,我们会渲染登录模板,并将表单传递给模板。
form.validate_on_submit()
是Flask-WTF扩展提供的一个方便的方法,它将处理表单提交的所有事务。
当你在视图函数中调用form.validate_on_submit()
,它将会做两件事:
- 它首先检查请求方法是否是 POST 或 PUT,这两种方法常常用于提交表单。在 HTTP 协议中,GET 请求通常用于获取数据,而 POST 和 PUT 请求通常用于提交数据。
- 如果请求方法是 POST 或 PUT,那么
validate_on_submit()
进一步调用form.validate()
来运行每个字段的验证器。这些验证器是在你的 Form 类中定义的(例如在LoginForm
中的DataRequired
)。如果所有的字段都通过了验证,form.validate()
将返回 True,否则返回 False。
所以,如果 form.validate_on_submit()
返回 True,那么这意味着客户端发起了一个 POST 或 PUT 请求,且所有的字段都已填写(通过验证)。这是提交表单的一个常见模式。
在__init__.py
中,引入并初始化 Flask 应用和路由:
from flask import Flask
from .routes import app
创建一个run.py
来启动应用:
from myproject import app
if __name__ == '__main__':
app.run(debug=True)
补充
FlaskForm
(或者更准确地说,它的基类 Form
)的字段类型由 WTForms 库提供。以下是一些常用的字段类型:
StringField
:用于处理<input type="text">
类型的 HTML 表单元素。PasswordField
:用于处理<input type="password">
类型的 HTML 表单元素。TextAreaField
:用于处理<textarea>
类型的 HTML 表单元素。HiddenField
:用于处理<input type="hidden">
类型的 HTML 表单元素。DateField
:用于处理含有date
数据的表单元素。DateTimeField
:用于处理含有datetime
数据的表单元素。IntegerField
:用于处理<input type="number">
类型的 HTML 表单元素。DecimalField
:用于处理含有decimal
数据的表单元素。FloatField
:用于处理含有float
数据的表单元素。BooleanField
:用于处理<input type="checkbox">
类型的 HTML 表单元素。RadioField
:用于处理<input type="radio">
类型的 HTML 表单元素。SelectField
:用于处理<select>
类型的 HTML 表单元素。SelectMultipleField
:用于处理可以选择多个选项的<select>
类型的 HTML 表单元素。FileField
:用于处理<input type="file">
类型的 HTML 表单元素。SubmitField
:用于处理<input type="submit">
类型的 HTML 表单元素。
所有这些字段都可以附加一个或多个验证器,如 DataRequired
、Length
、Email
等,用于验证用户输入的数据。
你可以选择使用这些字段中的任何一个来创建你的表单。只需在你的 FlaskForm
子类中定义一个类变量,并将其设置为你选择的字段类型的实例即可。例如,username = StringField('Username', validators=[DataRequired()])
。