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

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）在 macOS 上透過 Homebrew 使用 brew install python3 進行安裝（不支援 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 並使用 檔案 > 開啟資料夾 命令，在 VS Code 中開啟專案資料夾。

  4. 在 VS Code 中，開啟命令面板（檢視 > 命令面板 或 (⇧⌘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. 從命令面板執行 終端：建立新終端 (⌃⇧` (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. 透過在 VS Code 終端中執行以下命令來更新虛擬環境中的 pip：

    python -m pip install --upgrade pip

  9. 透過在 VS Code 終端中執行以下命令來在虛擬環境中安裝 Django：

    python -m pip install django

你現在有了一個獨立的、準備好編寫 Django 程式碼的環境。當你使用 終端：建立新終端 (⌃⇧` (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 並單擊 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 中的執行檢視（使用左側活動欄或 F5）。你可能會看到訊息“要自定義執行和除錯，請建立一個 launch.json 檔案”。這意味著你還沒有一個包含除錯配置的 launch.json 檔案。如果你點選建立 launch.json 檔案連結，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. 透過選擇執行 > 啟動除錯選單命令，或選擇列表旁邊的綠色啟動除錯箭頭 (F5) 來測試配置：

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

  5. 在終端輸出視窗中按住 Ctrl 並單擊 http://127.0.0.1:8000/ URL，以在瀏覽器中開啟，並看到應用正在正常執行。

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

  7. 你現在可以隨時使用執行 > 啟動除錯來測試應用，這還有一個好處，就是會自動儲存所有修改過的檔案。

探索偵錯程式

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

開始之前：請確保你已在上一節末尾透過在終端中使用 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

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

    Django tutorial: the VS Code debug toolbar

  5. 輸出會出現在一個“Python 除錯控制檯”終端中。開啟瀏覽器並導航到 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. 當程式暫停時，除錯控制檯面板（不同於終端面板中的“Python 除錯控制檯”）讓你能夠使用程式的當前狀態來試驗表示式和嘗試程式碼片段。例如，一旦你單步跳過了 now = datetime.now() 這一行，你就可以試驗不同的日期/時間格式。在編輯器中，選擇讀取 now.strftime("%A, %d %B, %Y at %X") 的程式碼，然後右鍵單擊並選擇除錯：求值，將該程式碼傳送到除錯控制檯，並在那裡執行：

    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. 更改程式碼中的那一行以使用不同的日期時間格式，例如 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+單擊 在瀏覽器中開啟它。

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

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

  • 轉到定義 從您的程式碼跳轉到定義物件的程式碼。例如，在 views.py 中，右鍵單擊 home 函式中的 HttpResponse 並選擇轉到定義（或使用 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 程式碼，這些程式碼最終會進入 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 的內建日期過濾器和時間過濾器。因此，程式碼只需傳遞日期時間值，而不是預先格式化的字串：

    <!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. 也可以嘗試使用像 <a%20value%20that%20could%20be%20HTML> 這樣的名稱導航到 /hello/name URL，看看 Django 的自動轉義是如何工作的。“name”值在瀏覽器中顯示為純文字，而不是渲染成一個實際的元素。

提供靜態檔案

靜態檔案是你的 Web 應用針對某些請求按原樣返回的內容片段，例如 CSS 檔案。提供靜態檔案需要 settings.py 中的 INSTALLED_APPS 列表包含 django.contrib.staticfiles，這在預設情況下是包含的。

在 Django 中提供靜態檔案有點像一門藝術，尤其是在部署到生產環境時。這裡展示的是一種適用於 Django 開發伺服器和像 Gunicorn 這樣的生產伺服器的簡單方法。然而，對靜態檔案的全面處理超出了本教程的範圍，因此更多資訊，請參閱 Django 文件中的管理靜態檔案。

切換到生產環境時，導航到 settings.py，設定 DEBUG=False，並將 ALLOWED_HOSTS = ['*'] 更改為允許特定主機。在使用容器時，這可能會導致額外的工作。有關詳細資訊，請參見問題 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”的塊。如你所見，該標記定義了一個簡單的導航欄結構，帶有指向主頁、關於和聯絡頁面的連結，你將在後面的部分建立這些頁面。請注意，這裡使用了 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 中，選擇檔案（Windows/Linux）或程式碼（macOS）選單，然後選擇首選項 > 使用者程式碼片段。

  2. 在出現的列表中，選擇 html。（如果您之前建立過程式碼片段，該選項可能會在列表的現有程式碼片段部分顯示為“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 就會將該程式碼片段作為自動完成選項提供，如下一節所示。你還可以使用插入程式碼片段命令從選單中選擇一個程式碼片段。

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

使用程式碼片段新增頁面

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

  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 中，模型是一個 Python 類，派生自 django.db.models.Model，它代表一個特定的資料庫物件，通常是一個表。你將這些類放在應用的 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 對其他資料庫支援的資訊，請參閱資料庫設定。你還可以使用 Azure SDK for Python 來操作 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 中，開啟一個已啟用虛擬環境的終端（使用終端：建立新終端命令，⌃⇧` (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. 執行應用並在瀏覽器中開啟主頁。選擇導航欄上的記錄訊息連結，應會顯示訊息記錄頁面：

    Django tutorial: the message logging page added to the app

  8. 輸入一條訊息，選擇記錄，你會被帶回到主頁。主頁目前還沒有顯示任何已記錄的訊息（我們稍後會解決這個問題）。你也可以隨時記錄更多的訊息。如果你願意，可以使用像 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 函式替換為一個名為 HomeListView 的類，該類派生自 ListView，它與 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 %} 這樣的被動、宣告性元素。因此，你可能會在模板中遇到程式設計錯誤，就像在任何其他過程程式碼中一樣。

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

  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 %} 語句處中斷除錯，並在變數窗格中顯示所有上下文變數：

    Django tutorial: debugger stopped at breakpoints in the page template

  3. 使用“單步跳過”(F10)命令來單步執行模板程式碼。觀察到偵錯程式會跳過所有宣告性語句，並在任何過程程式碼處暫停。例如，單步執行 {% for message in message_list %} 迴圈可以讓你檢查 message 中的每個值，並讓你單步執行到像 <td>{{ message.log_date | date:'d M Y' }}</td> 這樣的行。

  4. 你也可以在除錯控制檯面板中操作變數。（然而，像 date 這樣的 Django 過濾器目前在控制檯中不可用。）

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

可選活動

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

為環境建立 requirements.txt 檔案

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

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

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

  1. 使用 Python: 選擇直譯器 命令選擇您想要的環境後，執行 終端: 建立新終端 命令 (⌃⇧` (Windows, Linux Ctrl+Shift+`)) 以開啟一個已啟用該環境的終端。

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

任何收到專案副本的人（或任何構建伺服器）只需執行 pip install -r requirements.txt 命令，即可在活動環境中重新安裝應用所依賴的包。

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

建立超級使用者並啟用管理介面

預設情況下，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 管理站點文件。

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

容器工具擴充套件使得從 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 App Service。Azure 還提供一個標準容器，Linux 上的 App Service，你可以從 VS Code 內部將 Web 應用部署到該服務。

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

09/11/2025