Flask 使用扩展bootstrap-flask 、Flask

2018-09-14 本文已影响0人刘厚智

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">&copy; 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;
}