參加你附近的 ，瞭解 VS Code 中的 AI 輔助開發。

Visual Studio Code 中的 Flask 教程

Flask 是一個用於 Web 應用程式的輕量級 Python 框架，它為 URL 路由和頁面渲染提供了基礎功能。

Flask 被稱為“微”框架，因為它不直接提供表單驗證、資料庫抽象、身份驗證等功能。這些功能由稱為 Flask 擴充套件的特殊 Python 包提供。這些擴充套件與 Flask 無縫整合，看起來就像是 Flask 本身的一部分。例如，Flask 不提供頁面模板引擎，但安裝 Flask 時會預設包含 Jinja 模板引擎。為方便起見，我們通常將這些預設項視為 Flask 的一部分。

在本 Flask 教程中，您將建立一個簡單的 Flask 應用，它包含三個使用通用基礎模板的頁面。在此過程中，您將體驗 Visual Studio Code 的許多功能，包括使用終端、編輯器、偵錯程式、程式碼片段等。

本 Flask 教程的完整程式碼專案可以在 GitHub 上找到：python-sample-vscode-flask-tutorial。

如果你有任何問題，可以在 Python 擴充套件討論問答中搜索答案或提問。

先決條件

要成功完成本 Flask 教程，您必須完成以下操作（這些步驟與通用 Python 教程中的步驟相同）：

  1. 安裝 Python 擴充套件。

  2. 安裝 Python 3 的某個版本（本教程基於此版本編寫）。選項包括：

    • （所有作業系統）從 python.org 下載；通常使用頁面上首先出現的下載按鈕。
    • （Linux）內建的 Python 3 安裝效果很好，但要安裝其他 Python 包，您必須在終端中執行 sudo apt install python3-pip。
    • （macOS）在 macOS 上透過 Homebrew 使用 brew install python3 進行安裝。
    • （所有作業系統）從 Anaconda 下載（用於資料科學目的）。

  3. 在 Windows 上，請確保您的 Python 直譯器位置已包含在 PATH 環境變數中。您可以在命令提示符下執行 path 來檢查該位置。如果 Python 直譯器的資料夾未包含在內，請開啟 Windows 設定，搜尋“環境”，選擇為您的帳戶編輯環境變數，然後編輯 Path 變數以包含該資料夾。

為 Flask 教程建立專案環境

在本節中，您將建立一個虛擬環境，並在其中安裝 Flask。使用虛擬環境可以避免將 Flask 安裝到全域性 Python 環境中，並讓您精確控制應用程式中使用的庫。

  1. 在您的檔案系統上，為此教程建立一個資料夾，例如 hello_flask。

  2. 在 VS Code 中開啟此資料夾，方法是在終端中導航到該資料夾並執行 code .，或者執行 VS Code 並使用檔案 > 開啟資料夾命令。

  3. 在 VS Code 中，開啟命令面板（檢視 > 命令面板 或 (⇧⌘P (Windows, Linux Ctrl+Shift+P))）。然後選擇 Python: Create Environment 命令在您的工作區中建立一個虛擬環境。選擇 venv，然後選擇您想要用來建立它的 Python 環境。

    注意：如果您想手動建立環境，或在環境建立過程中遇到錯誤，請訪問環境頁面。

    Flask tutorial: opening the Command Palette in VS Code

  4. 虛擬環境建立完成後，從命令面板執行終端：建立新終端 (⌃⇧` (Windows, Linux Ctrl+Shift+`))，這將建立一個終端並執行其啟用指令碼來自動啟用虛擬環境。

    注意：在 Windows 上，如果您的預設終端型別是 PowerShell，您可能會看到一個錯誤，提示無法執行 activate.ps1，因為系統停用了指令碼執行。該錯誤提供了一個連結，說明如何允許指令碼執行。或者，使用終端：選擇預設配置檔案將“命令提示符”或“Git Bash”設定為您的預設終端。

  5. 在 VS Code 終端中執行以下命令，在虛擬環境中安裝 Flask：

    python -m pip install flask

您現在有了一個獨立的、準備好編寫 Flask 程式碼的環境。當您使用終端：建立新終端時，VS Code 會自動啟用該環境。如果您開啟一個單獨的命令提示符或終端，請透過執行 source .venv/bin/activate (Linux/macOS) 或 .venv\Scripts\Activate.ps1 (Windows) 來啟用環境。當命令提示符開頭顯示 (.venv) 時，表示環境已啟用。

建立並執行一個最小的 Flask 應用

  1. 在 VS Code 中，使用選單中的檔案 > 新建檔案、按 Ctrl+N，或使用資源管理器檢視中的新建檔案圖示（如下所示）在您的專案資料夾中建立一個名為 app.py 的新檔案。

    Flask tutorial: new file icon in Explorer View

  2. 在 app.py 中，新增程式碼以匯入 Flask 並建立 Flask 物件的例項。如果您手動輸入以下程式碼（而不是複製貼上），您可以看到 VS Code 的 IntelliSense 和自動補全功能：

    from flask import Flask
app = Flask(__name__)

  3. 同樣在 app.py 中，新增一個返回內容的函式（在本例中是一個簡單的字串），並使用 Flask 的 app.route 裝飾器將 URL 路由 / 對映到該函式：

    @app.route("/")
def home():
    return "Hello, Flask!"

    提示：您可以在同一個函式上使用多個裝飾器，每行一個，具體取決於您想將多少個不同的路由對映到同一個函式。

  4. 儲存 app.py 檔案 (⌘S (Windows, Linux Ctrl+S))。

  5. 在整合終端中，輸入 python -m flask run 來執行應用，這將啟動 Flask 開發伺服器。開發伺服器預設查詢 app.py。當您執行 Flask 時，您應該會看到類似以下的輸出：

    (.venv) D:\py\\hello_flask>python -m flask run
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

    如果您看到一個錯誤提示找不到 Flask 模組，請確保您已在虛擬環境中執行 python -m pip install flask，如上一節末尾所述。

    此外，如果您想在不同的 IP 地址或埠上執行開發伺服器，請使用 host 和 port 命令列引數，例如 --host=0.0.0.0 --port=80。

  6. 要用預設瀏覽器開啟渲染後的頁面，請在終端中按住 Ctrl 並單擊 http://127.0.0.1:5000/ URL。

    Flask tutorial: the running app in a browser

  7. 觀察到當您訪問像 / 這樣的 URL 時，除錯終端中會顯示一條訊息，展示 HTTP 請求：

    127.0.0.1 - - [11/Jul/2018 08:40:15] "GET / HTTP/1.1" 200 -

  8. 在終端中使用 Ctrl+C 停止應用。

提示：當使用不同於 app.py 的檔名（例如 webapp.py）時，您需要定義一個名為 FLASK_APP 的環境變數，並將其值設定為您選擇的檔案。然後，Flask 的開發伺服器將使用 FLASK_APP 的值，而不是預設檔案 app.py。更多資訊，請參閱 Flask 命令列介面。

在偵錯程式中執行應用

除錯讓您有機會在特定程式碼行暫停正在執行的程式。當程式暫停時，您可以檢查變數，在“除錯控制檯”面板中執行程式碼，以及利用除錯頁面上描述的其他功能。執行偵錯程式還會在除錯會話開始前自動儲存任何已修改的檔案。

開始之前：請確保您已在上一節末尾透過在終端中使用 Ctrl+C 停止了正在執行的應用。如果您在一個終端中讓應用保持執行，它會繼續佔用該埠。結果是，當您使用相同的埠在偵錯程式中執行應用時，原始執行的應用會處理所有請求，您將不會在被除錯的應用中看到任何活動，並且程式不會在斷點處停止。換句話說，如果偵錯程式似乎不起作用，請確保沒有其他應用例項仍在執行。

  1. 將 app.py 的內容替換為以下程式碼，該程式碼添加了第二個路由和函式，您可以在偵錯程式中單步執行：

    import re
from datetime import datetime

from flask import Flask

app = Flask(__name__)


@app.route("/")
def home():
    return "Hello, Flask!"


@app.route("/hello/<name>")
def hello_there(name):
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    # Filter the name argument to letters only using regular expressions. URL arguments
    # can contain arbitrary text, so we restrict to safe characters only.
    match_object = re.match("[a-zA-Z]+", name)

    if match_object:
        clean_name = match_object.group(0)
    else:
        clean_name = "Friend"

    content = "Hello there, " + clean_name + "! It's " + formatted_now
    return content

    用於新 URL 路由 /hello/<name> 的裝飾器定義了一個端點 /hello/，它可以接受任何附加值。路由中 < 和 > 內的識別符號定義了一個變數，該變數會傳遞給函式，並可以在您的程式碼中使用。

    URL 路由是區分大小寫的。例如，路由 /hello/<name> 與 /Hello/<name> 是不同的。如果您希望同一個函式處理這兩種情況，請為每個變體使用裝飾器。

    如程式碼註釋中所述，請始終過濾任意使用者提供的資訊，以避免對您的應用進行各種攻擊。在這種情況下，程式碼將 name 引數過濾為只包含字母，從而避免了控制字元、HTML 等的注入。（當您在下一節中使用模板時，Flask 會進行自動過濾，您將不需要此程式碼。）

  2. 在 hello_there 函式的第一行程式碼 (now = datetime.now()) 處設定一個斷點，方法如下任選其一：

    • 將游標放在該行上，按 F9，或者，
    • 將游標放在該行上，選擇執行 > 切換斷點選單命令，或者，
    • 直接點選行號左側的空白處（當滑鼠懸停在那裡時會出現一個褪色的紅點）。

    斷點在左邊距顯示為一個紅點：

    Flask tutorial: a breakpoint set on the first line of the hello_there function

  3. 切換到 VS Code 中的執行和除錯檢視（使用左側活動欄或 ⇧⌘D (Windows, Linux Ctrl+Shift+D)）。您可能會看到訊息“要自定義執行和除錯，請建立一個 launch.json 檔案”。這意味著您還沒有包含除錯配置的 launch.json 檔案。如果您點選建立 launch.json 檔案連結，VS Code 可以為您建立它：

    Flask tutorial: initial view of the debug panel

  4. 選擇該連結，VS Code 將提示您選擇除錯配置。從下拉列表中選擇 Flask，VS Code 將用 Flask 執行配置填充一個新的 launch.json 檔案。launch.json 檔案包含多個除錯配置，每個配置都是 configuration 陣列中的一個獨立的 JSON 物件。

  5. 向下滾動並檢查名為“Python: Flask”的配置。此配置包含 "module": "flask",，它告訴 VS Code 在啟動偵錯程式時使用 -m flask 執行 Python。它還在 env 屬性中定義了 FLASK_APP 環境變數以標識啟動檔案（預設為 app.py），但允許您輕鬆指定不同的檔案。如果您想更改主機和/或埠，可以使用 args 陣列。

    {
    "name": "Python Debugger: Flask",
    "type": "debugpy",
    "request": "launch",
    "module": "flask",
    "env": {
        "FLASK_APP": "app.py",
        "FLASK_DEBUG": "1"
    },
    "args": [
        "run",
        "--no-debugger",
        "--no-reload"
    ],
    "jinja": true,
    "justMyCode": true
},

    注意：如果您配置中的 env 條目包含 "FLASK_APP": "${workspaceFolder}/app.py"，請將其更改為 "FLASK_APP": "app.py"，如上所示。否則，您可能會遇到類似“無法匯入模組 C”的錯誤訊息，其中 C 是您專案資料夾所在的驅動器號。

    注意：一旦建立了 launch.json，編輯器中會出現一個新增配置按鈕。該按鈕會顯示一個附加配置列表，可新增到配置列表的開頭。（執行 > 新增配置選單命令執行相同的操作。）

  6. 儲存 launch.json (⌘S (Windows, Linux Ctrl+S))。在除錯配置下拉列表中選擇 Python: Flask 配置。

    Flask tutorial: selecting the Flask debugging configuration

  7. 透過選擇執行 > 啟動除錯選單命令，或選擇列表旁邊的綠色啟動除錯箭頭 (F5) 來啟動偵錯程式：

    Flask tutorial: start debugging/continue arrow on the debug toolbar

    觀察狀態列顏色變化，表示正在除錯：

    Flask tutorial: appearance of the debugging status bar

    VS Code 中還會出現一個除錯工具欄（如下所示），其中包含按以下順序排列的命令：暫停（或繼續，F5）、單步跳過 (F10)、單步進入 (F11)、單步跳出 (⇧F11 (Windows, Linux Shift+F11))、重啟 (⇧⌘F5 (Windows, Linux Ctrl+Shift+F5)) 和停止 (⇧F5 (Windows, Linux Shift+F5))。有關每個命令的說明，請參閱 VS Code 除錯。

    Flask tutorial: the VS Code debug toolbar

  8. 輸出會出現在一個“Python 除錯控制檯”終端中。在該終端中按住 Ctrl 並單擊 http://127.0.0.1:5000/ 連結，以在瀏覽器中開啟該 URL。在瀏覽器的位址列中，導航到 http://127.0.0.1:5000/hello/VSCode。在頁面渲染之前，VS Code 會在您設定的斷點處暫停程式。斷點上的黃色小箭頭表示這是下一行要執行的程式碼。

    Flask tutorial: VS Code paused at a breakpoint

  9. 使用“單步跳過”來執行 now = datetime.now() 語句。

  10. 在 VS Code 視窗的左側，您會看到一個變數窗格，其中顯示了局部變數（如 now）以及引數（如 name）。其下方是監視、呼叫堆疊和斷點窗格（詳見VS Code 除錯）。在區域性變數部分，嘗試展開不同的值。您還可以雙擊值（或使用 Enter (Windows, Linux F2)）來修改它們。然而，更改像 now 這樣的變數可能會破壞程式。開發人員通常只在程式碼最初沒有產生正確值時才進行更改以糾正值。

    Flask tutorial: local variables and arguments in VS Code during debugging

  11. 當程式暫停時，除錯控制檯面板（與“終端”面板中的“Python 除錯控制檯”不同）可讓您使用程式的當前狀態來試驗表示式和測試程式碼片段。例如，一旦您單步跳過了 now = datetime.now() 這一行，您就可以試驗不同的日期/時間格式。在編輯器中，選擇讀取 now.strftime("%A, %d %B, %Y at %X") 的程式碼，然後右鍵單擊並選擇在除錯控制檯中求值，將該程式碼傳送到除錯控制檯執行：

    now.strftime("%A, %d %B, %Y at %X")
'Wednesday, 31 October, 2018 at 18:13:39'

    提示：除錯控制檯還會顯示應用內部的異常，這些異常可能不會出現在終端中。例如，如果您在執行和除錯檢視的呼叫堆疊區域看到“在異常處暫停”的訊息，請切換到除錯控制檯檢視異常訊息。

  12. 將該行復制到除錯控制檯底部的 > 提示符處，並嘗試更改格式：

    now.strftime("%a, %d %B, %Y at %X")
'Wed, 31 October, 2018 at 18:13:39'
now.strftime("%a, %d %b, %Y at %X")
'Wed, 31 Oct, 2018 at 18:13:39'
now.strftime("%a, %d %b, %y at %X")
'Wed, 31 Oct, 18 at 18:13:39'

  13. 如果您願意，可以再單步執行幾行程式碼，然後選擇“繼續”(F5) 讓程式執行。瀏覽器視窗將顯示結果：

    Flask tutorial: result of the modified program

  14. 在程式碼中更改該行以使用不同的日期時間格式，例如 now.strftime("%a, %d %b, %y at %X")，然後儲存檔案。Flask 伺服器將自動重新載入，這意味著更改將無需重啟偵錯程式即可應用。重新整理瀏覽器頁面以檢視更新。

  15. 完成後，關閉瀏覽器並停止偵錯程式。要停止偵錯程式，請使用停止工具欄按鈕（紅色方塊）或執行 > 停止除錯命令 (⇧F5 (Windows, Linux Shift+F5))。

提示：為了更容易地重複導航到特定 URL，如 http://127.0.0.1:5000/hello/VSCode，可以使用 print 語句輸出該 URL。該 URL 會出現在終端中，您可以使用 Ctrl+click 在瀏覽器中開啟它。

“轉到定義”和“速覽定義”命令

在使用 Flask 或任何其他庫時，您可能希望檢查這些庫本身的程式碼。VS Code 提供了兩個方便的命令，可以直接導航到任何程式碼中類和其他物件的定義：

  • 轉到定義從您的程式碼跳轉到定義物件的程式碼。例如，在 app.py 中，右鍵單擊 Flask 類（在 app = Flask(__name__) 行中）並選擇轉到定義（或使用 F12），這將導航到 Flask 庫中的類定義。

  • 速覽定義 (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)，也在右鍵上下文選單中)，功能類似，但直接在編輯器中顯示類定義（在編輯器視窗中騰出空間以避免遮擋任何程式碼）。按 Escape 關閉速覽視窗，或使用右上角的 x。

    Flask tutorial: peek definition showing the Flask class inline

使用模板渲染頁面

到目前為止，您在本教程中建立的應用僅從 Python 程式碼生成純文字網頁。雖然可以直接在程式碼中生成 HTML，但開發人員避免這種做法，因為它會使應用面臨跨站指令碼（XSS）攻擊的風險。例如，在本教程的 hello_there 函式中，有人可能會想用類似 content = "<h1>Hello there, " + clean_name + "!</h1>" 的方式在程式碼中格式化輸出，其中 content 中的結果會直接傳遞給瀏覽器。這種開放性允許攻擊者將包括 JavaScript 程式碼在內的惡意 HTML 放入 URL 中，最終進入 clean_name，從而在瀏覽器中執行。

一個更好的做法是完全將 HTML 排除在程式碼之外，透過使用模板，這樣您的程式碼只關心資料值，而不關心渲染。

  • 模板是一個 HTML 檔案，其中包含程式碼在執行時提供的值的佔位符。模板引擎負責在渲染頁面時進行替換。因此，程式碼只關心資料值，而模板只關心標記。
  • Flask 的預設模板引擎是 Jinja，它在您安裝 Flask 時會自動安裝。該引擎提供了靈活的選項，包括自動轉義（以防止 XSS 攻擊）和模板繼承。透過繼承，您可以定義一個具有通用標記的基礎頁面，然後在該基礎上構建具有特定頁面內容的頁面。

在本節中，您將使用模板建立一個單頁。在接下來的部分中，您將配置應用以提供靜態檔案，然後為應用建立多個頁面，每個頁面都包含來自基礎模板的導航欄。

  1. 在 hello_flask 資料夾內，建立一個名為 templates 的資料夾，這是 Flask 預設查詢模板的地方。

  2. 在 templates 資料夾中，建立一個名為 hello_there.html 的檔案，內容如下。此模板包含兩個名為“name”和“date”的佔位符，它們由成對的花括號 {{ 和 }} 界定。如您所見，您也可以直接在模板中包含格式化程式碼：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello, Flask</title>
    </head>
    <body>
        {%if name %}
            <strong>Hello there, {{ name }}!</strong> It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
        {% else %}
            What's your name? Provide it after /hello/ in the URL.
        {% endif %}
    </body>
</html>

    提示：Flask 開發人員通常使用 flask-babel 擴充套件進行日期格式化，而不是 strftime，因為 flask-babel 會考慮區域設定和時區。

  3. 在 app.py 檔案頂部附近，匯入 Flask 的 render_template 函式：

    from flask import render_template

  4. 同樣在 app.py 中，修改 hello_there 函式以使用 render_template 載入模板並應用命名值（並新增一個路由以識別沒有名稱的情況）。render_template 假定第一個引數是相對於 templates 資料夾的。通常，開發人員會將模板命名為與使用它們的函式相同，但名稱匹配不是必需的，因為您總是在程式碼中引用確切的檔名。

    @app.route("/hello/")
@app.route("/hello/<name>")
def hello_there(name = None):
    return render_template(
        "hello_there.html",
        name=name,
        date=datetime.now()
    )

    您可以看到程式碼現在變得簡單得多，只關心資料值，因為標記和格式化都包含在模板中。

  5. 啟動程式（在偵錯程式內部或外部，使用 ⌃F5 (Windows, Linux Ctrl+F5)），導航到 /hello/name URL，並觀察結果。

  6. 另外，嘗試使用像 <a%20value%20that%20could%20be%20HTML> 這樣的名稱導航到 /hello/name URL，以檢視 Flask 自動轉義的效果。“name”值在瀏覽器中顯示為純文字，而不是渲染成一個實際的元素。

提供靜態檔案

靜態檔案有兩種型別。第一種是像樣式表這樣的檔案，頁面模板可以直接引用它們。這類檔案可以放在應用的任何資料夾中，但通常放在 static 資料夾內。

第二種型別是您希望在程式碼中處理的，例如當您想實現一個返回靜態檔案的 API 端點時。為此，Flask 物件包含一個內建方法 send_static_file，它會生成一個包含應用 static 資料夾內靜態檔案的響應。

以下各節演示了這兩種型別的靜態檔案。

在模板中引用靜態檔案

  1. 在 hello_flask 資料夾中，建立一個名為 static 的資料夾。

  2. 在 static 資料夾中，建立一個名為 site.css 的檔案，內容如下。輸入此程式碼後，還可以觀察 VS Code 為 CSS 檔案提供的語法高亮，包括顏色預覽：

    .message {
    font-weight: 600;
    color: blue;
}

  3. 在 templates/hello_there.html 中，在 </head> 標籤之前新增以下行，這將建立一個對樣式表的引用。

    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css')}}" />

    這裡使用的 Flask 的 url_for 標籤會建立檔案的正確路徑。因為它能接受變數作為引數，url_for 允許您在需要時以程式設計方式控制生成的路徑。

  4. 同樣在 templates/hello_there.html 中，用以下標記替換 <body> 元素的內容，該標記使用 message 樣式而不是 <strong> 標籤（並且如果您只使用沒有名稱的 hello/ URL，也會顯示一條訊息）：

    {%if name %}
    <span class="message">Hello there, {{ name }}!</span> It's {{ date.strftime("%A, %d %B, %Y at %X") }}.
{% else %}
    <span class="message">What's your name? Provide it after /hello/ in the URL.</span>
{% endif %}

  5. 執行應用，導航到 /hello/name URL，並觀察到訊息以藍色呈現。完成後停止應用。

從程式碼提供靜態檔案

  1. 在 static 資料夾中，建立一個名為 data.json 的 JSON 資料檔案，內容如下（這些是無意義的示例資料）：

    {
  "01": {
    "note": "This data is very simple because we're demonstrating only the mechanism."
  }
}

  2. 在 app.py 中，新增一個帶有路由 /api/data 的函式，該函式使用 send_static_file 方法返回靜態資料檔案：

    @app.route("/api/data")
def get_data():
    return app.send_static_file("data.json")

  3. 執行應用並導航到 /api/data 端點，以檢視靜態檔案是否被返回。完成後停止應用。

建立多個繼承自基礎模板的模板

由於大多數 Web 應用都有多個頁面，並且這些頁面通常共享許多共同元素，開發人員會將這些共同元素分離到一個基礎頁面模板中，其他頁面模板可以繼承該模板（這也稱為模板繼承）。

此外，由於您可能會建立許多繼承自同一模板的頁面，因此在 VS Code 中建立一個程式碼片段會很有幫助，您可以用它來快速初始化新的頁面模板。程式碼片段從單一來源提供一致的程式碼塊，從而避免了在使用複製貼上現有程式碼時可能出現的錯誤。

以下各節將逐步介紹此過程的不同部分。

建立基礎頁面模板和樣式

Flask 中的基礎頁面模板包含一組頁面的所有共享部分，包括對 CSS 檔案、指令碼檔案等的引用。基礎模板還定義了一個或多個塊標籤，其他繼承基礎模板的模板需要重寫這些標籤。塊標籤在基礎模板和繼承模板中都由 {% block <name> %} 和 {% endblock %} 界定。

以下步驟演示瞭如何建立基礎模板。

  1. 在 templates 資料夾中，建立一個名為 layout.html 的檔案，內容如下，其中包含名為“title”和“content”的塊。如您所見，標記定義了一個簡單的導航欄結構，帶有指向主頁、關於和聯絡頁面的連結，您將在後面的部分中建立這些頁面。每個連結再次使用 Flask 的 url_for 標籤在執行時為匹配的路由生成連結。

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='site.css')}}" />
    </head>

    <body>
        <div class="navbar">
            <a href="{{ url_for('home') }}" class="navbar-brand">Home</a>
            <a href="{{ url_for('about') }}" class="navbar-item">About</a>
            <a href="{{ url_for('contact') }}" class="navbar-item">Contact</a>
        </div>

        <div class="body-content">
            {% block content %}
            {% endblock %}
            <hr/>
            <footer>
                <p>&copy; 2018</p>
            </footer>
        </div>
    </body>
</html>

  2. 將以下樣式新增到 static/site.css 中，放在現有的“message”樣式下方，並儲存檔案。請注意，本教程不試圖演示響應式設計；這些樣式只是生成一個相當有趣的結果。

    .navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

此時您可以執行應用，但由於您沒有在任何地方使用基礎模板，也沒有更改任何程式碼檔案，結果與上一步相同。完成其餘部分以檢視最終效果。

建立程式碼片段

由於您在下一節中建立的三個頁面都繼承自 layout.html，因此建立一個程式碼片段來初始化一個帶有對基礎模板正確引用的新模板檔案可以節省時間。程式碼片段從單一來源提供一致的程式碼，避免了在使用複製貼上現有程式碼時可能出現的錯誤。

  1. 在 VS Code 中，選擇 檔案 > 首選項 > 配置使用者程式碼片段。

  2. 在出現的列表中，選擇 html。如果您之前建立過程式碼片段，該選項可能會在列表的現有程式碼片段部分顯示為“html.json”。

  3. VS Code 開啟 html.json 後，在現有的大括號內新增以下條目（此處未顯示的解釋性註釋描述了細節，例如 $0 行如何指示 VS Code 在插入程式碼片段後放置游標的位置）：

    "Flask Tutorial: template extending layout.html": {
    "prefix": "flextlayout",
    "body": [
        "{% extends \"layout.html\" %}",
        "{% block title %}",
        "$0",
        "{% endblock %}",
        "{% block content %}",
        "{% endblock %}"
    ],

    "description": "Boilerplate template that extends layout.html"
},

  4. 儲存 html.json 檔案 (⌘S (Windows, Linux Ctrl+S))。

  5. 現在，每當您開始輸入程式碼片段的字首時，例如 flext，VS Code 都會將該程式碼片段作為自動完成選項提供，如下一節所示。您也可以使用插入程式碼片段命令從選單中選擇一個程式碼片段。

有關程式碼片段的更多資訊，請參閱建立程式碼片段。

使用程式碼片段新增頁面

有了程式碼片段，您可以快速為主頁、關於和聯絡頁面建立模板。

  1. 在 templates 資料夾中，建立一個名為 home.html 的新檔案，然後開始輸入 flext，您會看到程式碼片段作為補全項出現：

    Flask tutorial: autocompletion for the flextlayout code snippet

    當您選擇該補全項時，程式碼片段的程式碼會出現，游標位於程式碼片段的插入點：

    Flask tutorial: insertion of the flextlayout code snippet

  2. 在“title”塊的插入點處，寫入 Home，在“content”塊中，寫入 <p>Visual Studio Code Flask 教程的主頁。</p>，然後儲存檔案。這幾行是繼承頁面模板中唯一的部分：

  3. 在 templates 資料夾中，建立 about.html，使用程式碼片段插入樣板標記，在“title”和“content”塊中分別插入 關於我們 和 <p>Visual Studio Code Flask 教程的關於頁面。</p>，然後儲存檔案。

  4. 重複上一步，建立 templates/contact.html，在兩個內容塊中使用 聯絡我們 和 <p>Visual Studio Code Flask 教程的聯絡頁面。</p>。

  5. 在 app.py 中，為 /about/ 和 /contact/ 路由新增函式，引用它們各自的頁面模板。同時修改 home 函式以使用 home.html 模板。

    # Replace the existing home function with the one below
@app.route("/")
def home():
    return render_template("home.html")

# New functions
@app.route("/about/")
def about():
    return render_template("about.html")

@app.route("/contact/")
def contact():
    return render_template("contact.html")

執行應用

所有頁面模板都已就緒，儲存 app.py，執行應用，並在瀏覽器中開啟以檢視結果。在頁面之間導航，以驗證頁面模板是否正確地繼承了基礎模板。

Flask tutorial: app rendering a common nav bar from the base template

注意：如果您沒有看到最新的更改，您可能需要對頁面進行硬重新整理以避免看到快取的檔案。

可選活動

以下各節描述了在您使用 Python 和 Visual Studio Code 時可能會有幫助的其他步驟。

為環境建立一個 requirements.txt 檔案

當您透過原始碼控制或其他方式共享您的應用程式碼時，複製虛擬環境中的所有檔案是沒有意義的，因為接收者總是可以自己重新建立環境。

因此，開發人員通常會從原始碼控制中省略虛擬環境資料夾，而是使用 requirements.txt 檔案來描述應用的依賴項。

雖然您可以手動建立該檔案，但也可以使用 pip freeze 命令根據已啟用環境中安裝的確切庫來生成檔案：

  1. 使用 Python: Select Interpreter 命令選擇您想要的環境後，執行 Terminal: Create New Terminal 命令 (⌃⇧` (Windows, Linux Ctrl+Shift+`))) 開啟一個激活了該環境的終端。

  2. 在終端中，執行 pip freeze > requirements.txt 在您的專案資料夾中建立 requirements.txt 檔案。

任何收到專案副本的人（或任何構建伺服器）只需執行 pip install -r requirements.txt 命令即可在原始環境中重新安裝軟體包。（但接收者仍需建立自己的虛擬環境。）

注意：pip freeze 會列出您在當前環境中安裝的所有 Python 包，包括您當前未使用的包。該命令還會列出帶有確切版本號的包，您可能希望將其轉換為範圍以便將來更具靈活性。更多資訊，請參閱 pip 命令文件中的需求檔案。

重構專案以支援進一步開發

在整個 Flask 教程中，所有的應用程式碼都包含在一個 app.py 檔案中。為了便於進一步開發和分離關注點，將 app.py 的各個部分重構到不同的檔案中是很有幫助的。

  1. 在您的專案資料夾中，為應用建立一個資料夾，例如 hello_app，以將其檔案與專案級檔案（如 requirements.txt 和 VS Code 儲存設定和除錯配置檔案的 .vscode 資料夾）分開。

  2. 將 static 和 templates 資料夾移動到 hello_app 中，因為這些資料夾當然包含應用程式碼。

  3. 在 hello_app 資料夾中，建立一個名為 views.py 的檔案，其中包含路由和檢視函式：

    from flask import Flask
from flask import render_template
from datetime import datetime
from . import app

@app.route("/")
def home():
    return render_template("home.html")

@app.route("/about/")
def about():
    return render_template("about.html")

@app.route("/contact/")
def contact():
    return render_template("contact.html")

@app.route("/hello/")
@app.route("/hello/<name>")
def hello_there(name = None):
    return render_template(
        "hello_there.html",
        name=name,
        date=datetime.now()
    )

@app.route("/api/data")
def get_data():
    return app.send_static_file("data.json")

  4. 在 hello_app 資料夾中，建立一個名為 __init__.py 的檔案，內容如下：

    import flask
app = flask.Flask(__name__)

  5. 在 hello_app 資料夾中，建立一個名為 webapp.py 的檔案，內容如下：

    # Entry point for the application.
from . import app    # For application discovery by the 'flask' command.
from . import views  # For import side-effects of setting up routes.

  6. 開啟除錯配置檔案 launch.json 並更新 env 屬性，如下所示，以指向啟動物件：

    "env": {
    "FLASK_APP": "hello_app.webapp"
},

  7. 刪除專案根目錄中原始的 app.py 檔案，因為其內容已移至其他應用檔案中。

  8. 您的專案結構現在應該類似於以下內容：

    Flask tutorial: modified project structure with separate files and folders for parts of the app

  9. 再次在偵錯程式中執行應用，以確保一切正常。要在 VS Code 偵錯程式之外執行應用，請在終端中執行以下步驟：

    1. 為 FLASK_APP 設定一個環境變數。在 Linux 和 macOS 上，使用 export set FLASK_APP=webapp；在 Windows 上，如果您使用 PowerShell，則使用 $env:FLASK_APP=webapp，如果您使用命令提示符，則使用 set FLASK_APP=webapp。
    2. 導航到 hello_app 資料夾，然後使用 python -m flask run 啟動程式。

使用容器工具擴充套件為 Flask 應用建立容器

容器工具擴充套件使得從 Visual Studio Code 構建、管理和部署容器化應用程式變得容易。如果您有興趣學習如何為本教程中開發的 Flask 應用建立 Python 容器，請檢視容器中的 Python 教程，該教程將引導您完成以下操作：

  • 建立一個描述簡單 Python 容器的 Dockerfile 檔案。
  • 構建、執行並驗證一個 Flask 應用的功能。
  • 除錯在容器中執行的應用程式。

如果你有任何問題，可以在 Python 擴充套件討論問答中搜索答案或提問。

後續步驟

恭喜您完成了在 Visual Studio Code 中使用 Flask 的本教程！

本教程的完整程式碼專案可以在 GitHub 上找到：python-sample-vscode-flask-tutorial。

由於本教程僅觸及了頁面模板的皮毛，請參閱 Jinja2 文件以獲取有關模板的更多資訊。模板設計器文件包含了模板語言的所有細節。您可能還想回顧官方 Flask 教程以及 Flask 擴充套件的文件。

要在生產網站上試用您的應用，請檢視教程使用 Docker 容器將 Python 應用部署到 Azure 應用服務。Azure 還提供了一個標準容器，即Linux 上的應用服務，您可以從 VS Code 中將 Web 應用部署到該服務。

您可能還想檢視 VS Code 文件中與 Python 相關的以下文章：

09/11/2025