GIF.gif
注意：使用的插件主要有 bootstrap-flask（常用的 flask-bootstrap 已经停止维护，且不支持 bootstrap4）、 Flask-WTF 。本次代码无数据库操作，只是简单的演示这两个扩展的使用方式，项目使用的 Flask 版本为 1.0.2 。
扩展文档
flask-bootstrap 文档地址： https://bootstrap-flask.readthedocs.io/en/latest/
flask-wtf 文档地址： https://flask-wtf.readthedocs.io/en/stable/
扩展版本
- flask-wtf = 0.14.2
- bootstrap-flask = 6.7
扩展安装
pipenv 虚拟环境下安装，如果没有虚拟环境请使用 pip 安装
pipenv install Flask-WTF
pipenv install bootstrap-flask
pip
pip install Flask-WTF
pip install bootstrap-flask
Python代码
manage.py
from app import app
if __name__=='__main__':
app.run()
app/config.py
class Config(object):
DEBUG=True
SECRET_KEY = '142-836-543'
app/__init__.py
from flask import Flask, render_template, url_for, request, redirect
from flask_wtf import FlaskForm
from wtforms import validators, fields, widgets
from flask_bootstrap import Bootstrap
app = Flask(__name__)
app.config.from_object('app.config.Config')
bootstrap = Bootstrap(app)
class MyForm(FlaskForm):
Username = fields.StringField(
label='用户名',
validators=[
validators.DataRequired(message='用户名不能为空'),
validators.length(min=6, max=11, message='用户名长度必须大于%(min)d且小于%(max)d')
],
widget=widgets.TextInput(),
render_kw={
'class': 'form-control',
'placeholder': '请输入用户名',
'required': '',
'autofocus': ''
}
)
Password = fields.PasswordField(
label='密码',
validators=[
validators.DataRequired(message='密码不能为空'),
validators.length(min=6, message='密码必须大于%(min)d位')
],
widget=widgets.PasswordInput(),
render_kw={
'class': 'form-control',
'placeholder': '请输入密码',
'required': '',
'autofocus': ''
}
)
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'GET':
form = MyForm()
if request.method == 'POST':
form = MyForm(request.form)
if form.validate_on_submit():
return redirect('http://www.baidu.com')
else:
print(form.errors)
return render_template('admin/login.html', form = form)
@app.route('/')
def index():
return render_template('index.html')
模板代码
app/templates/admin/login.html
{% from 'bootstrap/utils.html' import render_static %}
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
{{ bootstrap.load_css() }}
{{ render_static('css', 'signin.css') }}
</head>
<body class="text-center">
<form class="form-signin" method="post">
{{ form.csrf_token }}
<img class="mb-4" src="https://gw.alicdn.com/tps/TB1W_X6OXXXXXcZXVXXXXXXXXXX-400-400.png" alt="" width="72"
height="72">
<h1 class="h3 mb-3 font-weight-normal">管理员登录</h1>
{% if form.Password.errors[0] or form.Username.errors[0] %}
<div class="alert alert-danger" role="alert">
{{ form.Password.errors[0] }} {{ form.Username.errors[0] }}
</div>
{% endif %}
<label class="sr-only">{{ form.Username.label }}</label>
{{ form.Username }}
<label for="inputPassword" class="sr-only">{{ form.Password.label }}</label>
{{ form.Password }}
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
{{ bootstrap.load_js() }}
</body>
</html>
app/static/signin.css
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
