flask实现一个登录界面

flask实现一个登录界面_第1张图片

flask实现一个登录界面

基础的Flask项目结构

  1. forms.py:定义登录表单和表单字段的文件。
  2. templates/login.html:用于渲染登录表单的 HTML 模板文件。
  3. routes.py:定义应用的路由和视图函数的文件。
  4. __init__.py:创建并初始化 Flask 应用的文件。
  5. 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(),它将会做两件事:

  1. 它首先检查请求方法是否是 POST 或 PUT,这两种方法常常用于提交表单。在 HTTP 协议中,GET 请求通常用于获取数据,而 POST 和 PUT 请求通常用于提交数据。
  2. 如果请求方法是 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 库提供。以下是一些常用的字段类型:

  1. StringField:用于处理 类型的 HTML 表单元素。
  2. PasswordField:用于处理 类型的 HTML 表单元素。
  3. TextAreaField:用于处理