首页
所有分类
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的循环体中使用else语句的方法
Mar 30 Python
python中nan与inf转为特定数字方法示例
May 11 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
Jun 21 Python
Python cookbook（数据结构与算法）从任意长度的可迭代对象中分解元素操作示例
Feb 13 Python
Python3 jupyter notebook 服务器搭建过程
Nov 30 Python
PyQt5显示GIF图片的方法
Jun 17 Python
python pandas cumsum求累计次数的用法
Jul 29 Python
Python实现某论坛自动签到功能
Aug 20 Python
Python爬虫:Request Payload和Form Data的简单区别说明
Apr 30 Python
Django权限设置及验证方式
May 13 Python
python如何对链表操作
Oct 10 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
Mar 03 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
WeUI(1) Pillow(2) 结构体(1) 指针(1) Slice(1) 切片(1) vue-esign(1) pygame(3) map(4) random(1)
You might like
windows xp下安装pear
2006/12/02 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
php算法实例分享
2015/07/14 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
PHP asXML()函数讲解
2019/02/03 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
numpy中索引和切片详解
2017/12/15 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
数据库方面面试题
2012/04/22 面试题
军训鉴定表自我鉴定
2014/02/13 职场文书
广告创意求职信
2014/03/17 职场文书
工程材料采购方案
2014/05/18 职场文书
争先创优公开承诺书
2014/08/30 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
PHP策略模式写法
2021/04/01 PHP
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js