一個(gè)基于flask的web應(yīng)用誕生 bootstrap框架美化（3）

更新時(shí)間：2017年04月11日 09:13:56 作者：雙魚(yú)座的牛

一個(gè)基于flask的web應(yīng)用誕生第三篇，這篇文章主要介紹了前端框架bootstrap與flask框架進(jìn)行整合，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

經(jīng)過(guò)上一章的內(nèi)容，其實(shí)就頁(yè)面層來(lái)說(shuō)已結(jié)可以很輕松的實(shí)現(xiàn)功能了，但是很明顯美觀上還有很大的欠缺，現(xiàn)在有一些很好的前端css框架，如AmazeUI,騰訊的WeUI等等，這里推薦一個(gè)和flask集成很好的bootstrap框架

安裝框架

在模板中直接引用bootstrap的CDN或者本地路徑外，還可以直接應(yīng)用flask的bootstrap集成包,首先需要對(duì)集成包進(jìn)行安裝：

pip3.6 install flask-bootstrap

這是一個(gè)flask的擴(kuò)展包，flask的所有擴(kuò)展包默認(rèn)默認(rèn)的包名都為flask.ext打頭，同樣bootstrap也是如此，首先在default的文件的頭部導(dǎo)入包：

from flask.ext.bootstrap import Bootstrap

然后對(duì)bootstrap進(jìn)行初始化，修改代碼：

bootstrap=Bootstrap(app)

初始化之后，就可以使用Jinja2的繼承方式使用此包中的包含的一系列的針對(duì)Bootstrap的基模板。基模板中直接引用了一系列的bootstrap中的元素。

還記得如何在jinja2中使用模板繼承吧，下面在使用之前，首先看看基模板的結(jié)構(gòu)：

{% 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 -%}

從源碼中可以看出，這個(gè)基模板定義了12個(gè)block，分別對(duì)應(yīng)了整個(gè)文檔(doc),html屬性(html_attribs),整個(gè)html(html),整個(gè)head部分(head),title部分(title),meta代碼部分(metas),css樣式(styles),body屬性(body_attribs),body部分(body),導(dǎo)航(navbar),
頁(yè)面內(nèi)容(content),js(scripts)

并且title，meta，css，和js均有默認(rèn)的內(nèi)容，所以使用的時(shí)候需要加入{{super()}}

好，根據(jù)這個(gè)基模板的結(jié)構(gòu)，修改login.html中的代碼為：

{% extends "bootstrap/base.html"%}

{% block title%}牛博客 {% endblock %}<!--覆蓋title標(biāo)簽-->

{% block navbar %}
<nav class="navbar navbar-inverse"><!-- 導(dǎo)航部分 -->
 導(dǎo)航
</nav>
{% endblock %}
{% block content %} <!--具體內(nèi)容-->
<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="請(qǐng)輸入用戶名">
 </div>
 <div class="form-group">
 <label for="passworld">密碼</label>
 <input type="password" class="form-control" id="passworld" placeholder="請(qǐng)輸入密碼">
 </div>
 <button type="submit" class="btn btn-default">登錄</button>
 </form>
 </div>
</div>
{% endblock %}

運(yùn)行程序，現(xiàn)在的顯示結(jié)果為：

比剛剛漂亮多了，這時(shí)生成的html代碼為：

<!DOCTYPE html>
<html>
 <head>
 <title>牛博客 </title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link  rel="external nofollow" rel="external nofollow" rel="stylesheet">
 </head>
 <body>
 <nav class="navbar navbar-inverse"><!-- 導(dǎo)航部分 -->
 導(dǎo)航
 </nav>
 <!--具體內(nèi)容-->
 <div class="container">
 <form method="post">
 <div class="form-group">
 <label for="username">用戶名</label>
 <input type="text" class="form-control" id="username" placeholder="請(qǐng)輸入用戶名">
 </div>
 <div class="form-group">
 <label for="passworld">密碼</label>
 <input type="password" class="form-control" id="passworld" placeholder="請(qǐng)輸入密碼">
 </div>
 <button type="submit" class="btn btn-default">登錄</button>
 </form>
 </div>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </body>
</html>

注意這幾個(gè)cdn的地址，這個(gè)地址有時(shí)候會(huì)被擋在墻外，這時(shí)怎么辦呢？

修改的方式為在python的安裝目錄下找到Lib\site-packages\flask_bootstrap文件夾，文件夾下有__init__.py文件，打開(kāi)后看到如下代碼：

進(jìn)行修改，順便提一下，我比較常使用bootcdn這個(gè)cdn服務(wù)器

下面使用土法進(jìn)行一下測(cè)試，輸入test和123后的結(jié)果為：

顯示的還是之前的測(cè)試登錄成功頁(yè)，這顯然是不對(duì)的，一般來(lái)說(shuō)，bbs或blog都是跳到登錄前的頁(yè)面或者首頁(yè)，現(xiàn)在為了方便起見(jiàn)，都跳轉(zhuǎn)到首頁(yè)，同時(shí)，如果用戶名或密碼錯(cuò)誤，也要在登錄頁(yè)進(jìn)行提示，修改default.py代碼如下：

from flask import session #導(dǎo)入session對(duì)象

@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>這個(gè)站點(diǎn)的名字為 myblog </h1>
</body>
</html>

哦，對(duì)了，沒(méi)有引用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  rel="stylesheet">
 </head>
 <body>
 <h1>這個(gè)站點(diǎn)的名字為 myblog </h1>
 </body>
</html>

看到已經(jīng)成功引用了bootstrap框架，但是導(dǎo)航部分全部都沒(méi)有，這時(shí)當(dāng)然不能在寫(xiě)一遍導(dǎo)航，直接修改自定義的基模板，然后讓其他模板引用即可，修改基模板為：

{%extends "bootstrap/base.html "%}
{% block title%}牛博客 {% endblock %}<!--覆蓋title標(biāo)簽-->

{% block navbar %}
<nav class="navbar navbar-inverse"><!-- 導(dǎo)航部分 -->
 導(dǎo)航
</nav>
{% endblock %}
{% block content %} <!--具體內(nèi)容-->
<div class="container">
</div>
{% endblock %}

然后修改首頁(yè)代碼：

{% extends "base.html" %}

{% block content %}
 <h1>這個(gè)站點(diǎn)的名字為 {{site_name}} </h1>
{% endblock %}

修改登錄頁(yè)代碼為：

{% extends "base.html"%}
{% block content %} <!--具體內(nèi)容-->
<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="請(qǐng)輸入用戶名">
 </div>
 <div class="form-group">
 <label for="passworld">密碼</label>
 <input type="password" class="form-control" name="password" id="passworld" placeholder="請(qǐng)輸入密碼">
 </div>
 <button type="submit" class="btn btn-default">登錄</button>
 </form>
</div>
{% endblock %}

下面登錄成功頁(yè)的顯示結(jié)果為：

頁(yè)面風(fēng)格與登錄頁(yè)保持了一致，但是，目前還是如果用戶名密碼錯(cuò)誤（即輸入的不是test和123），那么除了和剛剛一樣返回一個(gè)登錄錯(cuò)誤的字符串之外，用戶是無(wú)法獲悉的，就需要一個(gè)反應(yīng)用戶狀態(tài)的方法，這一點(diǎn)，flask提供了flash函數(shù)，下面繼續(xù)修改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("您輸入的用戶名或密碼錯(cuò)誤")
 return render_template("/login.html") #返回的仍為登錄頁(yè)

修改login.html模板：

{% extends "base.html"%}
{% block content %} <!--具體內(nèi)容-->
<div class="container">

 {% for message in get_flashed_messages() %}
 <div class="alert alert-warning">
 <button type="button" class="close" data-dismiss="alter">&times</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="請(qǐng)輸入用戶名">
 </div>
 <div class="form-group">
 <label for="passworld">密碼</label>
 <input type="password" class="form-control" name="password" id="passworld" placeholder="請(qǐng)輸入密碼">
 </div>
 <button type="submit" class="btn btn-default">登錄</button>
 </form>
</div>
{% endblock %}

好下面輸入test和1234，顯示結(jié)果為：

狀態(tài)很完美的顯示出來(lái)。

繼續(xù)美化

登錄的頁(yè)面和控制器的基本功能都已經(jīng)完成，但是僅僅就現(xiàn)在這個(gè)頁(yè)面來(lái)說(shuō)，沒(méi)有登錄框占整個(gè)屏幕的，一般來(lái)說(shuō)，都是居中的一部分，這塊不涉及flask的部分，輪到bootstrap的柵格系統(tǒng)登場(chǎng)了。

柵格系統(tǒng)簡(jiǎn)單說(shuō)就是將一個(gè)container或container-fluid中分為12個(gè)列，每個(gè)列都可以合并或偏移，與html中的table類(lèi)似，并且支持響應(yīng)式，通過(guò)xs，sm，md，lg來(lái)進(jìn)行不同屏幕尺寸的區(qū)分。下面用柵格系統(tǒng)對(duì)登錄頁(yè)進(jìn)行一下修改：

{% extends "base.html"%}
{% block content %} <!--具體內(nèi)容-->
<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">&times</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="請(qǐng)輸入用戶名">
 </div>
 <div class="form-group">
 <label for="passworld">密碼</label>
 <input type="password" class="form-control" name="password" id="passworld" placeholder="請(qǐng)輸入密碼">
 </div>
 <button type="submit" class="btn btn-default">登錄</button>
 </form>
 </div>
 </div>
</div>
{% endblock %}

顯示結(jié)果如下：