在 点击打开链接中,讲解了如何使用flask-login扩展实现用户认证中的与数据库互动(通过改动模型User类)、注册到app、实现回调函数的内容。
这篇主要介绍登录页面的实现 。
目标:实现如下的登录页面:
分析这个页面可以看出,应该包含一个表单。表单包含一个用于输入电子邮件地址的文本字段、一个密码字段、一个“记住我”复选框和一个提交按钮。
文本字段的验证函数应当包括:必须是邮件地址格式、长度应该适中、不能为空
密码字段的验证函数应当包括:不能为空
下面看一下使用flask-wtf实现表单
如果未安装flask-wtf的要先安装。
# pyCharm Terminal
pip install Flask_Wtf
一、引入需要使用的类/函数等
# app/auth/forms.py
from flask_wtf import Form #引入Form类
from wtforms import StringField,PasswordField,BooleanField,SubmitField #从wtforms模块中引入4个字段
from wtforms.validators import Required,Length,Email #从wtforms.validators中引入3个验证函数
StringField对应文本字段,用于填写电子邮件地址。
PasswordField对应密码字段,用于填写密码 。
BooleanField对应复选框。
SubmitField对应提交按钮 。
二、实现表单类
# app/auth/forms.py
class LoginForm(Form): #继承自Form类
email = StringField('Email',validators=[Required(),Length(1,64),Email()]) #lineEdit
password = PasswordField('Password',validators=[Required()]) #password edit
submit = SubmitField('Log In') #按钮
remember_me = BooleanField('Keep me logged in') #复选框
三、使用表单类渲染HTML模板
# app/templates/auth/login.html
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky - Login{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Login</h1>
</div>
<div class="col-md-4">
{{ wtf.quick_form(form) }}
</div>
{% endblock %}
要想使用wtf.quick_form()来渲染模板,必须引入wtf.html:
{% import "bootstrap/wtf.html" as wtf %}
这样模板就渲染了,再通过视图函数返回即可。
四、在导航栏加上登录/登出按钮
login.html是一个登录页面。通过导航栏上添加按钮,链接到login.html页面。
# app/templates/base.html
#...
<ul class="nav navbar-nav navbar-right">
{% if current_user.is_authenticated %}
<li><a href="{{ url_for('auth.logout') }}">Log Out</a> </li>
{% else %}
<li><a href="{{ url_for('auth.login') }}">Log In</a> </li>
{% endif %}
</ul>
判断条件中的变量current_user是由Flask-Login定义的,在视图函数和模板中是自动可用的。
url_for('auth.logout')返回auth.logout的URL。