本文介绍了如何在Flask应用中结合Bootstrap创建登录表单，并使用Ajax实现后台数据刷新，避免页面重新加载导致的用户体验问题。通过实例展示了如何修改Bootstrap模板、设置Flask表单验证以及使用JQuery Ajax处理POST请求。
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,进入到模板实例中，下载整套代码。
解压代码后，将../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
最低0.47元/天 解锁文章
1666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
