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": "用户名或密码错误"})
AJAX登陆验证.gif
通过打开F12，看到请求并未进行页面的二次渲染，这样避免了清空用户之前的输入数据，而是通过后台数据刷新完成。
完整代码上传在GitHub：https://github.com/KingUranus/FlaskTests
好了，今天的内容就到这里，如果觉得有帮助，记得点赞支持。欢迎大家关注我的公众号，获取更多Python相关的知识，并有整理好的各类福利数据供大家下载：
清风Python.jpg
©本文由简书作者：清风Python 原创 如需转载请注明
网友评论