首页
所有分类
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 相关文章推荐
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
Jun 18 Python
python处理html转义字符的方法详解
Jul 01 Python
Python爬虫实战：分析《战狼2》豆瓣影评
Mar 26 Python
浅谈Tensorflow模型的保存与恢复加载
Apr 26 Python
Python 读取指定文件夹下的所有图像方法
Apr 27 Python
解决tensorflow测试模型时NotFoundError错误的问题
Jul 26 Python
python创建文件时去掉非法字符的方法
Oct 31 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
Jul 13 Python
python读取xml文件方法解析
Aug 04 Python
python批量修改交换机密码的示例
Sep 22 Python
详解python的super()的作用和原理
Oct 29 Python
Python中如何处理常见报错
Jan 18 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
春雷3P7(1) ICF-2010(1) 音箱(1) 77A(2) 收信机(3) 耳机(1) BOSE(2) 晶体管(2) MOTOROLA(1) 单管机(1)
You might like
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python实现超市商品销售管理系统
2019/11/22 Python
python列表推导式操作解析
2019/11/26 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
python模拟实现分发扑克牌
2020/04/22 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
56句经典英文座右铭
2019/08/09 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL