?概述

如果你已經(jīng)閱讀過上一個章節(jié),那么你應(yīng)該已經(jīng)完成了充分的準備工作并且創(chuàng)建了一個很簡單的具有如下文件結(jié)構(gòu)的Web應(yīng)用:
?
microblog
??? |-flask文件夾
??? |-<一些虛擬環(huán)境的文件>
??? |-app文件夾
??? |? |-static文件夾
??? |? |-templates文件夾
??? |? |-__init__.py文件
??? |? |-views.py文件
??? |-tmp文件夾
??? |-run.py文件

親,想要運行這個程序么?那就運行這個run.py文件,然后在你的瀏覽器里邊打開http://localhost:5000這個地址.

我們在后面的章節(jié)會不斷地從前一章節(jié)結(jié)束的地方繼續(xù)開發(fā)我們的應(yīng)用,所以你要確保你的環(huán)境已經(jīng)正確安裝,并且你的應(yīng)用能夠正常運行.
?

為什么我們需要使用模板系統(tǒng)

讓我們來考慮一下,我們接下來怎么樣擴展我們的小程序.

我們要在微博應(yīng)用里邊實現(xiàn)一個非常基本的功能,在首頁上面顯示一個歡迎已登錄用戶的標題.暫且忽略當前應(yīng)用里邊沒有用戶的狀況,我將會在稍后解決這個問題.

要顯示一個美觀大方的標題,最簡單的方法就是改變我們提供視圖的方式來顯示一些HTML代碼,不如這樣子:\
?

            
from app import app
 
@app.route('/')
@app.route('/index')
def index():
  user = { 'nickname': 'Miguel' } # fake user
  return '''

 
  
            
            

              Hello, ''' + user['nickname'] + '''
            
          

現(xiàn)在,在你的瀏覽器里面刷新一下看看,是不是很爽?
?

因為我們這個小程序還支持用戶功能，所以咱用了一個用戶占位對象，通常它被親切的稱呼為假數(shù)據(jù)或測試數(shù)據(jù)。它可以讓我們關(guān)注程序中急需解決的部分。

爽完了，面對實際吧，我希望你會覺得上面這個混合著html代碼的小程序相當惡心。想想看，如果你用一些動態(tài)內(nèi)容生成的一個復(fù)雜的HTML頁面，并且想要在由這樣的程序組成的網(wǎng)站中改變一些頁面內(nèi)容，這將會一件非常蛋疼的事情。

模板系統(tǒng)拯救世界

如果保持業(yè)務(wù)邏輯和表現(xiàn)的分離，你的網(wǎng)站結(jié)構(gòu)將會組織的更好。不要不信，如果你用python完成了業(yè)務(wù)代碼，你甚至可以請一個網(wǎng)站設(shè)計師幫你完成剩下的部分。模板系統(tǒng)就是幫你實現(xiàn)業(yè)務(wù)和表現(xiàn)分離的。

讓我們完成第一個模板(fileapp/templates/index.html):
?

            
            

              Hello, {{user.nickname}}!
            
          

如你所見，我們只是寫了一個普通的HTML頁面，唯一跟HTML有區(qū)別的就是里面摻雜了一些以 {{ ... }} 組成的動態(tài)內(nèi)容占位符。

現(xiàn)在讓我們來看看視圖函數(shù)中是如何處理這個模板的(fileapp/views.py):
?

            
from flask import render_template
from app import app
 
@app.route('/')
@app.route('/index')
def index():
  user = { 'nickname': 'Miguel' } # fake user
  return render_template("index.html",
    title = 'Home',
    user = user)

          

測試這段程序的重點就是看看模板系統(tǒng)是如何工作的。你可以比較瀏覽器中渲染后的html頁面源碼與模板文件源碼之間的區(qū)別。

在上面的程序中，我們從 Flask 框架 import 了一個叫 render_template 的新函數(shù)，并用這個函數(shù)來渲染模板。并給這個函數(shù)賦予了模板文件名和一些變量作為參數(shù)。它將導(dǎo)入的變量替換掉模板中的變量占位符，并返回渲染后的模板。

讓我們了解的更深入點。在 Flask 底層，render_template 函數(shù)實際上是調(diào)用了 Flask 的一個組件： Jinja2 模板處理引擎。是 Jinjia2 用導(dǎo)入的變量替換掉了模板中對應(yīng)的 {{ ... }} 代碼塊。

模板中的流程控制

Jinja2 模板系統(tǒng)還支持流程控制語句，我們來嘗試一下在模板中添加一個 if 流程控制語句 (fileapp/templates/index.html):
?

            

 
  {% if title %}
  
            
            
  {% else %}
  
            
            
  {% endif %}
 
 
   
            

              Hello, {{user.nickname}}!
            
          

現(xiàn)在我們的模板文件有點智能了。如果我們在視圖函數(shù)中忘了定義頁面標題變量 title，它將會使用自已的標題替代。把視圖函數(shù)中 render_template 里的 title 變量取消試試，看看這個 if 流程語句是如何工作的。

模板中使用循環(huán)

也許用戶想在他的主頁上展示好友最近寫的文章，有點像人人，或者新浪微博那樣的好友動態(tài)，接下來我們就要看看如何來完成這個功能。

首先，創(chuàng)建用戶和文章 (fileapp/views.py):
?

            
def index():
  user = { 'nickname': 'Miguel' } # fake user
  posts = [ # fake array of posts
    {
      'author': { 'nickname': 'John' },
      'body': 'Beautiful day in Portland!'
    },
    {
      'author': { 'nickname': 'Susan' },
      'body': 'The Avengers movie was so cool!'
    }
  ]
  return render_template("index.html",
    title = 'Home',
    user = user,
    posts = posts)

          

用數(shù)組存儲用戶的文章，每一個數(shù)組元素都是一個字典，如上代碼所示，這個dict的key是author和body，用來存儲文章的作者和文章內(nèi)容。當我們決定使用數(shù)據(jù)庫來存儲這些信息時，這個字典的key可以隱射為表的一個字段，這里為了給大家演示模板的使用，沒有使用數(shù)據(jù)庫相關(guān)的技術(shù)，簡單地使用字典和數(shù)組模擬用戶和他的好友最近發(fā)表的文章。
?

我們的模板文件現(xiàn)在有了一個新問題。我們剛剛創(chuàng)建了一個包含用戶文章的內(nèi)容數(shù)據(jù)，這個數(shù)組可能包含任意數(shù)量的文章。怎樣才能讓模板根據(jù)這個數(shù)組的數(shù)量自動渲染內(nèi)容。

要解決這個問題，就需要一個新的流程控制語句：for循環(huán)。讓我們來把 for循環(huán)添加到模板文件 (fileapp/templates/index.html)
?

            

 
  {% if title %}
  
            
            
  {% else %}
  
            
            
  {% endif %}
 
 
  
            

              Hi, {{user.nickname}}!
            
            
  {% for post in posts %}
  
            

              {{post.author.nickname}} says: 
              
                {{post.body}}
              
            
            
  {% endfor %}
 

          

很簡單吧，你還可以在數(shù)組中添加更多的內(nèi)容看看效果。
?
模板繼承

接來下，我們需要給這個微博(microblog)添加一個導(dǎo)航菜單，里面包含 修改個人資料，退出登錄 等類似的鏈接。

直接在 index.html 模板文件中直接加入這個導(dǎo)航條也是可行的，但是當我們有很多模板文件都包含這個導(dǎo)航條時，就會陷入為了修改導(dǎo)航條的某個地方而不得不在多個文件中往返編輯的尷尬境地。當包含這個導(dǎo)航條的文件越來越多時，你想死的心就會有了。

我們可以使用 Jinja2 的模板繼承功能，它可以使我們把模板中一些公共的內(nèi)容組合在一起創(chuàng)建一個基礎(chǔ)模板，然后讓其它模板繼承這個基礎(chǔ)模板。

我們先來定義一個基礎(chǔ)模板，里面包含了導(dǎo)航條和那個最開始寫的關(guān)于頁面標題(title)的流程控制語句。(fileapp/templates/base.html):
?

            

 
  {% if title %}
  
            
            
  {% else %}
  
            
            
  {% endif %}
 
 
  
            

              Microblog: 
              
                Home
              
            
            

            
  {% block content %}{% endblock %}
 

          

在這個模板中，我們使用了 block 控制語句來定義繼承模板內(nèi)容的顯示位置。注意：這個 block 語句中設(shè)置的名稱必須唯一。

接下來讓我們修改一下 index.html 模板，讓它繼承于剛剛添加的基礎(chǔ)模板 base.html (fileapp/templates/index.html):

?

            
{% extends "base.html" %}
{% block content %}

            

              Hi, {{user.nickname}}!
            
            
{% for post in posts %}

            

              

                {{post.author.nickname}} says: 
                
                  {{post.body}}
                
              
            
            
{% endfor %}
{% endblock %}

          

基礎(chǔ)模板 base.html 幫我們搞定了頁面結(jié)構(gòu)和公共內(nèi)容，所以這個 index.html 模板就成了這幅衰樣了。extends 語句使兩個模板關(guān)聯(lián)了起來。Jinja2 在渲染 index.html 模板時，發(fā)現(xiàn) extends 語句，就會自動先引入 base.html 基礎(chǔ)模板，并對兩個模板中名為 content 的 block 語句進行匹配。Jinja2知道如何把兩個模板合并到一起。我們以后創(chuàng)建新的模板時，同樣也會使用這種從基礎(chǔ)模板繼承的方法。

結(jié)束語

如果你想節(jié)省時間，懶得敲代碼，可以從以下地址下載本章內(nèi)容的示例代碼：

下載地址：microblog-0.2.zip