Flask模板 - tw511教學網

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模板引擎技術，而不需要從函式返回寫死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檔案。使用模板的應用程式目錄結構如下所示 -

app.py
hello.py
    templates
        hello.html
        register.html
        ....

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

Flask使用jinga2模板引擎。 Web模板包含用於變數和表示式(這些情況下為Python表示式)的HTML語法散布預留位置，這些變數和表示式在模板呈現時被替換為值。

以下程式碼在模板(templates)檔案夾中儲存為:hello.html。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flask HTTP請求方法處理</title>
</head>
   <body>

      <h1>Hello {{ name }}!</h1>

   </body>
</html>

接下來，將以下程式碼儲存在app.py檔案中，並從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為 - http://localhost:5000/hello/maxsu

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模板指令碼如下 -

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flask模板範例</title>
</head>
   <body>

      {% if marks>50 %}
      <h1> 通過考試！</h1>
      {% else %}
      <h1>未通過考試！</h1>
      {% endif %}

   </body>
</html>

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

執行Python指令碼並存取URL=> http://localhost/hello/60 ，然後存取 http://localhost/hello/59，以有條件地檢視HTML輸出。

Python迴圈結構也可以在模板內部使用。在以下指令碼中，當在瀏覽器中開啟URL => http:// localhost:5000/result時，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':59,'che':60,'maths':90}
    return render_template('result.html', result = dict)

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

將以下HTML指令碼儲存為模板檔案夾(templates)中的模板檔案:result.html 。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flask模板範例</title>
</head>
   <body>
      <table border = 1>
         {% for key, value in result.items() %}
            <tr>
               <th> {{ key }} </th>
               <td> {{ value }} </td>
            </tr>
         {% endfor %}
      </table>
   </body>
</html>

在這裡，與For迴圈相對應的Python語句包含在{%...%}中，而表示式鍵和值放在{{}}中。

開發開始執行後，在瀏覽器中開啟http://localhost:5000/result以獲得以下輸出。