教學課程：在Visual Studio中使用檢視和頁面範本建立 Flask 應用程式

2025-06-12

本文介紹教學課程系列 中在 Visual Studio 內使用 Flask Web 框架的步驟 2。

Visual Studio 可讓您從專案範本建立 Flask 應用程式，為專案提供更廣泛的起點。教學課程中的步驟 1 說明如何使用單一頁面建立 Flask 應用程式，其中所有程式代碼都在單一檔案中。在步驟 2 中，您會重構程式碼並建立頁面範本的結構，以啟用進一步的開發。特別是，您想要將應用程式檢視的程式代碼與啟動程式代碼等其他層面分開。

在教學課程的步驟 2 中，您將瞭解如何：

重構應用程式程式代碼以分隔檢視與啟動程序代碼
使用頁面範本渲染檢視

先決條件

步驟 1：建立 Visual Studio 解決方案和 Flask 專案，建立 Visual Studio 解決方案和 Flask 應用程式專案。

重構 Flask 專案以進行進一步開發

空白 Flask Web 專案 模板可以讓您使用單一的 app.py 檔案創建項目，包含啟動程式代碼和單一的檢視功能。若要進一步開發具有多個檢視和範本的應用程式，您需要將這些功能分開。

請遵循下列步驟來調整 Flask 專案，以允許進一步開發：

在 [方案總管]中，以滑鼠右鍵按兩下 Flask 項目資料夾（BasicProject），然後選取 [新增>新增資料夾]。
將新的應用程式資料夾命名 HelloFlask。
在 HelloFlask 資料夾上按滑鼠右鍵，然後選取 [加入>新項目] 以建立新檔案。
在 [新增項目] 對話框中，選取 [空白 Python 檔案] 檔案範本：
1. 將檔案命名為 __init__.py。檔名應在單詞 init的前後各包含兩個底線符號（_）。
2. 選取 [] 新增 []。
將下列程式代碼新增至新檔案，以建立 Flask 實例並載入應用程式檢視：
```
from flask import Flask
app = Flask(__name__)

import HelloFlask.views
```
在 HelloFlask 資料夾中，建立另一個名為 views.py的新 Python 檔案。

重要

請務必將檔案名指定為 views.py。名稱檢視很重要，因為 __init__.py 檔案中的 import HelloFlask.views 語句。如果這兩個實例中 檢視的名稱 不相同，Visual Studio 會在運行時間顯示錯誤。
將下列程式代碼新增至 views.py 檔案。此程式代碼會重新命名函式，並定義傳迴路由至 /home 端點：
```
from flask import Flask
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    return "Hello Flask!"
```
此程式代碼也包含來自 app.py 檔案的頁面轉譯程序代碼，並匯入 __init__.py 檔案中宣告的 app 物件。
在 HelloFlask 資料夾中，建立名為範本的子資料夾。資料夾目前是空的。

在 Flask 項目資料夾中（BasicProject），以下列程式代碼取代 app.py 檔案的內容：

import os
from HelloFlask import app    # Imports the code from HelloFlask/__init__.py

if __name__ == '__main__':
    HOST = os.environ.get('SERVER_HOST', 'localhost')

    try:
        PORT = int(os.environ.get('SERVER_PORT', '5555'))
    except ValueError:
        PORT = 5555

    app.run(HOST, PORT)

更新程式代碼之後，請將 app.py 檔案重新命名為 runserver.py。
確認重構的 Flask 項目結構看起來像下列範例：

執行重構的程式並檢查路由

現在您已準備好在 Visual Studio 中執行專案：

在 Visual Studio 中，選取 [偵錯]>[開始偵錯] （F5），或在主要工具列上選取 [網頁伺服器]（您看到的瀏覽器可能會有所不同）：
當應用程式在瀏覽器中開啟時，請在瀏覽器中嘗試 / （root）和 /home URL 路由端點：

在調試程式中執行更新的程式

您也可以在程式代碼的各個部分設定斷點，並在 除錯程式中遵循應用程式啟動順序：

設定數個斷點，例如下列幾點：
- runserver.py 檔案的第一行
- __init__.py 檔案的第一行
- views.py 檔案中的 return "Hello Flask!" 行
選取 [偵錯]>[開始偵錯] 或 F5，以在 [調試程式] 中啟動應用程式。
執行 除錯器 時，使用 F10逐步執行程式碼，或使用 F5從每個斷點執行程式碼。您也可以在 Visual Studio 的主要工具列上使用偵錯控件，例如繼續、停止、重新啟動，以及步驟選項：
完成時，請選取 [Ctrl+C] 之後按任意鍵以停止應用程式。您也可以關閉路由的任何開啟瀏覽器視窗。

將變更提交至版本控制

重構程式代碼並測試更新之後，您可以檢閱並認可原始檔控制的變更：

將變更儲存至項目檔，例如使用 ctrl Ctrl+S 鍵盤快捷方式。
在 Git 控制項列上，選取未認可的變更（鉛筆 5）以開啟 [Git 變更] 視窗：
在 [Git 變更] 視窗中，輸入提交訊息，然後選取 [全部提交]。

認可完成時，Visual Studio 會顯示在本機建立 認可 <哈希> 訊息。
（選擇性）將認可的變更推送至遠端存放庫：
1. 在 Git 控制項列上，選擇傳出/傳入提交（箭頭 1/0）。
2. 選取 [同步處理[提取]，然後選取 [推送]，或 [推送]。
您也可以在將多個本機認可推送至遠端存放庫之前，先累積多個本機認可。

將變更儲存至項目檔，例如使用 ctrl Ctrl+S 鍵盤快捷方式。
在 Visual Studio 右下角選取尚未提交的變更（鉛筆 5），Team Explorer開啟：
在 Team Explorer中，輸入一個類似「重構程式代碼」的提交訊息，然後選取 [提交所有]。

認可完成時，Visual Studio 會顯示在本機建立 認可 <哈希> 訊息。同步處理以與伺服器共享變更。
（選擇性）將認可的變更推送至遠端存放庫：
1. 在 Team Explorer中，選取 Sync。
2. 展開 [傳出提交] ，然後選取 [推送] 。
您也可以先累積多個本機提交後再推送到遠端儲存庫。

在本教學課程系列的後續步驟中，您可以參閱本節，了解如何將變更提交到版本控制。

確定提交和推送的頻率

將變更提交至版本控制會在變更日誌中建立紀錄，並提供您可以依需求還原存放庫的還原點。您也可以檢查每個提交，以查看特定的變更。

Git 中的提交成本低。最好頻繁提交少量變更，而不是累積大量變更再以單一提交的形式提交。

您不需要將每一個小的變更提交至個別檔案。通常在新增功能、變更結構（如本教學課程系列的步驟所示），或重構一些程式碼時，會進行提交。與共同作業者確認並協商，達成共識最適合每個人的提交粒度，這也是一個很好的做法。

您提交的頻率以及您將提交推送至遠端存放庫的頻率是兩個不同的考慮。您可能會在將提交推送到遠端存儲庫之前，先在本地存儲庫中累積多個提交。提交的頻率取決於你的團隊想如何管理存放庫。

使用範本來呈現頁面和視圖

views.py 檔案中的 home 函式會產生頁面的純文本 HTTP 回應。大部分真實世界的網頁都會回應豐富的 HTML 頁面，這些網頁通常會併入實時數據。開發人員使用函式定義檢視的主要原因，是動態產生內容。

檢視的傳回值只是字串。您可以使用動態內容，在字串內建置任何 HTML。因為最好將標記與數據分開，所以最好將標記放在範本中，並將數據保留在程式代碼中。

調整視圖以使用內嵌 HTML

第一個步驟是轉換檢視處理，以針對具有一些動態內容的頁面使用內嵌 HTML：

使用下列程式代碼取代 views.py 檔案的內容：

from datetime import datetime
from flask import render_template
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    html_content = "<html><head><title>Hello Flask</title></head><body>"
    html_content += "<strong>Hello Flask!</strong> on " + formatted_now
    html_content += "</body></html>"

    return html_content

儲存您的變更，然後再次執行您的應用程式。
重新整理頁面幾次，以確認日期和時間更新。完成時，請停止應用程式。

建立 HTML 範本

接下來，將頁面轉譯程序轉換為使用 HTML 範本：

以滑鼠右鍵點擊範本資料夾，然後選取 >新增項目 以建立新檔案。
在 [新增專案] 對話框中，選取 HTML 頁面 檔案範本。將檔案命名為 index.html，然後選取 [新增]。
以下列標記取代 HTML 檔案所提供的內容：
```
<html>
<head>
   <title>Hello Flask</title>
</head>

<body>
   {{ content }}
</body>
</html>
```
在此程式代碼中，{{ content }} 語句是佔位符或替換標記（也稱為 範本變數），您可以在程式代碼中提供值。

調整 home 函式以載入範本

您必須修改 home 函式，以使用 render_template 方法。這個方法會載入 HTML 範本，並使用符合佔位元名稱的具名自變數來提供 {{ content }} 值。

在 views.py 檔案中，以下列程式代碼取代 home 函式定義：

def home():
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    return render_template(
        "index.html",
        content = "<strong>Hello, Flask!</strong> on " + formatted_now)

Flask 會自動在範本資料夾中尋找範本，因此範本的路徑會相對於該資料夾。

儲存您的項目變更，然後再次執行應用程式。

請注意，content 值內的內嵌 HTML 語法（\<strong> ...）不會將 轉譯為 HTML，因為範本化引擎（Jinja）會自動逸出 HTML 內容。自動跳脫可防止意外的注入式攻擊弱點。

開發人員通常會從一個頁面收集用戶輸入，並將其作為值傳遞到另一個頁面，使用範本中的佔位符來實現。跳脫也提醒您最好讓 HTML 遠離程式碼。

完成時，請停止應用程式。

使用不同的佔位符

您可以在 HTML 標記內針對每個數據片段使用相異的佔位元。然後，再次調整您的 home 函式，以提供特定的佔位元值：

使用下列標記取代 index.html 檔案的內容：

<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <strong>{{ message }}</strong>{{ content }}
  </body>
</html>

在 views.py 檔案中，以下列程式代碼取代 home 函式定義，以提供所有佔位元符的值：

def home():
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    return render_template(
        "index.html",
        title = "Hello Flask",
        message = "Hello, Flask!",
        content = " on " + formatted_now)

儲存您的變更，然後再次執行您的應用程式。這次您應該會看到正確呈現的輸出：
您可以將您的變更提交至版本控制系統，並更新您的遠端存放庫。如需詳細資訊，請參閱將變更提交至版本控制。

個別頁面範本

範本通常會在不同的 HTML 檔案中維護，但您也可以使用內嵌範本。建議使用不同的檔案，以維持標記和代碼之間的清楚分隔。

針對範本使用 .html 擴充功能

頁面範本檔案的 .html 擴展名完全是選擇性的。您一律可以在 render_template 函式的第一個自變數中識別檔案的確切相對路徑。不過，Visual Studio（和其他編輯器）通常會使用 .html 檔案提供程式碼完成和語法著色等功能，這些功能的優勢彌補了頁面範本不是 HTML 的缺點。

當您使用 Flask 專案時，Visual Studio 會自動偵測您正在編輯的 HTML 檔案是否實際上是 Flask 範本，並提供特定的自動完成功能。如果您開始輸入 Flask 頁面範本批注（{#），Visual Studio 會自動提供結尾 #} 字元。 批注選取 和 取消批注選取 命令 （在 [編輯>進階] 功能表上，也會使用範本批註，而不是 HTML 批注。

將範本組織成子資料夾

您可以使用子資料夾，然後在呼叫 render_template 函式時，參考 範本下 資料夾下的相對路徑。這種方法是有效建立範本命名空間的絕佳方式。

下一步

步驟 3：提供靜態檔案、新增頁面，以及使用範本繼承

共用方式為