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字段，用于获取表单提交后的用户名密码，进行登录验证。最终修改如下：

    
    
    
    
    
    

    

    
    

    
    







    

        
Please sign in
        Email address
        
        Password
        
        

            
                 Remember me
            
        
        {% if error %}
            
{{ error }}
        {% endif %}
        Sign in
    

下来需要编写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 "
欢迎访问系统主页
"


@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可以省去不少代码...

之后将前面用于显示错误的error标签转化为：

至于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": "用户名或密码错误"})

AJAX登陆验证.gif

通过打开F12，看到请求并未进行页面的二次渲染，这样避免了清空用户之前的输入数据，而是通过后台数据刷新完成。

完整代码上传在GitHub：https://github.com/KingUranus/FlaskTests

好了，今天的内容就到这里，如果觉得有帮助，记得点赞支持。欢迎大家关注我的公众号，获取更多Python相关的知识，并有整理好的各类福利数据供大家下载：

清风Python.jpg

©本文由作者：清风Python 原创 如需转载请注明