3.render_template渲染模板及jinja2

lemon 發(fā)布于2019-07-30 15:25 / 3572人閱讀

摘要：用瀏覽器訪問(wèn)這個(gè)地址，顯示結(jié)果如下那么為何稱之為模板呢因?yàn)椴粌H能渲染靜態(tài)的文件，也能傳遞參數(shù)給，使一個(gè)模板根據(jù)參數(shù)的不同顯示不同的內(nèi)容，這是因?yàn)槭褂昧诉@個(gè)模板引擎。

我們之前的視圖函數(shù)，返回的都是簡(jiǎn)單的"Hello Wolrd"之類的字符串，怎么返回一個(gè)html呢？首先我們?cè)趖emplates文件夾建立一個(gè)html文件，內(nèi)容隨便寫一點(diǎn)如下：




    
    Index


This is index page

我們可以使用Flask對(duì)象app的send_static_file方法，使視圖函數(shù)返回一個(gè)靜態(tài)的html文件，但現(xiàn)在我們不使用這種方法，而是使用flask的render_template函數(shù)，它功能更強(qiáng)大。
從flask中導(dǎo)入render_template，整體代碼如下：

from flask import Flask, render_template
import config

app = Flask(__name__)
app.config.from_object(config)


@app.route("/")
def index():
    return render_template("index.html")

if __name__ == "__main__":
    app.run()

render_template函數(shù)會(huì)自動(dòng)在templates文件夾中找到對(duì)應(yīng)的html，因此我們不用寫完整的html文件路徑。用瀏覽器訪問(wèn)"/"這個(gè)地址，顯示結(jié)果如下：

那么為何稱之為模板呢？因?yàn)?b>render_template不僅能渲染靜態(tài)的html文件，也能傳遞參數(shù)給html，使一個(gè)html模板根據(jù)參數(shù)的不同顯示不同的內(nèi)容，這是因?yàn)閒lask使用了jinja2這個(gè)模板引擎。要使用模板，在render_template參數(shù)中以key=value形式傳入變量，在html中使用{{key}}來(lái)顯示傳入的變量，例如：

# 視圖函數(shù)
@app.route("/")
def index():
    return render_template("index.html", contents="This is index page")

# html



    
    Index


{{ contents }}

瀏覽器顯示的結(jié)果與上文是一樣的。我們還可以直接把一個(gè)類的實(shí)例傳遞過(guò)去，并在模板中訪問(wèn)類的屬性，例如假設(shè)一個(gè)類對(duì)象obj有a和b屬性，關(guān)鍵部分的代碼如下：

# 視圖函數(shù)中
return render_template("index.html", object=obj)

...
# html中
a: {{ object.a }}
b: {{ object.b }}

傳入一個(gè)字典也可以，并且在模板中既可以用dict[key]，也可以用dict.key。

使用過(guò)濾器，可以在html中對(duì)傳入的變量進(jìn)行處理，其格式是{{ 變量 | 過(guò)濾器 }}，例如將前文的{{ contents }}修改為{{ contents | upper}}，瀏覽器顯示的內(nèi)容就變成了：

所以我們可以很容易就理解，過(guò)濾器其實(shí)就是以變量為參數(shù)的函數(shù)，返回處理后的結(jié)果，在后端一樣可以先用字符串對(duì)象的upper()函數(shù)處理好再傳遞給模板，效果是完全一樣的。jinja2自帶了一些過(guò)濾器，例如length/reverse/lower等等，并且我們也可以自己按照需求自定義過(guò)濾器，模板還支持{{ 變量 | 過(guò)濾器1 | 過(guò)濾器2 | ... }}這樣的操作。想要深入了解的話，可以搜索jinja2過(guò)濾器去進(jìn)一步學(xué)習(xí)。

模板中還可以使用if else和for in控制語(yǔ)句，與變量使用{{ }}不同，控制語(yǔ)句要放在{% %}里，例如前文的contents傳入一個(gè)list：

contents=[i for i in range(10)]

html中代碼如下：


    {% for i in contents %}
        {{ i }}{# 注意i也要用兩個(gè)大括號(hào) #}
    {% endfor %}

使用for遍歷contents的內(nèi)容，并用{{ i }}顯示出來(lái)，同時(shí)還用{# #}加了一個(gè)注釋，還要注意需要使用{% endfor %}來(lái)提示循環(huán)區(qū)域的結(jié)束，因?yàn)閔tml不像python那樣通過(guò)縮進(jìn)來(lái)判斷循環(huán)的區(qū)域，if也是同理。瀏覽器顯示結(jié)果：

最后for和if結(jié)合使用：

header
    {% for i in contents %}
        
        {% if i%2 == 0 %}
            {{ i }}是偶數(shù){# 注意i也要用兩個(gè)大括號(hào) #}
        {% else %}
            {{ i }}是奇數(shù)
        {% endif %}
        
    {% endfor %}

結(jié)果如下（只是演示一下，不要吐槽排版和美觀）：