Flask – 模板

可以以 HTML 格式返回繫結到特定 URL 的函式的輸出。例如，在以下指令碼中，hello() 函式將使用附加的<h1> 標記呈現“Hello World”。

from flask import Flask
app = Flask(__name__)

@app.route('/')
def index():
   return '<html><body><h1>Hello World</h1></body></html>'

if __name__ == '__main__':
   app.run(debug = True)

但是，從 Python 程式碼生成 HTML 內容很麻煩，尤其是在需要放置變數資料和 Python 語言元素（如條件語句或迴圈）時。這將需要頻繁地轉義 HTML。

這時可以使用Jinja2 模板引擎，Flask 基於此引擎。與其從函式返回硬編碼 HTML，不如使用render_template() 函式渲染 HTML 檔案。

from flask import Flask
app = Flask(__name__)

@app.route('/')
def index():
   return render_template(‘hello.html’)

if __name__ == '__main__':
   app.run(debug = True)

Flask 將嘗試在 templates 資料夾中找到 HTML 檔案，該資料夾與包含此指令碼的資料夾位於同一資料夾中。

應用程式資料夾
- Hello.py
- templates
  - hello.html

術語“Web 模板系統”指的是設計一個 HTML 指令碼，其中可以動態插入變數資料。Web 模板系統由模板引擎、某種資料來源和模板處理器組成。

Flask 使用jinja2 模板引擎。Web 模板包含 HTML 語法，其中穿插著變數和表示式的佔位符（在本例中為 Python 表示式），這些佔位符在渲染模板時會被替換為值。

以下程式碼儲存在 templates 資料夾中的hello.html 中。

<!doctype html>
<html>
   <body>
   
      <h1>Hello {{ name }}!</h1>
      
   </body>
</html>

接下來，從 Python shell 執行以下指令碼。

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello/<user>')
def hello_name(user):
   return render_template('hello.html', name = user)

if __name__ == '__main__':
   app.run(debug = True)

開發伺服器啟動並執行後，開啟瀏覽器並輸入 URL 為 - https://:5000/hello/mvl

URL 的變數部分插入到{{ name }}佔位符中。

jinja2 模板引擎使用以下分隔符來轉義 HTML。

{% ... %} 用於語句
{{ ... }} 用於列印到模板輸出的表示式
{# ... #} 用於模板輸出中不包含的註釋
# ... ## 用於行語句

在以下示例中，演示了在模板中使用條件語句。hello() 函式的 URL 規則接受整數引數。它被傳遞到hello.html 模板。在其中，比較接收到的數字（分數）的值（大於或小於 50），並根據情況有條件地渲染 HTML。

Python 指令碼如下所示 -

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/hello/<int:score>')
def hello_name(score):
   return render_template('hello.html', marks = score)

if __name__ == '__main__':
   app.run(debug = True)

hello.html 的 HTML 模板指令碼如下所示 -

<!doctype html>
<html>
   <body>
      {% if marks>50 %}
         <h1> Your result is pass!</h1>
      {% else %}
         <h1>Your result is fail</h1>
      {% endif %}
   </body>
</html>

請注意，條件語句if-else 和endif 都包含在分隔符{%..%} 中。

執行 Python 指令碼並訪問 URL https:///hello/60，然後訪問https:///hello/30 以檢視 HTML 輸出根據條件更改。

Python 迴圈結構也可以在模板內使用。在以下指令碼中，result() 函式在瀏覽器中開啟 URL https://:5000/result 時將字典物件傳送到模板results.html。

result.html 的模板部分使用for 迴圈將字典物件result{} 的鍵值對呈現為 HTML 表格的單元格。

從 Python shell 執行以下程式碼。

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/result')
def result():
   dict = {'phy':50,'che':60,'maths':70}
   return render_template('result.html', result = dict)

if __name__ == '__main__':
   app.run(debug = True)

將以下 HTML 指令碼另存為 templates 資料夾中的result.html。

<!doctype html>
<html>
   <body>
      <table border = 1>
         {% for key, value in result.items() %}
            <tr>
               <th> {{ key }} </th>
               <td> {{ value }} </td>
            </tr>
         {% endfor %}
      </table>
   </body>
</html>

在這裡，與For 迴圈對應的 Python 語句再次包含在 {%..%} 中，而表示式key 和 value 則放在{{ }} 中。

開發啟動並執行後，在瀏覽器中開啟https://:5000/result 以獲取以下輸出。

列印頁面