一個(gè)web應(yīng)用的誕生(3)--美化一下

經(jīng)過上一章的內(nèi)容，其實(shí)就頁(yè)面層來說已結(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="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="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文件，打開后看到如下代碼：


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

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

顯示的還是之前的測(cè)試登錄成功頁(yè)，這顯然是不對(duì)的，一般來說，bbs或blog都是跳到登錄前的頁(yè)面或者首頁(yè)，現(xià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ì)了，沒有引用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 %}

然后修改首頁(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)很完美的顯示出來。

繼續(xù)美化

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

柵格系統(tǒng)簡(jiǎn)單說就是將一個(gè)container或container-fluid中分為12個(gè)列，每個(gè)列都可以合并或偏移，與html中的table類似，并且支持響應(yīng)式，通過xs，sm，md，lg來進(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é)果如下：

畢竟不是專業(yè)美工，沒有經(jīng)過設(shè)計(jì)，但至少比剛剛美觀多了，但登錄的用戶名和密碼寫成固定值肯定是不行的，數(shù)據(jù)庫(kù)是必不可少的，將在下一章讓flask和mysql進(jìn)行互聯(lián)。

春節(jié)假期很快就過去了，這篇文章磕磕巴巴的至少更新了三章，再次感到對(duì)不起語(yǔ)文老師。明天開始要帶小公舉進(jìn)行魔都迪士尼四日游，然后回北京也要開始找工作了，這個(gè)系列的更新可能會(huì)不如之前的穩(wěn)定（但發(fā)現(xiàn)也沒什么人看(┳＿┳)... ，但扣除魔都游的四天，至少要保證一周一更吧，也是對(duì)自己的一個(gè)鞭策，感謝所有的朋友）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容