[Flask] 如何使用 View

前一篇講到 Flask 的 route 設定,本篇就來談談如何顯示前端 UI。

要載入網頁樣板並回傳到瀏覽器,需要呼叫 render_template 這個函式,它的第一個參數為樣版的位置及檔名,之後是傳入樣板所會用到的變數,範例如下:

from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route('/show_view')
def show_view():
    return render_template('show_view.html',
            title='test view')

app.run(debug=True, host='0.0.0.0', port=5566, processes=10)

從上面的程式碼,可以看到第一個值為 ‘show_view.html’,預設是會從根目錄的 templates 資料夾去尋找 show_view.html 檔案

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
</head>
<body>
<div>
    Hello World!
</div>
</body>
</html>

要特別注意的是,樣板裡所使用的語法不是單純的 html,而是 Jinja2 (正確的說,Jinja2 是 template engine),它支援一些很類似 python 的語法,可以做一些簡單的運算,但個人的建議是少用這些語法,以避免維護上的困擾,相關的資料請參考以下連結:

Template Designer Documentation

另外,有時候我們會想將一些常用的 html code 獨立為一支共用的檔案,例如說想在每個頁面都有一個登入登出按鈕或是每頁都顯示相同的客製化訊息。

那實際該怎麼做呢?首先在 template 資料夾底下列建立一個 partial_templates 資料夾,用來放共用的 html 檔案,接下來再建立 partial_template_test.html 檔案,為了測試方便,裡面的內容只放一行 html code 就好:

<div>
    <b>partial template test</b>
</div>

而在原本的 show_view.html 檔案,更動如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{title}}</title>
</head>
<body>
<div>
    Hello World!
</div>
{% include partial_template %}
</body>
</html>

可以看到 html 裡多了一行 {% include partial_template %},partial_template 是變數名稱,也因為多了一個變數,所以 controller 部份也需做更動:

@app.route('/show_view')
def show_view():
    return render_template('show_view.html',
            title='test view',
            partial_template='./partial_templates/partial_template_test.html')

這樣就可以在 view 中顯示共用的 html 檔案了。

除此之外,在比較大型的網站,通常每一頁會套用同一個版型,例如在購物網站中,每一頁的最上層通常都會列出所有的商品分類。以下示範如何將每個 controller method 底下的 view 套上共用的版型,首先建立 master_page.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>{% block title %}{% endblock %}</title>
    </head>
    <body>
        <div>
            <b>top</b>
        </div>
        <div>
            {% block body %}{% endblock %}
        </div>
        <div>
            <b>bottom</b>
        </div>
    </body>
</html>

而原本的 show_view.html 改為:

{% extends "master_page.html" %}
{% block title %}{{title}}{% endblock %}
{% block body %}
<div>
    Hello World!
</div>
{% include partial_template %}
{% endblock %}

在 master_page.html 中,建立一個完整的 html 架構,其中 {% block body %}{% endblock %} 這一行,就是從引用它的 view 中,取得 body 這個變數,所以在 show_view.html 中可以看到 {% block body %} 這一行,在 view 中要引用 master_page.html 也很簡單,多加一行 {% extends "master_page.html" %} 就好了。

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s