3.render_template渲染模板及jinja2

時間 2019-12-07

標籤 3.render render template 渲染模板 jinja2 jinja 简体版

原文原文鏈接

咱們以前的視圖函數，返回的都是簡單的'Hello Wolrd'之類的字符串，怎麼返回一個html呢？首先咱們在templates文件夾創建一個html文件，內容隨便寫一點以下：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
<h1>This is index page</h1>
</body>
</html>

咱們可使用Flask對象app的send_static_file方法，使視圖函數返回一個靜態的html文件，但如今咱們不使用這種方法，而是使用flask的render_template函數，它功能更強大。
從flask中導入render_template，總體代碼以下：python

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函數會自動在templates文件夾中找到對應的html，所以咱們不用寫完整的html文件路徑。用瀏覽器訪問'/'這個地址，顯示結果以下：flask

那麼爲什麼稱之爲模板呢？由於render_template不只能渲染靜態的html文件，也能傳遞參數給html，使一個html模板根據參數的不一樣顯示不一樣的內容，這是由於flask使用了jinja2這個模板引擎。要使用模板，在render_template參數中以key=value形式傳入變量，在html中使用{{key}}來顯示傳入的變量，例如：後端

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

# html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
</head>
<body>
<h1>{{ contents }}</h1>
</body>
</html>

瀏覽器顯示的結果與上文是同樣的。咱們還能夠直接把一個類的實例傳遞過去，並在模板中訪問類的屬性，例如假設一個類對象obj有a和b屬性，關鍵部分的代碼以下：瀏覽器

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

...
# html中
<p>a: {{ object.a }}</p>
<p>b: {{ object.b }}</p>

傳入一個字典也能夠，而且在模板中既能夠用dict[key]，也能夠用dict.key。app

使用過濾器，能夠在html中對傳入的變量進行處理，其格式是{{ 變量 | 過濾器 }}，例如將前文的{{ contents }}修改成{{ contents | upper}}，瀏覽器顯示的內容就變成了：函數

因此咱們能夠很容易就理解，過濾器其實就是以變量爲參數的函數，返回處理後的結果，在後端同樣能夠先用字符串對象的upper()函數處理好再傳遞給模板，效果是徹底同樣的。jinja2自帶了一些過濾器，例如length/reverse/lower等等，而且咱們也能夠本身按照需求自定義過濾器，模板還支持{{ 變量 | 過濾器1 | 過濾器2 | ... }}這樣的操做。想要深刻了解的話，能夠搜索jinja2過濾器去進一步學習。學習

模板中還可使用if else和for in控制語句，與變量使用{{ }}不一樣，控制語句要放在{% %}裏，例如前文的contents傳入一個list：spa

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

html中代碼以下：code

<h1>
    {% for i in contents %}
        {{ i }}{# 注意i也要用兩個大括號 #}
    {% endfor %}
</h1>

使用for遍歷contents的內容，並用{{ i }}顯示出來，同時還用{# #}加了一個註釋，還要注意須要使用{% endfor %}來提示循環區域的結束，由於html不像python那樣經過縮進來判斷循環的區域，if也是同理。瀏覽器顯示結果：

最後for和if結合使用：

<h1>header</h1>
    {% for i in contents %}
        <p>
        {% if i%2 == 0 %}
            {{ i }}是偶數{# 注意i也要用兩個大括號 #}
        {% else %}
            {{ i }}是奇數
        {% endif %}
        </p>
    {% endfor %}

結果以下（只是演示一下，不要吐槽排版和美觀）：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。