一个基于flask的web应用诞生 bootstrap框架美化（3）
作者：双鱼座的牛 发布时间：2023-12-04 02:30:39
标签：bootstrap,flask
经过上一章的内容，其实就页面层来说已结可以很轻松的实现功能了，但是很明显美观上还有很大的欠缺，现在有一些很好的前端css框架，如AmazeUI,腾讯的WeUI等等，这里推荐一个和flask集成很好的bootstrap框架
安装框架
在模板中直接引用bootstrap的CDN或者本地路径外，还可以直接应用flask的bootstrap集成包,首先需要对集成包进行安装：
pip3.6 install flask-bootstrap
这是一个flask的扩展包，flask的所有扩展包默认默认的包名都为flask.ext打头，同样bootstrap也是如此，首先在default的文件的头部导入包：
from flask.ext.bootstrap import Bootstrap
然后对bootstrap进行初始化，修改代码：
bootstrap=Bootstrap(app)
初始化之后，就可以使用Jinja2的继承方式使用此包中的包含的一系列的针对Bootstrap的基模板。基模板中直接引用了一系列的bootstrap中的元素。
还记得如何在jinja2中使用模板继承吧，下面在使用之前，首先看看基模板的结构：
{％ block doc -％}
<!DOCTYPE html>
<html{％ block html_attribs ％}{％ endblock html_attribs ％}>
{％- block html ％}
<head>
{％- block head ％}
<title>{％ block title ％}{{title|default}}{％ endblock title ％}</title>
{％- block metas ％}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{％- endblock metas ％}
{％- block styles ％}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="external nofollow" rel="stylesheet">
{％- endblock styles ％}
{％- endblock head ％}
</head>
<body{％ block body_attribs ％}{％ endblock body_attribs ％}>
{％ block body -％}
{％ block navbar ％}
{％- endblock navbar ％}
{％ block content -％}
{％- endblock content ％}
{％ block scripts ％}
<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
{％- endblock scripts ％}
{％- endblock body ％}
</body>
{％- endblock html ％}
</html>
{％ endblock doc -％}
从源码中可以看出，这个基模板定义了12个block，分别对应了整个文档(doc),html属性(html_attribs),整个html(html),整个head部分(head),title部分(title),meta代码部分(metas),css样式(styles),body属性(body_attribs),body部分(body),导航(navbar),
页面内容(content),js(scripts)
并且title，meta，css，和js均有默认的内容，所以使用的时候需要加入{{super()}}
好，根据这个基模板的结构，修改login.html中的代码为：
{％ extends "bootstrap/base.html"％}
{％ block title％}牛博客 {％ endblock ％}<!--覆盖title标签-->
{％ block navbar ％}
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
导航
</nav>
{％ endblock ％}
{％ block content ％} <!--具体内容-->
<div class="container">
<div class="container">
<form method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" id="passworld" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
</div>
{％ endblock ％}
运行程序，现在的显示结果为：
比刚刚漂亮多了，这时生成的html代码为：
<!DOCTYPE html>
<html>
<head>
<title>牛博客 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
导航
</nav>
<!--具体内容-->
<div class="container">
<form method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" id="passworld" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
注意这几个cdn的地址，这个地址有时候会被挡在墙外，这时怎么办呢？
修改的方式为在python的安装目录下找到Lib\site-packages\flask_bootstrap文件夹，文件夹下有__init__.py文件，打开后看到如下代码：
进行修改，顺便提一下，我比较常使用bootcdn这个cdn服务器
下面使用土法进行一下测试，输入test和123后的结果为：
显示的还是之前的测试登录成功页，这显然是不对的，一般来说，bbs或blog都是跳到登录前的页面或者首页，现在为了方便起见，都跳转到首页，同时，如果用户名或密码错误，也要在登录页进行提示，修改default.py代码如下：
from flask import session #导入session对象
@app.route("/login",methods=["POST"])
def loginPost():
username=request.form.get("username","")
password=request.form.get("password","")
if username=="test" and password=="123" :
session["user"]=username
return render_template("/index.html",name=username,site_name='myblog')
else:
return "登录失败"
登录成功后的源码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myblog</title>
</head>
<body>
<h1>这个站点的名字为 myblog </h1>
</body>
</html>
哦，对了，没有引用bootstrap的基模板，修改index.html的模板代码，将第一行的
{％ extends "base.html" ％}
修改为
{％ extends "bootstrap/base.html" ％}
刷新为：
<!DOCTYPE html>
<html>
<head>
<title>blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>这个站点的名字为 myblog </h1>
</body>
</html>
看到已经成功引用了bootstrap框架，但是导航部分全部都没有，这时当然不能在写一遍导航，直接修改自定义的基模板，然后让其他模板引用即可，修改基模板为：
{％extends "bootstrap/base.html "％}
{％ block title％}牛博客 {％ endblock ％}<!--覆盖title标签-->
{％ block navbar ％}
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
导航
</nav>
{％ endblock ％}
{％ block content ％} <!--具体内容-->
<div class="container">
</div>
{％ endblock ％}
然后修改首页代码：
{％ extends "base.html" ％}
{％ block content ％}
<h1>这个站点的名字为 {{site_name}} </h1>
{％ endblock ％}
修改登录页代码为：
{％ extends "base.html"％}
{％ block content ％} <!--具体内容-->
<div class="container">
<form method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
{％ endblock ％}
下面登录成功页的显示结果为：
页面风格与登录页保持了一致，但是，目前还是如果用户名密码错误（即输入的不是test和123），那么除了和刚刚一样返回一个登录错误的字符串之外，用户是无法获悉的，就需要一个反应用户状态的方法，这一点，flask提供了flash函数，下面继续修改default.py文件：
from flask import flash
@app.route("/login",methods=["POST"])
def loginPost():
username=request.form.get("username","")
password=request.form.get("password","")
if username=="test" and password=="123" :
session["user"]=username
return render_template("/index.html",name=username,site_name='myblog')
else:
flash("您输入的用户名或密码错误")
return render_template("/login.html") #返回的仍为登录页
修改login.html模板：
{％ extends "base.html"％}
{％ block content ％} <!--具体内容-->
<div class="container">
{％ for message in get_flashed_messages() ％}
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alter">×</button>
{{message}}
</div>
{％ endfor ％}
<form method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
{％ endblock ％}
好下面输入test和1234，显示结果为：
状态很完美的显示出来。
继续美化
登录的页面和控制器的基本功能都已经完成，但是仅仅就现在这个页面来说，没有登录框占整个屏幕的，一般来说，都是居中的一部分，这块不涉及flask的部分，轮到bootstrap的栅格系统登场了。
栅格系统简单说就是将一个container或container-fluid中分为12个列，每个列都可以合并或偏移，与html中的table类似，并且支持响应式，通过xs，sm，md，lg来进行不同屏幕尺寸的区分。下面用栅格系统对登录页进行一下修改：
{％ extends "base.html"％}
{％ block content ％} <!--具体内容-->
<div class="container">
<div class="row"></div>
<div class="row">
<#-- col-md-4表示合并4列，col-md-offset-4表示偏移4列 sm意思相同 --#>
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
<div class="page-header">
<h1>欢迎您登陆</h1>
</div>
{％ for message in get_flashed_messages() ％}
<div class="alert alert-warning">
<button type="button" class="close" data-dismiss="alter">×</button>
{{message}}
</div>
{％ endfor ％}
<form method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="passworld">密码</label>
<input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-default">登录</button>
</form>
</div>
</div>
</div>
{％ endblock ％}
显示结果如下：
毕竟不是专业美工，没有经过设计，但至少比刚刚美观多了，但登录的用户名和密码写成固定值肯定是不行的，数据库是必不可少的，将在下一章让flask和mysql进行互联。
0
投稿猜你喜欢
- 简述小编经常会遇到一些数据库编码不对得问题，好TM头疼，这里做一个记录，供大家参考。修改数据库字符集：ALTER DATABASE db_n
- 1. 查找图像中出现的人脸代码示例：#导入face_recognition模块import face_recognition#将j
本文主要介绍了django admin search_fields placeholder 管理后台添加搜索框提示文字，分享给大家，具体如下- 这几天用到了raw socket，用python写了些demo程序，这里记录下。首先我们看一个简单的sniffer程序：#! /usr/bi
- 本文实例讲述了Go语言实现定时器的方法。分享给大家供大家参考。具体实现方法如下：package mainimport ( &quo
- 新建两张表：表1：student 截图如下：表2：course 截图如下：（此时这样建表只是为了演示连接SQL语句，
- 问题描述：将python脚本设置成开机自启。环境：windows7 64位前段时间，一直想把文件打包成exe文件，然后设置成开机自启，虽然感
- 相信大多数人都遇到过多实例安装mysql吧，相信大多数人只要找到一份多实例安装的教程就会很容易搞定了，但是越是顺利的安装过程越让我们不安，为
- 使用jpype调用Jar包中的实现方法安装pip install jpype1(注意要加后边这个1)使用基本流程如下：使用jpype开启jv
- 前言本文主要介绍 MySQL 是如何开启一个事务的，相关资料也可以查阅官方文档。https://dev.mysql.com/doc/refm
- 一、维数的变形1. 一维数组转二维数组以及同维变换import numpy as nparr_1d = np.arange(12)# 使用
- 1. 排名函数与PARTITION BY --所有数据 SELECT * FROM dbo.student AS a INNER JOIN
- MySQL是一种关系型数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内，这样就增加了速度并提高了灵活性。M
- 本文实例讲述了python简单的函数定义和用法。分享给大家供大家参考。具体分析如下：这里定义了一个温度转换的函数及其用法。def conve
- 一、 [::-1]import numpy as npimport numpy as npx = np.arange(1, 6)print(
- 解读数据库的嵌套查询的性能explain 是非常重要的性能查询的工具！！！1、嵌套查询首先大家都知道我们一般不提倡嵌套查询或是join查询原
- 京东图书评论有非常丰富的信息，这里面就包含了购买日期、书名、作者、好评、中评、差评等等。以购买日期为例，使用Python + M
- ⛳️ 本次反反爬实战案例背景本篇博客选择的案例是由 VX 好友提出，他希望有一篇博客能简单的介绍清楚下面这个问题。快速定位加密参数逻辑，快速
- 本文主要利用python的相关模块进行批量ping ，测试IP连通性。下面看具体代码（python3）：'''遇到问
- 译序：本文提到了一种很不错的实现跨浏览器圆角的解决方案，但是说的不够全面，前端观察最近将整理更多更全面的资源给大家，敬请期待。前一段时间，我
