一個web應用的誕生(3)--美化一下


經過上一章的內容,其實就頁面層來說已結可以很輕松的實現功能了,但是很明顯美觀上還有很大的欠缺,現在有一些很好的前端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="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 href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" 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文件,打開后看到如下代碼:

進行修改,順便提一下,我比較常使用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 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 %}

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


頁面風格與登錄頁保持了一致,但是,目前還是如果用戶名密碼錯誤(即輸入的不是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">&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="請輸入用戶名">
      </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">&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="請輸入用戶名">
              </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和mysql進行互聯。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM