一個基于flask的web應用誕生 bootstrap框架美化（3）

2019-11-25 16:15:29

字體：大中小

來源：轉載

供稿：網友

經過上一章的內容，其實就頁面層來說已結可以很輕松的實現功能了，但是很明顯美觀上還有很大的欠缺，現在有一些很好的前端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 %}

運行程序，現在的顯示結果為：

比剛剛漂亮多了，這時生成的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"><!-- 導航部分 --> 導航 </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="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>

注意這幾個cdn的地址，這個地址有時候會被擋在墻外，這時怎么辦呢？

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

進行修改，順便提一下，我比較常使用bootcdn這個cdn服務器

下面使用土法進行一下測試，輸入test和123后的結果為：

顯示的還是之前的測試登錄成功頁，這顯然是不對的，一般來說，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  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 %}

下面登錄成功頁的顯示結果為：

頁面風格與登錄頁保持了一致，但是，目前還是如果用戶名密碼錯誤（即輸入的不是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的部分，輪到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 %}

顯示結果如下：