一個(gè)基于flask的web應(yīng)用誕生 bootstrap框架美化（3）
經(jīng)過上一章的內(nèi)容，其實(shí)就頁面層來說已結(jié)可以很輕松的實(shí)現(xiàn)功能了，但是很明顯美觀上還有很大的欠缺，現(xiàn)在有一些很好的前端css框架，如AmazeUI,騰訊的WeUI等等，這里推薦一個(gè)和flask集成很好的bootstrap框架
安裝框架
在模板中直接引用bootstrap的CDN或者本地路徑外，還可以直接應(yīng)用flask的bootstrap集成包,首先需要對集成包進(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
然后對bootstrap進(jìn)行初始化，修改代碼：
bootstrap=Bootstrap(app)
初始化之后，就可以使用Jinja2的繼承方式使用此包中的包含的一系列的針對Bootstrap的基模板?；０逯兄苯右昧艘幌盗械腷ootstrap中的元素。
還記得如何在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，分別對應(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),
頁面內(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="請輸入用戶名">
</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 %}
運(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="請輸入用戶名"> </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="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í)候會被擋在墻外，這時(shí)怎么辦呢？
修改的方式為在python的安裝目錄下找到Lib\site-packages\flask_bootstrap文件夾，文件夾下有__init__.py文件，打開后看到如下代碼：
進(jìn)行修改，順便提一下，我比較常使用bootcdn這個(gè)cdn服務(wù)器
下面使用土法進(jìn)行一下測試，輸入test和123后的結(jié)果為：
顯示的還是之前的測試登錄成功頁，這顯然是不對的，一般來說，bbs或blog都是跳到登錄前的頁面或者首頁，現(xiàn)在為了方便起見，都跳轉(zhuǎn)到首頁，同時(shí)，如果用戶名或密碼錯誤，也要在登錄頁進(jìn)行提示，修改default.py代碼如下：
from flask import session #導(dǎo)入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>這個(gè)站點(diǎn)的名字為 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 rel="stylesheet"> </head> <body> <h1>這個(gè)站點(diǎn)的名字為 myblog </h1> </body> </html>
看到已經(jīng)成功引用了bootstrap框架，但是導(dǎo)航部分全部都沒有，這時(shí)當(dāng)然不能在寫一遍導(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 %}
然后修改首頁代碼：
{% extends "base.html" %}
{% block content %}
<h1>這個(gè)站點(diǎn)的名字為 {{site_name}} </h1>
{% endblock %}
修改登錄頁代碼為：
{% 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="請輸入用戶名">
</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 %}
下面登錄成功頁的顯示結(jié)果為：
頁面風(fēng)格與登錄頁保持了一致，但是，目前還是如果用戶名密碼錯誤（即輸入的不是test和123），那么除了和剛剛一樣返回一個(gè)登錄錯誤的字符串之外，用戶是無法獲悉的，就需要一個(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("您輸入的用戶名或密碼錯誤")
return render_template("/login.html") #返回的仍為登錄頁
修改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">×</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，顯示結(jié)果為：
狀態(tài)很完美的顯示出來。
繼續(xù)美化
登錄的頁面和控制器的基本功能都已經(jīng)完成，但是僅僅就現(xiàn)在這個(gè)頁面來說，沒有登錄框占整個(gè)屏幕的，一般來說，都是居中的一部分，這塊不涉及flask的部分，輪到bootstrap的柵格系統(tǒng)登場了。
柵格系統(tǒng)簡單說就是將一個(gè)container或container-fluid中分為12個(gè)列，每個(gè)列都可以合并或偏移，與html中的table類似，并且支持響應(yīng)式，通過xs，sm，md，lg來進(jìn)行不同屏幕尺寸的區(qū)分。下面用柵格系統(tǒng)對登錄頁進(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">×</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 %}
顯示結(jié)果如下：
畢竟不是專業(yè)美工，沒有經(jīng)過設(shè)計(jì)，但至少比剛剛美觀多了，但登錄的用戶名和密碼寫成固定值肯定是不行的，數(shù)據(jù)庫是必不可少的，將在下一章讓flask和mysql進(jìn)行互聯(lián)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了pandas如何靈活增加新的空字段問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
python ImageDraw類實(shí)現(xiàn)幾何圖形的繪制與文字的繪制
這篇文章主要介紹了python ImageDraw類實(shí)現(xiàn)幾何圖形的繪制與文字的繪制，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Python實(shí)戰(zhàn)之外星人入侵游戲示例代碼
這篇文章主要介紹了利用Python編寫的外星人入侵游戲的示例代碼，文中的代碼講解詳細(xì)，對我們學(xué)習(xí)Python有一定的幫助，感興趣的可以學(xué)習(xí)一下2022-01-01
這篇文章主要介紹了Pandas透視表（pivot_table）詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
django實(shí)現(xiàn)HttpResponse返回json數(shù)據(jù)為中文
這篇文章主要介紹了django實(shí)現(xiàn)HttpResponse返回json數(shù)據(jù)為中文，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
GPU狀態(tài)監(jiān)測?nvidia-smi?命令的用法詳解
這篇文章主要介紹了GPU狀態(tài)監(jiān)測?nvidia-smi?命令的用法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
Django uwsgi Nginx 的生產(chǎn)環(huán)境部署詳解
這篇文章主要介紹了Django uwsgi Nginx 的生產(chǎn)環(huán)境部署詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
python中__new__和__init__到底是怎么一回事，使用方法看下面的代碼，大家參考使用吧2014-02-02
如果你希望使用更加安全和可靠的方式下載網(wǎng)頁內(nèi)容,并且希望避免 requests 中的 SSL 問題,有幾個(gè)替代方案和改進(jìn)方法,可以更好地處理 SSL 驗(yàn)證、證書問題等,本文給大家介紹了幾種Python獲取網(wǎng)頁內(nèi)容的靠譜方法,需要的朋友可以參考下2025-02-02
這篇文章主要為大家介紹了Python的多任務(wù)進(jìn)程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01