現已釋出！閱讀關於 11 月新增功能和修復的內容。

Visual Studio Code 中的 Django 教程

Django 是一個高階 Python 框架，專為快速、安全、可擴充套件的 Web 開發而設計。Django 包含對 URL 路由、頁面模板和資料處理的豐富支援。

在本 Django 教程中，您將建立一個簡單的 Django 應用，包含三個頁面，這些頁面使用一個通用的基礎模板。您將在 Visual Studio Code 的上下文中建立此應用，以便了解如何在 VS Code 終端、編輯器和偵錯程式中使用 Django。本教程不探討 Django 本身的各種細節，例如處理資料模型和建立管理介面。有關這些方面的指導，請參閱本教程末尾的 Django 文件連結。

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

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

先決條件

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

  1. 安裝 Python 擴充套件。

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

    • (所有作業系統) 從python.org下載；通常使用頁面上出現的“**Download Python 3.9.1**”按鈕（或最新版本）。
    • （Linux）內建的 Python 3 安裝效果很好，但要安裝其他 Python 包，您必須在終端中執行 sudo apt install python3-pip。
    • (macOS) 使用 `brew install python3` 透過Homebrew在 macOS 上安裝（不支援 macOS 上的系統 Python 安裝）。
    • （所有作業系統）從 Anaconda 下載（用於資料科學目的）。

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

為 Django 教程建立專案環境

在本節中，您將建立一個安裝了 Django 的虛擬環境。使用虛擬環境可以避免將 Django 安裝到全域性 Python 環境中，並讓您精確控制應用程式中使用的庫。虛擬環境還可以方便地建立環境的 requirements.txt 檔案。

  1. 在檔案系統中，為本教程建立一個專案資料夾，例如 `hello_django`。

  2. 在該資料夾中，根據您的計算機使用以下命令（根據您的計算機選擇），基於當前直譯器建立一個名為 `.venv` 的虛擬環境。

    # Linux
sudo apt-get install python3-venv    # If needed
python3 -m venv .venv
source .venv/bin/activate

# macOS
python3 -m venv .venv
source .venv/bin/activate

# Windows
py -3 -m venv .venv
.venv\scripts\activate

    注意：執行上述命令時，請使用標準的 Python 安裝。如果使用 Anaconda 安裝中的 `python.exe`，您會看到一個錯誤，因為 ensurepip 模組不可用，並且環境將處於未完成狀態。

  3. 透過執行 `code .` 或啟動 VS Code 並使用“**File**”>“**Open Folder**”命令，在 VS Code 中開啟專案資料夾。

  4. 在 VS Code 中，開啟命令面板（**View** > **Command Palette** 或（⇧⌘P (Windows, Linux Ctrl+Shift+P)））。然後選擇“**Python: Select Interpreter**”命令。

    Django tutorial: opening the Command Palette in VS Code

  5. 該命令會顯示 VS Code 可以自動找到的可用直譯器列表（您的列表會有所不同；如果未看到所需的直譯器，請參閱配置 Python 環境）。從列表中，選擇專案資料夾中以 `./.venv` 或 `.\.venv` 開頭的虛擬環境。

    Django tutorial: Selecting the virtual environment for Python

  6. 從命令面板執行 **Terminal: Create New Terminal** （⌃⇧` (Windows, Linux Ctrl+Shift+`)），它會建立一個終端並自動啟用虛擬環境，方法是執行其啟用指令碼。

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

  7. 所選環境會出現在 VS Code 狀態列的右側，並顯示 **(`.venv`: venv) ** 指示符，表明您正在使用虛擬環境。

    Django tutorial: selected environment showing in the VS Code status bar

  8. 在虛擬環境中更新 pip，方法是在 VS Code 終端中執行以下命令：

    python -m pip install --upgrade pip

  9. 在虛擬環境中安裝 Django，方法是在 VS Code 終端中執行以下命令：

    python -m pip install django

您現在擁有一個獨立的、可用於編寫 Django 程式碼的環境。當您使用 **Terminal: Create New Terminal** （⌃⇧` (Windows, Linux Ctrl+Shift+`)）時，VS Code 會自動啟用該環境。如果您開啟一個單獨的命令提示符或終端，請透過執行 `source .venv/bin/activate` (Linux/macOS) 或 `.venv\Scripts\Activate.ps1` (Windows) 來啟用該環境。當命令提示符顯示 **(.venv)** 時，您就知道環境已啟用。

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

在 Django 術語中，“Django 專案”由多個站點級別的配置檔案以及一個或多個“應用”組成，這些應用部署到 Web 主機以建立完整的 Web 應用程式。一個 Django 專案可以包含多個應用，每個應用通常在專案中具有獨立的功能，並且同一個應用也可以存在於多個 Django 專案中。而一個應用只是一個遵循 Django 期望的特定約定的 Python 包。

因此，要建立一個最小化的 Django 應用，首先需要建立 Django 專案作為應用的容器，然後建立應用本身。對於這兩個目的，您將使用 Django 的管理工具 `django-admin`，它在安裝 Django 包時會被安裝。

建立 Django 專案

  1. 在激活了虛擬環境的 VS Code 終端中，執行以下命令：

    django-admin startproject web_project .

    此 `startproject` 命令（透過末尾的 `.`）假定當前資料夾是您的專案資料夾，並在其中建立以下內容：

    • `manage.py`：專案的 Django 命令列管理工具。您可以使用 `python manage.py <command> [options]` 來執行專案的管理命令。

    • 一個名為 `web_project` 的子資料夾，其中包含以下檔案：

      • `__init__.py`：一個空檔案，告訴 Python 此資料夾是一個 Python 包。
      • `asgi.py`：ASGI 相容的 Web 伺服器用於提供您的專案的入口點。您通常會保留此檔案不變，因為它提供了生產 Web 伺服器的掛鉤。
      • `settings.py`：包含 Django 專案的設定，您將在開發 Web 應用的過程中修改這些設定。
      • `urls.py`：包含 Django 專案的目錄，您也將在開發過程中修改此檔案。
      • `wsgi.py`：WSGI 相容的 Web 伺服器用於提供您的專案的入口點。您通常會保留此檔案不變，因為它提供了生產 Web 伺服器的掛鉤。

  2. 透過執行以下命令建立空的開發資料庫：

    python manage.py migrate

    當您第一次執行伺服器時，它會在 `db.sqlite3` 檔案中建立一個預設的 SQLite 資料庫，該資料庫用於開發目的，但也可用於低流量的生產 Web 應用。有關資料庫的更多資訊，請參閱資料庫型別部分。

  3. 要驗證 Django 專案，請確保您的虛擬環境已啟用，然後使用命令 `python manage.py runserver` 啟動 Django 的開發伺服器。伺服器預設執行在 8000 埠，您將在終端視窗中看到類似以下的輸出：

    Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
June 13, 2023 - 18:38:07
Django version 4.2.2, using settings 'web_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

    Django 內建的 Web 伺服器**僅**用於本地開發目的。但是，當您部署到 Web 主機時，Django 會改用主機的 Web 伺服器。Django 專案中的 `wsgi.py` 和 `asgi.py` 模組負責掛接到生產伺服器。

    如果您想使用與預設的 8000 埠不同的埠，請在命令列中指定埠號，例如 `python manage.py runserver 5000`。

  4. Ctrl+click 終端輸出視窗中的 `http://127.0.0.1:8000/` URL，在預設瀏覽器中開啟該地址。如果 Django 已正確安裝且專案有效，您將看到如下所示的預設頁面。VS Code 終端輸出視窗還會顯示伺服器日誌。

    Django tutorial: default view of empty Django project

  5. 完成後，關閉瀏覽器視窗，並在 VS Code 中使用 Ctrl+C 停止伺服器，如終端輸出視窗所示。

建立 Django 應用

  1. 在激活了虛擬環境的 VS Code 終端中，在專案資料夾（`manage.py` 所在的位置）中執行管理工具的 `startapp` 命令：

    python manage.py startapp hello

    該命令會建立一個名為 `hello` 的資料夾，其中包含多個程式碼檔案和一個子資料夾。其中，您經常會用到 `views.py`（包含定義 Web 應用頁面的函式）和 `models.py`（包含定義資料物件的類）。`migrations` 資料夾由 Django 的管理工具用於管理資料庫版本，這一點將在本教程後面討論。還有 `apps.py`（應用配置）、`admin.py`（用於建立管理介面）以及 `tests.py`（用於建立測試）等檔案，此處不贅述。

  2. 修改 `hello/views.py` 以匹配以下程式碼，它為應用的首頁建立一個檢視：

    from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")

  3. 建立一個檔案 `hello/urls.py`，內容如下。`urls.py` 檔案用於指定將不同 URL 路由到相應檢視的模式。以下程式碼包含一條路由，將應用的根 URL（`""`）對映到您剛新增到 `hello/views.py` 的 `views.home` 函式。

    from django.urls import path
from hello import views

urlpatterns = [
    path("", views.home, name="home"),
]

  4. `web_project` 資料夾還包含一個 `urls.py` 檔案，這是實際處理 URL 路由的地方。開啟 `web_project/urls.py` 並修改它以匹配以下程式碼（您可以保留解釋性註釋）。此程式碼使用 `django.urls.include` 引入應用的 `hello/urls.py`，從而將應用的路由保留在應用內部。當專案包含多個應用時，這種分離非常有用。

    from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("", include("hello.urls")),
    path('admin/', admin.site.urls)
]

  5. 儲存所有修改過的檔案。

  6. 在 VS Code 終端中，再次啟用虛擬環境，然後執行開發伺服器 `python manage.py runserver`，並在瀏覽器中開啟 `http://127.0.0.1:8000/`，您將看到一個渲染“Hello, Django”的頁面。

    Django tutorial: the basic Django app running in a browser

建立偵錯程式啟動配置檔案

您可能已經在想，是否有更簡單的方法來執行伺服器和測試應用，而無需每次都鍵入 `python manage.py runserver`。幸運的是，有！您可以在 VS Code 中建立一個自定義的啟動配置檔案，該配置檔案也用於除錯。

  1. 切換到 VS Code 的 **Run** 檢視（使用左側活動欄或 F5）。您可能會看到“To customize Run and Debug create a launch.json file”的訊息。這意味著您還沒有包含除錯配置的 `launch.json` 檔案。如果您單擊“**create a launch.json file**”連結，VS Code 可以為您建立它。

    Django tutorial: initial view of the debug panel

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

  3. 向下滾動並檢查名為“Python: Django”的配置。

    {
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python Debugger: Django",
      "type": "debugpy",
      "request": "launch",
      "program": "${workspaceFolder}\\manage.py",
      "args": ["runserver"],
      "django": true,
      "justMyCode": true
    }
  ]
}

    此配置告訴 VS Code 使用選定的 Python 直譯器和 `args` 列表中的引數來執行 `"${workspaceFolder}/manage.py"`。因此，使用此配置啟動 VS Code 偵錯程式就等於在 VS Code 終端中執行 `python manage.py runserver`，同時激活了虛擬環境。（如果您願意，可以在 `args` 中新增埠號，如 `"5000"`。）`"django": true` 條目還告訴 VS Code 啟用 Django 頁面模板的除錯，這將在本教程稍後看到。

  4. 透過選擇 **Run** > **Start Debugging** 選單命令，或選擇列表旁邊的綠色 **Start Debugging** 箭頭（F5）來測試配置。

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

  5. Ctrl+click 終端輸出視窗中的 `http://127.0.0.1:8000/` URL，在瀏覽器中開啟並檢視應用是否正常執行。

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

  7. 現在，您可以隨時使用 **Run** > **Start Debugging** 來測試應用，這還有一個好處是可以自動儲存所有修改過的檔案。

探索偵錯程式

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

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

  1. 在 `hello/urls.py` 中，向 `urlpatterns` 列表新增一個路由：

    path("hello/<name>", views.hello_there, name="hello_there"),

    `path` 的第一個引數定義了一個名為“hello/”的路由，該路由接受一個名為 `name` 的變數字串。該字串被傳遞給 `path` 的第二個引數指定的 `views.hello_there` 函式。

    URL 路由是區分大小寫的。例如，路由 `/hello/<name>` 與 `/Hello/<name>` 是不同的。如果您希望同一個檢視函式處理這兩種情況，請為每種變體定義路徑。

  2. 將 `views.py` 的內容替換為以下程式碼，以定義您可以在偵錯程式中逐步執行的 `hello_there` 函式：

    import re
from django.utils.timezone import datetime
from django.http import HttpResponse

def home(request):
    return HttpResponse("Hello, Django!")

def hello_there(request, 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 HttpResponse(content)

    URL 路由中定義的 `name` 變數作為引數傳遞給 `hello_there` 函式。如程式碼註釋中所述，始終過濾任意使用者提供的資訊，以避免對您的應用進行各種攻擊。在這種情況下，程式碼過濾 `name` 引數，使其僅包含字母，從而避免注入控制字元、HTML 等。（當您在下一節中使用模板時，Django 會進行自動過濾，您不需要這段程式碼。）

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

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

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

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

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

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

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

    Django tutorial: appearance of the debugging status bar

    還會出現一個除錯工具欄（如下所示），其中包含以下順序的命令：Pause (or Continue, F5), Step Over (F10), Step Into (F11), Step Out (⇧F11 (Windows, Linux Shift+F11)), Restart (⇧⌘F5 (Windows, Linux Ctrl+Shift+F5)), and Stop (⇧F5 (Windows, Linux Shift+F5))。有關每個命令的說明，請參閱VS Code 除錯。

    Django tutorial: the VS Code debug toolbar

  5. 輸出顯示在“Python Debug Console”終端中。開啟瀏覽器並導航到 `http://127.0.0.1:8000/hello/VSCode`。在頁面渲染之前，VS Code 會在您設定的斷點處暫停程式。斷點上的黃色小箭頭表示這是下一行要執行的程式碼。

    Django tutorial: VS Code paused at a breakpoint

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

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

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

  8. 當程式暫停時，“Debug Console”面板（與終端面板中的“Python Debug Console”不同）允許您使用當前程式狀態嘗試表示式並執行程式碼片段。例如，在單步執行完 `now = datetime.now()` 這一行後，您可以嘗試不同的日期/時間格式。在編輯器中，選擇讀取 `now.strftime("%A, %d %B, %Y at %X")` 的程式碼，然後右鍵單擊並選擇 “Debug: Evaluate” 將該程式碼傳送到除錯控制檯，並在那裡執行。

    now.strftime("%A, %d %B, %Y at %X")
'Friday, 07 September, 2018 at 07:46:32'

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

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

    now.strftime("%A, %d %B, %Y at %X")
'Tuesday, 13 June, 2023 at 18:03:19'
now.strftime("%a, %d %b, %Y at %X")
'Tue, 13 Jun, 2023 at 18:03:19'
now.strftime("%a, %d %b, %y at %X")
'Tue, 13 Jun, 23 at 18:03:19'

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

    Django tutorial: result of the modified program

  11. 將程式碼中的行更改為使用不同的 datetime 格式，例如 `now.strftime("%a, %d %b, %y at %X")`，然後儲存檔案。Django 伺服器將自動重新載入，這意味著更改將在無需重新啟動偵錯程式的情況下應用。重新整理瀏覽器中的頁面以檢視更新。

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

提示：為了更方便地反覆導航到特定 URL，如 `http://127.0.0.1:8000/hello/VSCode`，請在 `views.py` 等檔案中使用 `print` 語句輸出該 URL。URL 將顯示在 VS Code 終端中，您可以在那裡使用 Ctrl+click 在瀏覽器中開啟它。

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

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

  • **Go to Definition** 從您的程式碼跳轉到定義物件的程式碼。例如，在 `views.py` 中，右鍵單擊 `home` 函式中的 `HttpResponse` 並選擇 **Go to Definition**（或使用 F12），這將導航到 Django 庫中的類定義。

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

    Django tutorial: Peek Definition showing the Flask class inline

使用模板渲染頁面

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

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

在 Django 中，模板是一個 HTML 檔案，其中包含程式碼在執行時提供的值的佔位符。Django 模板引擎隨後會在渲染頁面時負責進行替換，並提供自動轉義以防止 XSS 攻擊（也就是說，如果您嘗試在資料值中使用 HTML，您只會看到 HTML 作為純文字渲染）。因此，程式碼只關注資料值，模板只關注標記。Django 模板提供靈活的選項，例如模板繼承，它允許您定義一個包含通用標記的基礎頁面，然後在此基礎上構建特定頁面的新增項。

在本節中，您將從建立一個使用模板的單個頁面開始。在隨後的部分中，您將配置應用以提供靜態檔案，然後為應用建立多個頁面，每個頁面都包含一個來自基礎模板的導航欄。Django 模板還支援控制流和迭代，您將在本教程後面在模板除錯的上下文中看到這一點。

  1. 在 `web_project/settings.py` 檔案中，找到 `INSTALLED_APPS` 列表並新增以下條目，這可以確保專案知道該應用，以便它可以處理模板：

    'hello',

  2. 在 `hello` 資料夾內，建立一個名為 `templates` 的資料夾，然後建立一個名為 `hello` 的子資料夾，以匹配應用名稱（這種兩層資料夾結構是 Django 的典型約定）。

  3. 在 `templates/hello` 資料夾中，建立一個名為 `hello_there.html` 的檔案，內容如下。此模板包含兩個名為“name”和“date”的資料值佔位符，這些佔位符用一對大括號 `{{` 和 `}}` 分隔。所有其他不變文字都是模板的一部分，以及格式化標記（例如 `<strong>`）。正如您所看到的，模板佔位符還可以包含格式化，即管道符號 `|` 之後的表示式，在本例中使用了 Django 內建的date 過濾器和time 過濾器。因此，程式碼只需要傳遞 datetime *值*而不是預格式化的字串。

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello, Django</title>
    </head>
    <body>
        <strong>Hello there, {{ name }}!</strong> It's {{ date | date:"l, d F, Y" }} at {{ date | time:"H:i:s" }}
    </body>
</html>

  4. 在 `views.py` 的頂部，新增以下匯入語句：

    from django.shortcuts import render

  5. 同樣在 `views.py` 中，修改 `hello_there` 函式以使用 `django.shortcuts.render` 方法來載入模板並提供*模板上下文*。上下文是在模板中使用的變數集合。`render` 函式接收請求物件，然後是模板的路徑*相對於 `templates` 資料夾*，然後是上下文物件。（開發者通常將模板命名為與使用它們的函式相同，但不需要匹配的名稱，因為您始終在程式碼中引用確切的檔名。）

    def hello_there(request, name):
    print(request.build_absolute_uri()) #optional
    return render(
        request,
        'hello/hello_there.html',
        {
            'name': name,
            'date': datetime.now()
        }
    )

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

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

  7. 還可以嘗試導航到 `/hello/name` URL，使用類似 `<a%20value%20that%20could%20be%20HTML>` 的名稱，以檢視 Django 的自動轉義功能。在瀏覽器中，“name”值顯示為純文字，而不是渲染實際的 HTML 元素。

提供靜態檔案

靜態檔案是 Web 應用為特定請求（如 CSS 檔案）按原樣返回的內容。提供靜態檔案需要 `settings.py` 中的 `INSTALLED_APPS` 列表包含 `django.contrib.staticfiles`，它預設包含在內。

在 Django 中提供靜態檔案本身是一門藝術，尤其是在部署到生產環境時。此處所示是一種簡單的方法，該方法適用於 Django 開發伺服器以及 Gunicorn 等生產伺服器。然而，靜態檔案的完整處理超出了本教程的範圍，因此有關更多資訊，請參閱 Django 文件中的管理靜態檔案。

切換到生產環境時，導航到 `settings.py`，將 `DEBUG=False`，並將 `ALLOWED_HOSTS = ['*']` 更改為允許特定主機。在使用容器時，這可能會導致額外的工作。有關詳細資訊，請參閱Issue 13。

準備應用以處理靜態檔案

  1. 在專案的 `web_project/urls.py` 中，新增以下 `import` 語句：

    from django.contrib.staticfiles.urls import staticfiles_urlpatterns

  2. 在同一檔案中，在末尾新增以下行，該行將標準的靜態檔案 URL 新增到專案識別的列表中：

    urlpatterns += staticfiles_urlpatterns()

在模板中引用靜態檔案

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

  2. 在 `static` 資料夾內，建立一個名為 `hello` 的子資料夾，以匹配應用名稱。

    需要這個額外的子資料夾的原因是，當您將 Django 專案部署到生產伺服器時，您會將所有靜態檔案收集到一個資料夾中，然後由一個專門的靜態檔案伺服器提供服務。`static/hello` 子資料夾確保在收集應用靜態檔案時，它們會放在一個特定於應用的子資料夾中，並且不會與其他專案中的應用檔案發生衝突。

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

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

  4. 在 `templates/hello/hello_there.html` 中，在 `<title>` 元素之後新增以下行。`{% load static %}` 標籤是一組自定義的 Django 模板標籤，允許您使用 `{% static %}` 來引用樣式表等檔案。

    {% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'hello/site.css' %}" />

  5. 同樣在 `templates/hello/hello_there.html` 中，將 `<body>` 元素的內容替換為以下標記，該標記使用 `message` 樣式而不是 `<strong>` 標籤：

    <span class="message">Hello, there {{ name }}!</span> It's {{ date | date:'l, d F, Y' }} at {{ date | time:'H:i:s' }}.

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

使用 `collectstatic` 命令

對於生產部署，您通常使用 `python manage.py collectstatic` 命令將所有靜態檔案從您的應用收集到一個資料夾中。然後，您可以使用專用的靜態檔案伺服器來提供這些檔案，這通常會提高整體效能。以下步驟展示瞭如何進行此收集，儘管您在使用 Django 開發伺服器執行時不使用此收集。

  1. 在 `web_project/settings.py` 中，新增以下行，該行定義了在使用 `collectstatic` 命令時靜態檔案被收集到的位置：

    STATIC_ROOT = BASE_DIR / 'static_collected'

  2. 在終端中，執行命令 `python manage.py collectstatic`，並觀察 `hello/site.css` 是否已複製到 `manage.py` 同級的頂層 `static_collected` 資料夾中。

  3. 實際上，在更改靜態檔案後以及在部署到生產環境之前，都會執行 `collectstatic`。

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

由於大多數 Web 應用都有多個頁面，並且這些頁面通常共享許多通用元素，因此開發者會將這些通用元素分離到一個基礎頁面模板中，然後其他頁面模板會繼承該模板。（這也稱為模板繼承，意味著被繼承的頁面從基礎頁面繼承元素。）

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

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

建立基礎頁面模板和樣式

Django 中的基礎頁面模板包含一組頁面的所有共享部分，包括對 CSS 檔案、指令碼檔案等的引用。基礎模板還定義了一個或多個**塊**標籤，供繼承的模板覆蓋。塊標籤在基礎模板和繼承模板中都用 `{% block <name> %}` 和 `{% endblock %}` 分隔。

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

  1. 在 `templates/hello` 資料夾中，建立一個名為 `layout.html` 的檔案，內容如下，其中包含名為“title”和“content”的塊。正如您所看到的，標記定義了一個簡單的導航欄結構，其中包含指向“Home”、“About”和“Contact”頁面的連結，您將在後續部分建立這些頁面。請注意使用 Django 的 `{% url %}` 標籤透過相應 URL 模式的名稱而不是相對路徑來引用其他頁面。

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

<body>
<div class="navbar">
    <a href="{% url 'home' %}" class="navbar-brand">Home</a>
    <a href="{% url 'about' %}" class="navbar-item">About</a>
    <a href="{% url '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/hello/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 中，選擇 **File** (Windows/Linux) 或 **Code** (macOS) 選單，然後選擇 **Preferences** > **User snippets**。

  2. 在出現的列表中，選擇 **html**。（如果您之前建立過片段，則該選項可能顯示為列表的“Existing Snippets”部分中的“html.json”。）

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

    "Django Tutorial: template extending layout.html": {
    "prefix": "djextlayout",
    "body": [
        "{% extends \"hello/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. 現在，每當您開始鍵入片段的字首，例如 `djext` 時，VS Code 都會提供該片段作為自動完成選項，如下一節所示。您還可以使用“Insert Snippet”命令從選單中選擇一個片段。

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

使用程式碼片段新增頁面

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

  1. 在 `templates/hello` 資料夾中，建立一個名為 `home.html` 的新檔案。然後開始鍵入 `djext`，您將看到片段作為完成選項出現。

    Django tutorial: autocompletion for the djextlayout code snippet

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

    Django tutorial: insertion of the djextlayout code snippet

  2. 在“title”塊的插入點，輸入 `Home`；在“content”塊中，輸入 `<p>Home page for the Visual Studio Code Django tutorial.</p>`，然後儲存檔案。這些行是擴充套件頁面模板中唯一獨特的部分。

  3. 在 `templates/hello` 資料夾中，建立 `about.html`，使用片段插入樣板標記，分別在“title”和“content”塊中插入 `About us` 和 `<p>About page for the Visual Studio Code Django tutorial.</p>`，然後儲存檔案。

  4. 重複上一步，建立 `templates/hello/contact.html`，使用 `Contact us` 和 `<p>Contact page for the Visual Studio Code Django tutorial.</p>`。

  5. 在應用的 `urls.py` 中，為 `/about` 和 `/contact` 頁面新增路由。請注意，`path` 函式的 `name` 引數定義了您在模板的 `{% url %}` 標籤中引用頁面的名稱。

    path("about/", views.about, name="about"),
path("contact/", views.contact, name="contact"),

  6. 在 `views.py` 中，為 `/about` 和 `/contact` 路由新增函式，這些函式引用各自的頁面模板。同時修改 `home` 函式以使用 `home.html` 模板。

    # Replace the existing home function with the one below
def home(request):
    return render(request, "hello/home.html")

def about(request):
    return render(request, "hello/about.html")

def contact(request):
    return render(request, "hello/contact.html")

執行應用

在所有頁面模板就位後，儲存 `views.py`，執行應用，並在瀏覽器中開啟首頁以檢視結果。在頁面之間導航，以驗證頁面模板是否正確擴充套件了基礎模板。

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

處理資料、資料模型和遷移

許多 Web 應用都處理儲存在資料庫中的資訊，Django 可以輕鬆地使用*模型*來表示資料庫中的物件。在 Django 中，模型是一個派生自 `django.db.models.Model` 的 Python 類，它代表一個特定的資料庫物件，通常是一個表。您將這些類放在應用的 `models.py` 檔案中。

使用 Django，您幾乎完全透過程式碼中定義模型來處理資料庫。Django 的“遷移”會在您隨著時間的推移演變模型時自動處理底層資料庫的所有細節。一般工作流程如下：

  1. 在 `models.py` 檔案中更改模型。
  2. 執行 `python manage.py makemigrations` 以生成 `migrations` 資料夾中的指令碼，這些指令碼會將資料庫從當前狀態遷移到新狀態。
  3. 執行 `python manage.py migrate` 以將指令碼應用於實際資料庫。

遷移指令碼有效地記錄了您隨時間對資料模型所做的所有增量更改。透過應用遷移，Django 會更新資料庫以匹配您的模型。由於每個增量更改都有自己的指令碼，Django 可以自動遷移*任何*先前版本的資料庫（包括新資料庫）到當前版本。因此，您只需關注 `models.py` 中的模型，而不必關心底層資料庫模式或遷移指令碼。讓 Django 完成那部分工作！

在程式碼中，您也只通過模型類來儲存和檢索資料；Django 會處理底層細節。唯一的例外是，您可以使用 Django 管理工具loaddata 命令將資料寫入資料庫。在 `migrate` 命令初始化了架構之後，通常會使用此實用程式來初始化資料集。

在使用 `db.sqlite3` 檔案時，您還可以使用SQLite 瀏覽器等工具直接處理資料庫。使用此類工具新增或刪除表中的記錄是可以的，但要避免更改資料庫模式，因為這樣資料庫將與您應用的模型不同步。相反，請更改模型，執行 `makemigrations`，然後執行 `migrate`。

資料庫型別

預設情況下，Django 會為應用的資料庫包含一個 `db.sqlite3` 檔案，該檔案適用於開發工作。如何時使用 SQLite (sqlite.org) 中所述，SQLite 對於每天訪問量少於 10 萬次的低到中流量網站效果很好，但不推薦用於更高流量的網站。它也僅限於一臺計算機，因此不能用於任何多伺服器場景，例如負載均衡和地理複製。

因此，請考慮使用生產級別的資料庫，如PostgreSQL、MySQL 和SQL Server。有關 Django 對其他資料庫的支援資訊，請參閱資料庫設定。您還可以使用適用於 Python 的 Azure SDK來處理 Azure 儲存服務，如表和 blob。

定義模型

Django 模型再次是一個派生自 `django.db.model.Models` 的 Python 類，您將其放在應用的 `models.py` 檔案中。在資料庫中，每個模型都會自動獲得一個名為 `id` 的唯一 ID 欄位。所有其他欄位都定義為使用 `django.db.models` 中的型別（如 `CharField`（文字限制）、`TextField`（文字不限）、`EmailField`、`URLField`、`IntegerField`、`DecimalField`、`BooleanField`、`DateTimeField`、`ForeignKey` 和 `ManyToMany` 等）的類的屬性。（有關詳細資訊，請參閱 Django 文件中的模型欄位參考。）

每個欄位都包含一些屬性，例如 max_length。blank=True 屬性表示欄位是可選的；null=true 表示值是可選的。還有一個 choices 屬性，用於將值限制在資料值/顯示值元組陣列中的值。

例如，在 models.py 中新增以下類來定義一個數據模型，該模型代表簡單訊息日誌中的日期條目。

from django.db import models
from django.utils import timezone

class LogMessage(models.Model):
    message = models.CharField(max_length=300)
    log_date = models.DateTimeField("date logged")

    def __str__(self):
        """Returns a string representation of a message."""
        date = timezone.localtime(self.log_date)
        return f"'{self.message}' logged on {date.strftime('%A, %d %B, %Y at %X')}"

模型類可以包含返回根據其他類屬性計算出的值的函式。模型通常包含一個 __str__ 方法，該方法返回例項的字串表示形式。

遷移資料庫

由於您透過編輯 models.py 更改了資料模型，因此需要更新資料庫本身。在 VS Code 中，開啟一個已啟用虛擬環境的終端（使用 Terminal: Create New Terminal 命令，⌃⇧` (Windows、Linux Ctrl+Shift+`)），導航到專案資料夾，然後執行以下命令。

python manage.py makemigrations
python manage.py migrate

檢視 migrations 資料夾，瞭解 makemigrations 生成的指令碼。您還可以檢視資料庫本身，瞭解架構已更新。

如果在執行命令時看到錯誤，請確保不要使用先前步驟中遺留的除錯終端，因為它們可能沒有啟用虛擬環境。

透過模型使用資料庫

在模型就位並資料庫遷移後，您就可以僅使用模型來儲存和檢索資料。在本節中，您將嚮應用新增一個表單頁面，透過該頁面可以記錄一條訊息。然後，您將修改主頁以顯示這些訊息。由於您將在此處修改多個程式碼檔案，請注意細節。

  1. 在 hello 資料夾（您有 views.py 的地方）中，建立一個名為 forms.py 的新檔案，其中包含以下程式碼，該程式碼定義了一個 Django 表單，其中包含一個來自資料模型 LogMessage 的欄位。

    from django import forms
from hello.models import LogMessage

class LogMessageForm(forms.ModelForm):
    class Meta:
        model = LogMessage
        fields = ("message",)   # NOTE: the trailing comma is required

  2. 在 templates/hello 資料夾中，建立一個名為 log_message.html 的新模板，其中包含以下內容。該模板假定模板中提供了一個名為 form 的變數來定義表單主體。然後，它新增一個帶有“Log”標籤的提交按鈕。

    {% extends "hello/layout.html" %}
{% block title %}
    Log a message
{% endblock %}
{% block content %}
    <form method="POST" class="log-form">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="save btn btn-default">Log</button>
    </form>
{% endblock %}

    注意：Django 的 {% csrf_token %} 標籤可防止跨站請求偽造。有關詳細資訊，請參閱 Django 文件中的 跨站請求偽造保護。

  3. 在應用的 static/hello/site.css 檔案中，新增一個規則以使輸入表單更寬。

    input[name=message] {
    width: 80%;
}

  4. 在應用的 urls.py 檔案中，為新頁面新增一個路由。

    path("log/", views.log_message, name="log"),

  5. 在 views.py 中，定義名為 log_message 的檢視（如 URL 路由所引用的）。此檢視處理 HTTP GET 和 POST 情況。在 GET 情況（else: 部分）下，它僅顯示您在先前步驟中定義的表單。在 POST 情況下，它將表單中的資料檢索到資料物件（message）中，設定時間戳，然後儲存該物件，此時該物件將被寫入資料庫。

    # Add these to existing imports at the top of the file:
from django.shortcuts import redirect
from hello.forms import LogMessageForm
from hello.models import LogMessage

# Add this code elsewhere in the file:
def log_message(request):
    form = LogMessageForm(request.POST or None)

    if request.method == "POST":
        if form.is_valid():
            message = form.save(commit=False)
            message.log_date = datetime.now()
            message.save()
            return redirect("home")
    else:
        return render(request, "hello/log_message.html", {"form": form})

  6. 在準備好測試所有內容之前，還有最後一步！在 templates/hello/layout.html 中，“navbar” div 中為訊息日誌頁面新增一個連結。

    <!-- Insert below the link to Home -->
<a href="{% url 'log' %}" class="navbar-item">Log Message</a>

  7. 執行應用，並在瀏覽器中開啟主頁。在導航欄中選擇“Log Message”連結，此時應會顯示訊息日誌頁面。

    Django tutorial: the message logging page added to the app

  8. 輸入一條訊息，選擇“Log”，然後您將被帶回到主頁。主頁尚未顯示任何已記錄的訊息（您將在稍後解決此問題）。隨意記錄更多訊息。如果願意，可以使用 SQLite Browser 等工具檢視資料庫，以瞭解記錄已建立。以只讀模式開啟資料庫，或者記住在使用應用之前關閉資料庫，否則應用將因資料庫被鎖定而失敗。

  9. 完成後停止應用。

  10. 現在修改主頁以顯示已記錄的訊息。首先，用下面的標記替換應用 templates/hello/home.html 檔案的內容。此模板期望一個名為 message_list 的上下文變數。如果收到此變數（透過 {% if message_list %} 標籤檢查），則會遍歷該列表（{% for message in message_list %} 標籤）以生成每條訊息的表格行。否則，頁面將顯示尚未記錄任何訊息。

    {% extends "hello/layout.html" %}
{% block title %}
    Home
{% endblock %}
{% block content %}
    <h2>Logged messages</h2>

    {% if message_list %}
        <table class="message_list">
            <thead>
            <tr>
                <th>Date</th>
                <th>Time</th>
                <th>Message</th>
            </tr>
            </thead>
            <tbody>
            {% for message in message_list %}
                <tr>
                    <td>{{ message.log_date | date:'d M Y' }}</td>
                    <td>{{ message.log_date | time:'H:i:s' }}</td>
                    <td>
                        {{ message.message }}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% else %}
        <p>No messages have been logged. Use the <a href="{% url 'log' %}">Log Message form</a>.</p>
    {% endif %}
{% endblock %}

  11. 在 static/hello/site.css 中，新增一個規則以稍微格式化表格。

    .message_list th,td {
    text-align: left;
    padding-right: 15px;
}

  12. 在 views.py 中，匯入 Django 的通用 ListView 類，我們將使用它來實現主頁。

    from django.views.generic import ListView

  13. 同樣在 views.py 中，將 home 函式替換為派生自 ListView 的一個名為 HomeListView 的*類*，該類將自身繫結到 LogMessage 模型並實現一個 get_context_data 函式來生成模板的上下文。

    # Remove the old home function if you want; it's no longer used

class HomeListView(ListView):
    """Renders the home page, with a list of all messages."""
    model = LogMessage

    def get_context_data(self, **kwargs):
        context = super(HomeListView, self).get_context_data(**kwargs)
        return context

  14. 在應用的 urls.py 中，匯入資料模型。

    from hello.models import LogMessage

  15. 同樣在 urls.py 中，建立一個變數用於新檢視，該檢視檢索按降序排列的五個最新 LogMessage 物件（這意味著它會查詢資料庫），然後為模板上下文中的資料（message_list）提供一個名稱，並標識要使用的模板。

    home_list_view = views.HomeListView.as_view(
    queryset=LogMessage.objects.order_by("-log_date")[:5],  # :5 limits the results to the five most recent
    context_object_name="message_list",
    template_name="hello/home.html",
)

  16. 在 urls.py 中，修改主頁的路徑以使用 home_list_view 變數。

        # Replace the existing path for ""
    path("", home_list_view, name="home"),

  17. 啟動應用，並在瀏覽器中開啟主頁，此時應該會顯示訊息。

    Django tutorial: app home page displaying message from the database

  18. 完成後停止應用。

在頁面模板中使用偵錯程式

如上一節所示，頁面模板可以包含過程指令，例如 {% for message in message_list %} 和 {% if message_list %}，而不僅僅是被動、宣告性元素，例如 {% url %} 和 {% block %}。因此，您可能會在模板中遇到程式設計錯誤，就像在任何其他過程程式碼中一樣。

幸運的是，VS Code 的 Python 擴充套件在您具有除錯配置中的 "django": true（您已經有了）時提供了模板除錯。以下步驟演示了此功能。

  1. 在 templates/hello/home.html 中，在 {% if message_list %} 和 {% for message in message_list %} 行上設定斷點，如下圖所示的黃色箭頭。

    Django tutorial: breakpoints set in a Django page template

  2. 在偵錯程式中執行應用，並在瀏覽器中開啟主頁。（如果您已在執行偵錯程式，則無需在設定斷點後重新啟動應用；只需重新整理頁面即可。）請注意，VS Code 會在模板中的 {% if %} 語句處中斷偵錯程式，並在“Variables”窗格中顯示所有上下文變數。

    Django tutorial: debugger stopped at breakpoints in the page template

  3. 使用“Step Over”（F10）命令逐步執行模板程式碼。請注意，偵錯程式會跳過所有宣告性語句，並在任何過程程式碼處暫停。例如，逐步執行 {% for message in message_list %} 迴圈可讓您檢查 message 中的每個值，並讓您逐步執行到諸如 <td>{{ message.log_date | date:'d M Y' }}</td> 這樣的行。

  4. 您還可以使用“Debug Console”面板處理變數。（不過，像 date 這樣的 Django 過濾器目前在控制檯中不可用。）

  5. 準備就緒後，選擇“Continue”（F5）以完成應用執行，並在瀏覽器中檢視渲染的頁面。完成後停止偵錯程式。

可選活動

以下各節描述了在您使用 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 命令文件中的需求檔案。

建立 Django 應用的容器並啟用管理介面

預設情況下，Django 為受身份驗證保護的 Web 應用提供了一個管理介面。該介面是透過內建的 django.contrib.admin 應用實現的，該應用預設包含在專案的 INSTALLED_APPS 列表中（settings.py），並且身份驗證是透過內建的 django.contrib.auth 應用處理的，該應用也預設包含在 INSTALLED_APPS 中。

執行以下步驟以啟用管理介面。

  1. 透過開啟虛擬環境中的 VS Code 終端，然後執行命令 python manage.py createsuperuser --username=<username> --email=<email>，建立應用中的超級使用者帳戶，當然，請將 <username> 和 <email> 替換為您自己的資訊。執行命令時，Django 會提示您輸入並確認密碼。

    請務必記住您的使用者名稱和密碼組合。這些是您用於嚮應用進行身份驗證的憑據。

  2. 在專案級別的 urls.py（本教程中的 web_project/urls.py）中新增以下 URL 路由，以指向內建的管理介面。

    # This path is included by default when creating the app
 path("admin/", admin.site.urls),

  3. 執行伺服器，然後在瀏覽器中開啟應用的 /admin 頁面（例如，使用開發伺服器時為 http://127.0.0.1:8000/admin）。

  4. 出現登入頁面，由 django.contrib.auth 提供。輸入您的超級使用者憑據。

    Django tutorial: default Django login prompt

  5. 成功進行身份驗證後，您將看到預設的管理頁面，透過該頁面可以管理使用者和組。

    Django tutorial: the default Django administrative interface

您可以根據需要自定義管理介面。例如，您可以提供編輯和刪除資料庫條目的功能。有關自定義的更多資訊，請參閱 Django 管理站點文件。

使用 Container Tools 擴充套件建立 Django 應用的容器

Container Tools 擴充套件 使您可以輕鬆地從 Visual Studio Code 構建、管理和部署容器化應用程式。如果您有興趣瞭解如何為本教程開發的 Django 應用建立 Python 容器，請檢視 容器中的 Python 教程，該教程將引導您完成以下操作。

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

後續步驟

恭喜您完成了本教程中關於在 Visual Studio Code 中使用 Django 的內容！

本教程中已完成的程式碼專案可在 GitHub 上找到：python-sample-vscode-django-tutorial。

在本教程中，我們僅觸及了 Django 功能的表面。請務必訪問 Django 文件和 官方 Django 教程，瞭解有關檢視、模板、資料模型、URL 路由、管理介面、使用其他型別的資料庫、部署到生產環境等的更多詳細資訊。

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

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

12/10/2025
© . This site is unofficial and not affiliated with Microsoft.