Flask使用Bootstrap模板并引入Ajax后台完成数据刷新-优快云博客

Python 与 Bootstrap

这周申请了公众号[ 清风Python ],并勉强算是踏入了公众号的第一步。
虽然公众号是Python相关的，但起初的三天，都是在更新Bootstrap的相关文章，有些驴唇不对马嘴。朋友说是不公众号取错名字了，应该叫清风Web？其实不然...
之所以最近在学习Bootstrap，主要是因为Flask的后端知识学习的差不多了，也写了些简单的网页功能。可前台样式一直是短板。所以想学学Bootstrap，用比较少的时间，使前台美观效果有所提升。
但Bootstrap系列一直这么更新下去，估计真的偏离学习Python的初衷了。所以今天针对Flask和Bootstrap更新一篇文章吧

Flask 表单登陆

Flask针对请求的get、post分类，完成模板渲染与表单验证，算是最为基础的功能了，实现思路如下：

如果为get请求，return render_template('login.html)
如果为post请求，获取请求参数中的user pwd
- 用户名密码验证成功，跳转登陆页面
- 用户名密码验证不成功，重新渲染login.html并给出提示

好的，在我们写python之前，先写login.html。既然这几天在学bootstrap，那就从它入手

Bootstrap sign in

Bootstrap网站有很多实例精选，其中就有这么一个sign in的模板，今天就改改它。
首先登陆Bootstrap中文网http://www.bootcss.com/ ，选择较为稳定的bootstrap3,进入到模板实例中，下载整套代码。

模板下载.gif

解压代码后，将../bootstrap-3.3.7/docs/examples/signin/index.html文件及依赖的css文件拷贝至Flask模板路径下，并使用jinjia2模板规则，修改html代码。(bootstrap为了继承ie低版本，所以添加了很多兼容性的js，完全没必要考虑，直接删除掉。保留并修改bootstrap.min.css、signin.css两个css文件的引入路径，即可完美支持)。
默认模板是email登录的，我们修改为用户名，并为用户名、密码添加name字段，用于获取表单提交后的用户名密码，进行登录验证。最终修改如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Flask Login Test</title>

    <!-- Bootstrap core CSS -->
    <link href="{{ url_for('static',filename='bootstrap.min.css') }}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{{ url_for('static',filename='signin.css') }}" rel="stylesheet">

</head>

<body>

<div class="container" >

    <form class="form-signin" method="post">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputName" class="sr-only">Email address</label>
        <input type="text" id="inputName" class="form-control" placeholder="user" name="user" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" name="pwd" placeholder="Password" required>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        {% if error %}
            <p class="text-danger">{{ error }}</p>
        {% endif %}
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>

</div>
</body>
</html>

下来需要编写Flask的Login，为了快速演示效果，就不引入插件和数据库判断了，使用写死用户名密码的方式进行登录验证。

# -*- coding: utf-8 -*-
# @Author   : 王翔
# @JianShu  : 清风Python
# @Date     : 2019/6/2 20:59
# @Software : PyCharm
# @version  ：Python 3.6.8
# @File     : basic_login.py

from flask import Flask, render_template, request, session, redirect, url_for

app = Flask(__name__)
app.config["SECRET_KEY"] = "Can't not guess it ."

@app.before_request
def check():
    if (not session.get('user') and not request.path.startswith('/static')
            and request.path != '/login'):
        return redirect(url_for('login'))

@app.errorhandler(404)
def error(error_no):
    return "您访问的路径不存在..."



@app.route('/home')
def home():
    return "<h2>欢迎访问系统主页</h2>"


@app.route('/login', methods=["GET", "POST"])
def login():
    if request.method == "GET":
        return render_template('index.html')
    else:
        user = request.form.get('user')
        pwd = request.form.get('pwd')
        if user == 'qingfeng' and pwd == '123':
            session['user'] = user
            return redirect(url_for('home'))
        else:
            return render_template('index.html', error="用户名或密码错误")


if __name__ == '__main__':
    app.run(debug=True)

启动服务登录验证，由于设置了before_request的验证，所以输入http://127.0.0.1:5000/后，会自动跳转至登录界面。可以看到引入的模板正常展示了。之后输入用户名密码,进行登录验证。

登陆验证.gif

基本的Flask登陆验证就是这样了。但这种用户名密码错误后，重新渲染刷新页面的方式，会丢失当前输入的内容，并且二次渲染造成了不必要的流量，能否针对此处进行优化呢？答案是当然的..

Flask 引入 Ajax后台刷新数据

为了系统不二次渲染网页，我们可以使用Ajax进行后台数据刷新。方便起见我们引入JQuery的Ajax，对比原生js可以省去不少代码...

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(function () {
        $("#submit").click(function (event) {
            event.preventDefault();
            var userInput = $('input[name="user"]');
            var user = userInput.val();
            var pwdInput = $("input[name='pwd']");
            var pwd = pwdInput.val();
            $.post({
                'url': '/login',
                'data': {
                    'user': user,
                    'pwd': pwd
                },
                "success": function (data) {
                    if (data['code'] == 200) {
                        window.location = '/home'
                    } else {
                        var error = data['error'];
                        $("#error").html(error);
                        $("#error").show();
                    }
                },
                'fail': function (error) {
                    consle.log(error)
                }
            });
        });
    });
</script>

之后将前面用于显示错误的error标签转化为：<p class="text-danger" style="display:none" id="error"></p>
至于Flask中的代码，只需要将原有的模板渲染，改为json数据传输即可：

from flask import jsonify
if user == 'qingfeng' and pwd == '123':
        session['user'] = user
        return jsonify({"code": 200, "error": ""})
    else:
        return jsonify({"code": 401, "error": "用户名或密码错误"})