2.1 路由>視圖函數(shù)>頁面模版初體驗

建立templates模版頁面

1、在templates目錄下建立一個 page.html，用來進行測試和學習。

2、打開page.html，別的代碼不變的情況下，增加一行在<body></body>中。

你好！<b>{{ username }}</b>

引入render_template

從flask導入render_template和url_for,修改程序代碼為：

from flask import Flask,render_template,url_for

render_template

1、改寫視圖函數(shù)index()里的代碼，一是定義一個變量，二是返回渲染過后的結(jié)果，有注釋。

# 設置路由
@app.route('/')
# 視圖函數(shù)，我將其先改成里index
def index():
    # 定義一個變量，然后給其賦值，等下渲染時候在html對應的位置顯示
    # 等下傳遞的可以是單個變量，也可以是其他數(shù)據(jù)類型，比如list,字典等
    username = '林天宇'
    # 返回渲染過后的結(jié)果
    # 注意兩個username代表的意義不同，第一個username是page.html的 {{ username }}
    #   第二個username是在本視圖函數(shù)中定義的username變量
    return render_template('page.html',username=username)

2、運行，返回的頁面達到效果。

至此，我們已經(jīng)成功地將路由、視圖函數(shù)、模版頁面打通了。

2.2 強大且有點意思的 url_for

url_for是個什么東東

調(diào)用視圖函數(shù)的url

在Jinja的HTML文件中，使用url_for('視圖函數(shù)名稱')，可以得到視圖函數(shù)的url。如下例：

<a href="{{ url_for('login') }}">登 錄</a>

顯示成Html時候便是調(diào)用對應的視圖函數(shù)的url。

加載靜態(tài)文件

靜態(tài)文件一般存放在/static子目錄下，可用形同下述的方法，即可獲得文件路徑。

{{url_for('static',filename='路徑名+文件名')}}

常用的有css、img、js等文件，如下面例子所示，便可加載/static/css/index.css這個文件：

<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">

重點筆記

1、從flask中增加import
2、url_for：
用法一：url_for('視圖函數(shù)名')，得到視圖函數(shù)的鏈接；
用法二：url_for('static',filename=‘css/style.css’) 得到靜態(tài)文件地址 /static/css/style.css
用法三：url_for('static',filename=‘css/style.css’, _external=True)得到靜態(tài)文件的絕對地址 http://網(wǎng)站/static/css/style.css
擴展用法：使用 url_for() 生成動態(tài)地址時，將動態(tài)部分作為關鍵字參數(shù)傳入。例如，url_for ('user', name='john', _external=True)的返回結(jié)果是http://localhost:5000/user/john。
傳入 url_for() 的關鍵字參數(shù)不僅限于動態(tài)路由中的參數(shù)。函數(shù)能將任何額外參數(shù)添加到查詢字符串中。例如，url_for('index', page=2)的返回結(jié)果是/?page=2。

2.3 將bootstrap引進來

一、安裝Bootstrap

1、下載Bootstrap代碼：我是從bootcss(http://www.bootcss.com) 下載代碼的，進行了一些摘取，總共有以下幾個文件，我還是按習慣給它們建立了子目錄，分別Ctrl+C和Ctrl+V到Static目錄下。

安裝Bootstrap

這里有必要說一聲，Python下也有技術大牛做了Flask-Bootstrap包，但我現(xiàn)在還沒有用。畢竟封裝得太多了，新手一下子被遮掩了，反而不一定是最好的事情。（其實也是因為我自己也還沒用心去看Flask-Bootstrap包的用法，自己也還不會。）

2、下載JQuery.js代碼：Bootstrap需要JQuery支持的，在本地學習和調(diào)試時候不一定有網(wǎng)絡，所以為了方便，我干脆也下載下來了，直接放到本地。

目前我相當于在static目錄下建立了兩個子目錄：bootstrap和jquery，為了方便，我又再建了3個子目錄：css、js、img，目的是希望以后文件管理起來清晰一些，自己寫的放在自己的目錄下，人家固定的包放在人家的目錄下。

static目錄結(jié)構

2.4 基于bootstrap寫個簡單頁面

建立一個模版頁面

1、在template目錄下新建一個webpage.html模版頁面，代碼如下：
代碼有點長，我給予細細注釋：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN"> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入css，這里用到了url_for函數(shù) ---->
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='bootstrap/css/bootstrap.min.css')}}" />
      <!---  建立一個自己的css文檔，放在／statci/css/style.css 用來自己寫css- -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/style.css')}}" />
<title>FlaskWeb</title>
</head>
<body>

<!-- 1、導航欄部分 -->
<div class="navbar navbar-default navbar-fixed-top"> 
 <div class="container"> 
 
 <!-- 移動設備顯示 -->
  <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
     </button>
    <a class="navbar-brand" href="{{ url_for('index') }}">{{ APPName }}</a>
  </div> 
  
  <!-- PC設備顯示-->
  <div class="collapse navbar-collapse" id="bs-navbar-collapse">

      <!-- 1.1 菜單鏈接部分 -->
      <ul class="nav navbar-nav">
        <li class="active"><a href="{{ url_for('index') }}">{{ username }} <span class="sr-only">(current)</span></a></li>
        <li><a href="#">常用鏈接</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的鏈接 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a >QQ空間</a></li>
            <li><a >微博</a></li>
            <li role="separator" class="divider"></li>
            <li><a >我的網(wǎng)站</a></li>
          </ul>
        </li>
      </ul>

      <!-- 1.2 居右的菜單部分 -->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">注冊</a></li>
        <li><a href="#">登陸</a></li>
      </ul>   

      <!-- 1.3 查詢框 -->
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="請輸入...">
        </div>
        <button type="submit" class="btn btn-default">查詢</button>
      </form>
    </div><!-- /.navbar-collapse -->
  
 </div> 
</div>

<!---導航欄結(jié)束---> 
 
<!-- 2.頁面部分 -->
<!-- 2.1 容器----->
<div class="container-fluid">
<div class="row">

<!--主體部分開始-->

<!--主體部分結(jié)束-->

</div> <!---row結(jié)束----->
</div><!---container-fluid結(jié)束------>


<!--3.footer尾部--->
<footer>
    <nav class="navbar navbar-default">
        <div class="text-right">
            <p> </p>
            <p><a href="#">Back to top</a></p>
        </div>
    </nav>
</footer>

<!---4.尾部引入js部分---->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{{ url_for('static',filename='jquery/1.12.4/jquery.min.js') }}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ url_for('static',filename='bootstrap/js/bootstrap.min.js') }}"></script>


</body>
</html>

2、在/static/css／目錄中建立一個style.css文件。作用是用來寫自己的css，目前干了兩件事：一是字體，二是控制navbar的距離。

body,button, input, select, textarea,h1 ,h2, h3, h4, h5, h6 { 
    font-family:"HanHei SC","PingFang SC","Helvetica Neue","Helvetica","STHeitiSC-Light","Arial",sans-serif;
}

body { padding-top: 50px; }

3、修改index視圖函數(shù)中的rend_template文件為剛才建立的webpage.html：

return render_template('webpage.html',username=username)

4、運行，達到預期效果。

2.5 共用剛剛寫好的頁面模版

首先體會一下共用模版的應用

1、將webpage.html就作為我們的共用模版的基本模版（我的理解是類似于.NET里的masterpage），在各個頁面可能要變化的部分增加兩行代碼。

<!--主體部分開始-->
    {% block mainbody %}
    {% endblock %}
<!--主體部分結(jié)束-->

在這里，我定義了一個mainbody的塊，用來其他頁面放置內(nèi)容。

2、新建立一個index.html文件，作為首頁。先測試一下，所以就簡單寫個代碼如下：

{% extends 'webpage.html' %}
{% block mainbody %}
    <b>MainBody</b>
{% endblock %}

extends：擴展自webpage.html
block mainbody: 將mainbody的內(nèi)容寫在這一塊。在這里我為了測試，就簡單地使用了加粗的Mainbody字符串。

3、修改視圖函數(shù)index中渲染的頁面為剛剛建立的index.html。

    return render_template('index.html',username=username)

4、運行測試成功，效果如下：

顯示效果

寫真正的index.html代碼

1、有了信心，于是我繼續(xù)在mainbody塊里寫下以下代碼，最后成為這樣：

{% extends 'webpage.html' %}

{% block mainbody %}
    <!----1.巨幕------------>
    <div class="jumbotron">
    <div class="container">
      <h1>關于工作和生活</h1>
      <p> 生活不止眼前的茍且，還有詩與遠方。<small>周振宇的個人網(wǎng)站，逐步完善中。</small></p>
    </div><!---end container--->
    </div><!---end jumbotron--->



    <!----2.主體內(nèi)容--------------->
    <!--- 按bootstrap習慣放在容器里--->
    <div class="container">
        <div class="row">

          <!---2.1第一個框，小的顯示器占6個位，大的顯示器占3個位。（bootstrap的柵格系統(tǒng)）------>
          <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio01.jpg') }})
              <div class="caption">
                <h3>互聯(lián)網(wǎng)+</h3>
                <p>“互聯(lián)網(wǎng)+”不是把業(yè)務或者信息系統(tǒng)放到網(wǎng)上而已，而是通過互聯(lián)網(wǎng)的技術和思維，對傳統(tǒng)業(yè)態(tài)進行顛覆，或是直接創(chuàng)造新的業(yè)態(tài)。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

        <!---2.2第二個框------>
         <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio04.jpg') }})
              <div class="caption">
                <h3>人工智能</h3>
                <p>30年前，自動化控制就是智能；20年前，信息系統(tǒng)就是智能；10年前，聊天機器人就是智能；現(xiàn)在，像人一樣學習和思考就是人工智能。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

         <!---2.3第三個框------>
          <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio03.jpg') }})
              <div class="caption">
                <h3>大數(shù)據(jù)</h3>
                <p>大數(shù)據(jù)時代，要是想分一杯羮，請注意在以下三個方面發(fā)力：1、擁有大數(shù)據(jù)；2、擁有應用大數(shù)據(jù)的商業(yè)模式；3、擁有處理大數(shù)據(jù)的技術能力。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

          <!---2.4第三個框------>
          <div class="col-xs-6 col-md-3">
            <div class="thumbnail">
              ![]({{ url_for('static',filename='img/portfolio02.jpg') }})
              <div class="caption">
                <h3>生活札記</h3>
                <p>生活不止眼前的茍且，還有詩與遠方。<br />雖然不喜歡這個死胖子，但是還是很欣賞他的歌。。。</p>
                <p><a href="#" class="btn btn-default" role="button">前去看看..</a></p>
              </div>
            </div>
          </div>

        </div><!--end row-->
    </div> <!--End container------>
{% endblock %}

2、得有圖，于是制作了幾張圖片，放到static/img/下面。

3、運行看效果。

運行效果一

還是響應式的：

運行效果2

至此，已經(jīng)基于bootstrap寫了一個漂亮的頁面了。當然，不采用bootstrap也是可以的，比如采取layui(http://www.layui.com)這種國人自己寫的東東可能更適合中國人的審美。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

【Flask學習手記】(二) 制作漂亮的頁面

【Flask學習手記】(二) 制作漂亮的頁面

2.1 路由>視圖函數(shù)>頁面模版初體驗

建立templates模版頁面

引入render_template

render_template

2.2 強大且有點意思的 url_for

url_for是個什么東東

調(diào)用視圖函數(shù)的url

加載靜態(tài)文件

重點筆記

2.3 將bootstrap引進來

一、安裝Bootstrap

2.4 基于bootstrap寫個簡單頁面

建立一個模版頁面

2.5 共用剛剛寫好的頁面模版

首先體會一下共用模版的應用

寫真正的index.html代碼

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

【Flask學習手記】(二) 制作漂亮的頁面

2.1 路由>視圖函數(shù)>頁面模版 初體驗

建立templates模版頁面

引入render_template

render_template

2.2 強大且有點意思的 url_for

url_for是個什么東東

調(diào)用視圖函數(shù)的url

加載靜態(tài)文件

重點筆記

2.3 將bootstrap引進來

一、安裝Bootstrap

2.4 基于bootstrap寫個簡單頁面

建立一個模版頁面

2.5 共用剛剛寫好的頁面模版

首先體會一下共用模版的應用

寫真正的index.html代碼

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

2.1 路由>視圖函數(shù)>頁面模版初體驗