首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

一个基于flask的web应用诞生 bootstrap框架美化（3）

Posted in Python onApril 11, 2017

经过上一章的内容，其实就页面层来说已结可以很轻松的实现功能了，但是很明显美观上还有很大的欠缺，现在有一些很好的前端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 %}

运行程序，现在的显示结果为：

一个基于flask的web应用诞生 bootstrap框架美化（3）

比刚刚漂亮多了，这时生成的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文件，打开后看到如下代码：

一个基于flask的web应用诞生 bootstrap框架美化（3）

进行修改，顺便提一下，我比较常使用bootcdn这个cdn服务器

下面使用土法进行一下测试，输入test和123后的结果为：

一个基于flask的web应用诞生 bootstrap框架美化（3）

显示的还是之前的测试登录成功页，这显然是不对的，一般来说，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 %}

下面登录成功页的显示结果为：

一个基于flask的web应用诞生 bootstrap框架美化（3）

页面风格与登录页保持了一致，但是，目前还是如果用户名密码错误（即输入的不是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的web应用诞生 bootstrap框架美化（3）

状态很完美的显示出来。

继续美化

登录的页面和控制器的基本功能都已经完成，但是仅仅就现在这个页面来说，没有登录框占整个屏幕的，一般来说，都是居中的一部分，这块不涉及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的web应用诞生 bootstrap框架美化（3）

毕竟不是专业美工，没有经过设计，但至少比刚刚美观多了，但登录的用户名和密码写成固定值肯定是不行的，数据库是必不可少的，将在下一章让flask和mysql进行互联。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

一个基于flask的web应用诞生 bootstrap框架美化（3）

- Author -

双鱼座的牛

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
python 判断自定义对象类型
Mar 21 Python
Python编程实现的简单Web服务器示例
Jun 22 Python
你真的了解Python的random模块吗？
Dec 12 Python
numpy中的delete删除数组整行和整列的实例
May 09 Python
使用python的pandas为你的股票绘制趋势图
Jun 26 Python
python打造爬虫代理池过程解析
Aug 15 Python
python3实现高效的端口扫描
Aug 31 Python
wxPython实现分隔窗口
Nov 19 Python
Python爬取YY评级分数并保存数据实现过程解析
Jun 01 Python
python 读txt文件,按‘,’分割每行数据操作
Jul 05 Python
python向企业微信发送文字和图片消息的示例
Sep 28 Python
Python爬虫入门教程01之爬取豆瓣Top电影
Jan 24 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件（2）
Apr 11 #Python
非递归的输出1-N的全排列实例(推荐)
Apr 11 #Python
一个基于flask的web应用诞生（1）
Apr 11 #Python
Python 文件处理注意事项总结
Apr 10 #Python
python非递归全排列实现方法
Apr 10 #Python
python 生成器生成杨辉三角的方法(必看)
Apr 10 #Python
Python贪吃蛇游戏编写代码
Oct 26 #Python
艾尔登法环(1) 巫师(1) 帝国时代(1) 最终幻想(1) 西索(1) explain(2) 守望先锋(1) 我的世界(1) Docker(14) 城市猎人(1)
You might like
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
Python实现二维曲线拟合的方法
2018/12/29 Python
基于Python实现用户管理系统
2019/02/26 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
德国孕妇装和婴童服装网上商店：bellybutton
2018/04/12 全球购物
BudgetAir印度：预订航班、酒店和汽车租赁
2019/07/07 全球购物
智能钱包：Ekster
2019/11/21 全球购物
2014年两会学习心得范例
2014/03/17 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
2015年教师新年寄语
2014/12/08 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
Window server中安装Redis的超详细教程
2021/11/17 Redis
vue ref如何获取子组件属性值
2022/03/31 Vue.js