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 擴充功能討論問答 (Discussions Q&A) 中搜尋解答或提問。

先決條件

若要順利完成此 Django 教學課程，您必須執行下列操作（與一般 Python 教學課程中的步驟相同）

安裝 Python 擴充功能。
安裝一個 Python 3 版本（本教學課程即基於此編寫）。選項包括
- (所有作業系統) 從 python.org 下載；通常使用頁面上最先出現的下載 Python 3.9.1 按鈕（或任何最新版本）。
- (Linux) 內建的 Python 3 安裝運作良好，但若要安裝其他 Python 套件，您必須在終端機中執行 sudo apt install python3-pip。
- (macOS) 使用 brew install python3 透過 macOS 上的 Homebrew 進行安裝（不支援 macOS 系統內建的 Python 安裝）。
- (所有作業系統) 從 Anaconda 下載（用於資料科學目的）。
在 Windows 上，請確保您的 Python 解譯器路徑已包含在 PATH 環境變數中。您可以透過在命令提示字元中執行 path 來檢查該路徑。如果沒有包含 Python 解譯器的資料夾，請開啟 Windows 設定，搜尋「環境」，選擇編輯您的帳戶環境變數，然後編輯 Path 變數以包含該資料夾。

為 Django 教學課程建立專案環境

在本節中，您將建立一個虛擬環境來安裝 Django。使用虛擬環境可以避免將 Django 安裝到全域 Python 環境中，並讓您精確控制應用程式所使用的程式庫。虛擬環境也讓建立環境所需的 requirements.txt 檔案變得輕而易舉。

Python 環境擴充功能支援多種環境類型，包括 venv、conda、poetry 等。本教學課程使用 venv，因為它是 Python 內建的且不需要額外的工具。其他環境類型的步驟類似 — 請參閱建立環境以了解詳情。

在您的檔案系統中，為本教學課程建立一個專案資料夾，例如 hello_django。
透過執行 code .，或執行 VS Code 並使用檔案 (File) > 開啟資料夾 (Open Folder) 命令，在 VS Code 中開啟專案資料夾。
使用Python: Create Environment (Python: 建立環境) 命令建立虛擬環境
1. 開啟命令選擇區 (⇧⌘P (Windows, Linux Ctrl+Shift+P))
2. 搜尋並選取 Python: Create Environment (Python: 建立環境)
3. 選取 Venv 以建立 venv 環境
4. 選取要用於環境的 Python 解譯器
VS Code 會在您的工作區中建立一個 .venv 資料夾，並自動選取該新環境。

提示
您也可以透過 Python 側邊欄建立環境。展開 Environment Managers (環境管理員) 並選取 + 按鈕以進行快速建立，這會使用合理的預設值。
選取的環境會顯示在 VS Code 狀態列的右側，並帶有 ('.venv': venv) 指標，顯示您正在使用虛擬環境
使用下列其中一種方法在虛擬環境中安裝 Django

使用套件管理 UI
1. 在 Python 側邊欄中，展開 Environment Managers (環境管理員)
2. 對您的 .venv 環境按右鍵並選取 Manage Packages (管理套件)
3. 搜尋 django 並選取 Install (安裝)
使用終端機

從命令選擇區執行 Terminal: Create New Terminal (終端機: 建立新終端機) (⌃⇧` (Windows, Linux Ctrl+Shift+`))，這會建立一個終端機並自動啟動虛擬環境。然後執行
```
python -m pip install django
```

您現在擁有一個可供編寫 Django 程式碼的獨立環境。當您開啟新終端機時，VS Code 會自動啟動該環境。如果您在 VS Code 之外開啟個別的命令提示字元或終端機，請透過執行 source .venv/bin/activate (Linux/macOS) 或 .venv\Scripts\Activate.ps1 (Windows) 來啟動該環境。當命令提示字元開頭顯示 (.venv) 時，即代表環境已啟動。

建立並執行最小化的 Django 應用程式

在 Django 術語中，「Django 專案」由數個網站層級的設定檔組成，外加一個或多個您部署到 Web 主機以建立完整 Web 應用程式的「應用程式」(apps)。一個 Django 專案可以包含多個應用程式，每個應用程式在專案中通常都有獨立的功能，同一個應用程式也可以存在於多個 Django 專案中。就應用程式而言，它只是一個遵循 Django 預期特定慣例的 Python 套件。

因此，若要建立一個最小化的 Django 應用程式，必須先建立 Django 專案來作為應用程式的容器，然後再建立應用程式本身。這兩種目的都是使用 Django 管理公用程式 django-admin，該公用程式會在您安裝 Django 套件時一併安裝。

建立 Django 專案

在已啟動虛擬環境的 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 伺服器提供了掛鉤 (hooks)。
  - settings.py：包含 Django 專案的設定，您會在開發 Web 應用程式的過程中修改此檔案。
  - urls.py：包含 Django 專案的目錄，您同樣會在開發過程中修改此檔案。
  - wsgi.py：供 WSGI 相容 Web 伺服器提供您的專案服務的進入點。通常您會維持此檔案不變，因為它為正式環境的 Web 伺服器提供了掛鉤。
執行下列命令以建立空白的開發資料庫
```
python manage.py migrate
```
當您第一次執行伺服器時，它會在 db.sqlite3 檔案中建立一個預設的 SQLite 資料庫，此資料庫專為開發目的設計，但亦可用於低流量 Web 應用程式的正式環境中。如需關於資料庫的更多資訊，請參閱資料庫類型一節。
若要驗證 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。
Ctrl+點擊終端機輸出視窗中的 http://127.0.0.1:8000/ URL，以在預設瀏覽器中開啟該位址。如果 Django 安裝正確且專案有效，您會看到下方顯示的預設頁面。VS Code 終端機輸出視窗也會顯示伺服器日誌。
完成後，關閉瀏覽器視窗並在 VS Code 中使用 Ctrl+C 停止伺服器，如終端機輸出視窗所示。

建立 Django 應用程式

在已啟動虛擬環境的 VS Code 終端機中，在您的專案資料夾（manage.py 所在處）執行管理公用程式的 startapp 命令
```
python manage.py startapp hello
```
此命令會建立一個名為 hello 的資料夾，其中包含數個程式碼檔案和一個子資料夾。其中，您會經常處理 views.py（包含定義 Web 應用程式頁面的函式）和 models.py（包含定義資料物件的類別）。migrations 資料夾由 Django 的管理公用程式用來管理資料庫版本，稍後會在教學課程中討論。此外還有 apps.py（應用程式設定）、admin.py（用於建立管理介面）以及 tests.py（用於建立測試），這些檔案在此不進行介紹。

修改 hello/views.py 以符合下列程式碼，這會為應用程式的首頁建立一個單一視圖 (view)

from django.http import HttpResponse

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

建立檔案 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"),
]
```
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)
]
```
儲存所有修改過的檔案。
在 VS Code 終端機中，再次啟動虛擬環境，執行 python manage.py runserver 並在瀏覽器開啟 http://127.0.0.1:8000/，即可看到轉譯「Hello, Django」的頁面。

建立偵錯器啟動設定檔

您可能已經在想，有沒有一種更簡單的方法可以執行伺服器並測試應用程式，而不必每次都輸入 python manage.py runserver。幸運的是，有的！您可以在 VS Code 中建立自訂的啟動設定檔，這同樣適用於不可避免的偵錯作業。

切換至 VS Code 中的 執行 (Run) 檢視（使用左側活動列或 F5）。您可能會看到「若要自訂執行與偵錯，請建立 launch.json 檔案」的訊息。這意味著您還沒有包含偵錯設定的 launch.json 檔案。如果您點擊建立 launch.json 檔案 (create a launch.json file) 連結，VS Code 可以為您建立它
選取該連結，VS Code 將提示您進行偵錯設定。從下拉式選單選取 Django，VS Code 將使用 Django 執行設定填入一個新的 launch.json 檔案。launch.json 檔案包含多個偵錯設定，每一項都是 configuration 陣列中的獨立 JSON 物件。

向下捲動並查看名為 "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。（如果需要，您可以將連接埠號如 "5000" 新增至 args。）"django": true 項目也告知 VS Code 啟用 Django 頁面範本的偵錯，您稍後會在教學課程中看到。

選取 執行 (Run) > 開始偵錯 (Start Debugging) 功能表命令，或選取清單旁邊的綠色 開始偵錯 (Start Debugging) 箭頭（F5）來測試設定
Ctrl+點擊終端機輸出視窗中的 http://127.0.0.1:8000/ URL，以開啟瀏覽器並查看應用程式是否正常執行。
完成後，關閉瀏覽器並停止偵錯器。若要停止偵錯器，請使用停止工具列按鈕（紅色正方形）或 執行 (Run) > 停止偵錯 (Stop Debugging) 命令（⇧F5 (Windows, Linux Shift+F5)）。
您現在可以隨時使用 執行 (Run) > 開始偵錯 (Start Debugging) 來測試應用程式，這同時還有自動儲存所有修改過檔案的好處。

探索偵錯器

偵錯讓您有機會在特定程式碼行上暫停正在執行的程式。當程式暫停時，您可以檢查變數、在「偵錯主控台」面板中執行程式碼，並利用偵錯 (Debugging) 中所述的功能。執行偵錯器也會在偵錯工作階段開始前自動儲存任何修改過的檔案。

開始之前：請確保您已使用終端機中的 Ctrl+C 停止了上一節中執行的應用程式。如果您讓應用程式在一個終端機中保持執行，它會繼續佔用該連接埠。結果就是，當您使用相同的連接埠在偵錯器中執行應用程式時，原本正在執行的應用程式會處理所有請求，而您將無法在偵錯中的應用程式看到任何活動，程式也不會在斷點處停止。換句話說，如果偵錯器似乎無法運作，請確保沒有其他應用程式執行個體仍在執行。

在 hello/urls.py 中，將路由新增至 urlpatterns 清單
```
path("hello/<name>", views.hello_there, name="hello_there"),
```
path 的第一個引數定義了一個接受名為 name 的變數字串的路由 "hello/"。該字串會傳遞給 path 第二個引數中指定的 views.hello_there 函式。

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

將 views.py 的內容替換為下列程式碼，以定義您可以在偵錯器中逐步執行 (step through) 的 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 會自動進行篩選，因此您不需要此程式碼。）

透過執行下列任一操作，在 hello_there 函式的第一行程式碼 (now = datetime.now()) 設定斷點
- 將游標置於該行上，按下 F9，或
- 將游標置於該行上，選取 執行 (Run) > 切換斷點 (Toggle Breakpoint) 功能表命令，或
- 直接點擊行號左側的邊距（懸停在那裡時會出現一個淡紅色的圓點）。
斷點會顯示為左側邊距中的一個紅點
選取 執行 (Run) > 開始偵錯 (Start Debugging) 功能表命令，或選取清單旁邊的綠色 開始偵錯 (Start Debugging) 箭頭（F5）來啟動偵錯器

觀察狀態列會變色以指示正在偵錯

VS Code 中也會出現偵錯工具列（如下所示），其中包含下列順序的命令：暫停 (或繼續, F5)、不進入函式 (Step Over, F10)、進入函式 (Step Into, F11)、跳出函式 (Step Out, ⇧F11 (Windows, Linux Shift+F11))、重新啟動 (⇧⌘F5 (Windows, Linux Ctrl+Shift+F5)) 以及停止 (⇧F5 (Windows, Linux Shift+F5))。請參閱 VS Code 偵錯 (VS Code debugging) 以獲取每個命令的描述。
輸出會出現在「Python 偵錯主控台」(Python Debug Console) 終端機中。開啟瀏覽器並前往 http://127.0.0.1:8000/hello/VSCode。在頁面轉譯之前，VS Code 會在您設定的斷點處暫停程式。斷點上的小黃色箭頭表示它是下一行要執行的程式碼。
使用「不進入函式」(Step Over) 來執行 now = datetime.now() 陳述式。
在 VS Code 視窗的左側，您會看到一個 變數 (Variables) 窗格，顯示區域變數（例如 now）以及引數（例如 name）。下方是 監看 (Watch)、呼叫堆疊 (Call Stack) 和 斷點 (Breakpoints) 的窗格（詳情請參閱 VS Code 偵錯）。在 區域變數 (Locals) 區段中，嘗試展開不同的值。您也可以雙擊值（或使用 Enter (Windows, Linux F2)）來修改它們。不過，更改變數（例如 now）可能會破壞程式。開發人員通常只在程式碼最初未產生正確值時，才會進行更改以修正值。
當程式暫停時，偵錯主控台 (Debug Console) 面板（與終端機面板中的「Python 偵錯主控台」不同）可讓您實驗運算式，並使用程式目前的狀態來測試程式碼片段。例如，在執行完 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'
```
提示：偵錯主控台還會顯示應用程式內部可能不會出現在終端機中的例外情況。例如，如果您在 執行與偵錯 (Run and Debug) 檢視的 呼叫堆疊 (Call Stack) 區域看到「在例外狀況處暫停」(Paused on exception) 的訊息，請切換至 偵錯主控台以查看例外訊息。

將該行複製到偵錯主控台底部的 > 提示符中，並嘗試更改格式

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'

如果需要，可以逐步執行多幾行程式碼，然後選取「繼續」(Continue) (F5) 讓程式執行。瀏覽器視窗會顯示結果
將程式碼中的該行更改為使用不同的日期時間格式，例如 now.strftime("%a, %d %b, %y at %X")，然後儲存檔案。Django 伺服器會自動重新載入，這意味著這些變更將被套用，而無需重新啟動偵錯器。重新整理瀏覽器上的頁面以查看更新。
完成後，關閉瀏覽器並停止偵錯器。若要停止偵錯器，請使用停止工具列按鈕（紅色正方形）或 執行 (Run) > 停止偵錯 (Stop Debugging) 命令（⇧F5 (Windows, Linux Shift+F5)）。

提示：為了更輕鬆地重複導覽至特定 URL（如 http://127.0.0.1:8000/hello/VSCode），請在 views.py 等檔案中的某處使用 print 陳述式輸出該 URL。該 URL 會出現在 VS Code 終端機中，您可以在那裡使用 Ctrl+點擊在瀏覽器中開啟它。

「前往定義」(Go to Definition) 和「預覽定義」(Peek Definition) 命令

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

前往定義 (Go to Definition) 會從您的程式碼跳轉至定義物件的程式碼。例如，在 views.py 中，對 home 函式中的 HttpResponse 按右鍵並選取 前往定義 (Go to Definition)（或使用 F12），這會導覽至 Django 程式庫中的類別定義。
預覽定義 (Peek Definition)（⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)，也位於右鍵快顯功能表上）類似，但會直接在編輯器中顯示類別定義（在編輯器視窗中騰出空間，以免遮擋任何程式碼）。按下 Escape 關閉預覽視窗，或使用右上角的 x。

使用範本來轉譯頁面

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

一個更好的做法是完全不將 HTML 放入您的程式碼中，而是使用範本 (templates)，這樣您的程式碼只關注資料值，而不關注轉譯。

在 Django 中，範本是一個包含程式碼在執行階段所提供值之預留位置 (placeholders) 的 HTML 檔案。Django 範本引擎隨後會負責在轉譯頁面時進行取代，並提供自動逸出 (automatic escaping) 以防止 XSS 攻擊（也就是說，如果您嘗試在資料值中使用 HTML，您會發現 HTML 僅被轉譯為純文字）。因此，程式碼只關注資料值，而範本只關注標記。Django 範本提供了靈活的選項，例如範本繼承，它允許您定義一個具有通用標記的基礎頁面，然後透過特定於頁面的新增內容建立在該基礎之上。

在本節中，您將從使用範本建立單一頁面開始。在後續章節中，您將設定應用程式以提供靜態檔案，然後為應用程式建立多個頁面，每個頁面都包含一個來自基礎範本的導覽列。Django 範本也支援控制流程與迭代，正如您在本教學課程後面範本偵錯的內容中所見。

在 web_project/settings.py 檔案中，找到 INSTALLED_APPS 清單並新增下列項目，確保專案知道該應用程式的存在，以便它可以處理範本
```
'hello',
```
在 hello 資料夾內，建立一個名為 templates 的資料夾，然後再建立一個名為 hello 的子資料夾以符合應用程式名稱（這種雙層資料夾結構是典型的 Django 慣例）。
在 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>
```
在 views.py 的頂部，新增下列匯入陳述式
```
from django.shortcuts import render
```
同樣在 views.py 中，修改 hello_there 函式以使用 django.shortcuts.render 方法來載入範本並提供 範本內容 (template context)。內容是一組用於範本內的變數。render 函式採用 request 物件，接著是 相對於 templates 資料夾 的範本路徑，然後是內容物件。（開發人員通常將範本命名與使用它們的函式相同，但不需要名稱匹配，因為您總是在程式碼中引用精確的檔案名稱。）
```
def hello_there(request, name):
    print(request.build_absolute_uri()) #optional
    return render(
        request,
        'hello/hello_there.html',
        {
            'name': name,
            'date': datetime.now()
        }
    )
```
您可以看到程式碼現在簡單得多，並且只關注資料值，因為標記和格式化都包含在範本中。
啟動程式（在偵錯器內部或外部，使用 ⌃F5 (Windows, Linux Ctrl+F5)），導覽至 /hello/name URL，並觀察結果。
也嘗試使用類似 <a%20value%20that%20could%20be%20HTML> 的名稱導覽至 /hello/name URL，以查看 Django 的自動逸出功能。該「name」值在瀏覽器中顯示為純文字，而不是轉譯實際的元素。

提供靜態檔案

靜態檔案是您的 Web 應用程式針對某些請求按原樣傳回的內容，例如 CSS 檔案。提供靜態檔案要求 settings.py 中的 INSTALLED_APPS 清單包含 django.contrib.staticfiles，該設定預設已包含。

在 Django 中提供靜態檔案是一門藝術，尤其是在部署到正式環境時。此處展示的是一種簡單的方法，適用於 Django 開發伺服器以及像 Gunicorn 這樣的正式環境伺服器。然而，對靜態檔案的完整處理超出了本教學課程的範圍，因此如需更多資訊，請參閱 Django 文件中的管理靜態檔案 (Managing static files)。

切換至正式環境時，請導覽至 settings.py，設定 DEBUG=False，並將 ALLOWED_HOSTS = ['*'] 更改為允許特定主機。使用容器時，這可能會導致額外的工作。有關詳情，請參閱問題 13 (Issue 13)。

準備應用程式以使用靜態檔案

在專案的 web_project/urls.py 中，新增下列 import 陳述式

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

在同一個檔案中，於結尾處新增下列行，將標準靜態檔案 URL 包含到專案識別的清單中
```
urlpatterns += staticfiles_urlpatterns()
```

在範本中引用靜態檔案

在 hello 資料夾中，建立一個名為 static 的資料夾。
在 static 資料夾內，建立一個名為 hello 的子資料夾，以符合應用程式名稱。

這個額外子資料夾的原因是，當您將 Django 專案部署到正式環境伺服器時，您會將所有靜態檔案收集到一個單一資料夾中，然後由專用的靜態檔案伺服器提供服務。static/hello 子資料夾確保在收集應用程式的靜態檔案時，它們位於特定於應用程式的子資料夾中，並且不會與同一個專案中其他應用程式的檔案衝突。
在 static/hello 資料夾中，建立一個名為 site.css 的檔案，內容如下。輸入此程式碼後，同時觀察 VS Code 為 CSS 檔案提供的語法醒目提示，包括顏色預覽。
```
.message {
    font-weight: 600;
    color: blue;
}
```
在 templates/hello/hello_there.html 中，於 <title> 元素後新增下列行。{% load static %} 標籤是一個自訂的 Django 範本標籤集，它允許您使用 {% static %} 來引用類似樣式表這樣的檔案。
```
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'hello/site.css' %}" />
```
同樣在 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' }}.
```
執行應用程式，導覽至 /hello/name URL，並觀察訊息以藍色呈現。完成後停止應用程式。

使用 collectstatic 命令

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

在 web_project/settings.py 中，新增下列行，定義當您使用 collectstatic 命令時收集靜態檔案的位置
```
STATIC_ROOT = BASE_DIR / 'static_collected'
```
在終端機中，執行命令 python manage.py collectstatic，並觀察 hello/site.css 被複製到 manage.py 旁邊的頂層 static_collected 資料夾中。
在實務上，請在您變更靜態檔案以及部署到正式環境之前的任何時候執行 collectstatic。

建立多個繼承自基礎範本的範本

由於大多數 Web 應用程式都有一個以上的頁面，且這些頁面通常共用許多共同元素，因此開發人員會將這些共同元素分離到一個基礎頁面範本中，其他頁面範本再進行延伸。（這也稱為範本繼承，意味著延伸的頁面會繼承基礎頁面的元素。）

此外，由於您可能會建立許多延伸相同範本的頁面，因此在 VS Code 中建立一個程式碼片段 (code snippet) 以便快速初始化新的頁面範本會很有幫助。程式碼片段可協助您避免繁瑣且易於出錯的複製貼上操作。

下列各節將引導您完成此過程的不同部分。

建立基礎頁面範本與樣式

Django 中的基礎頁面範本包含一組頁面的所有共享部分，包括對 CSS 檔案、指令碼檔案等的引用。基礎範本還會定義一個或多個 區塊 (block) 標籤，其中包含預期由延伸範本覆寫的內容。區塊標籤在基礎範本和延伸範本中都由 {% block <name> %} 和 {% endblock %} 劃定。

下列步驟示範建立基礎範本。

在 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>

將下列樣式新增至 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，因此建立一個 程式碼片段 來初始化帶有對基礎範本適當引用的新範本檔案可以節省時間。程式碼片段從單一來源提供一致的程式碼片段，這避免了在使用現有程式碼進行複製貼上時可能產生的錯誤。

在 VS Code 中，選取 檔案 (File) (Windows/Linux) 或 程式碼 (Code) (macOS) 功能表，然後選取 喜好設定 (Preferences) > 使用者程式碼片段 (User snippets)。
在出現的清單中，選取 html。（如果您之前建立過程式碼片段，該選項可能會以「html.json」顯示在清單的 現有程式碼片段 (Existing Snippets) 區段中。）

在 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"
},

儲存 html.json 檔案 (⌘S (Windows, Linux Ctrl+S))。
現在，每當您開始輸入程式碼片段的前綴（例如 djext）時，VS Code 就會將該片段作為自動完成選項提供，如下一節所示。您也可以使用 插入程式碼片段 (Insert Snippet) 命令從功能表中選擇程式碼片段。

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

使用程式碼片段新增頁面

有了程式碼片段，您就可以快速建立首頁 (Home)、關於 (About) 和聯絡 (Contact) 頁面的範本。

在 templates/hello 資料夾中，建立一個名為 home.html 的新檔案，然後開始輸入 djext 以查看該片段作為完成項出現

當您選取該完成項時，程式碼片段的內容會出現，游標位於片段的插入點
在「title」區塊的插入點，寫入 Home，在「content」區塊中，寫入 <p>Home page for the Visual Studio Code Django tutorial.</p>，然後儲存檔案。這些行是延伸頁面範本中僅有的唯一部分
在 templates/hello 資料夾中，建立 about.html，使用該片段插入樣板標記，分別在「title」和「content」區塊中插入 About us 和 <p>About page for the Visual Studio Code Django tutorial.</p>，然後儲存檔案。
重複上一步建立 templates/hello/contact.html，並使用 Contact us 和 <p>Contact page for the Visual Studio Code Django tutorial.</p>。
在應用程式的 urls.py 中，為 /about 和 /contact 頁面新增路由。請注意，path 函式的 name 引數定義了您在範本的 {% url %} 標籤中引用該頁面時所使用的名稱。
```
path("about/", views.about, name="about"),
path("contact/", views.contact, name="contact"),
```

在 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 讓您能夠輕鬆使用 模型 (models) 來表示該資料庫中的物件。在 Django 中，模型是一個衍生自 django.db.models.Model 的 Python 類別，代表特定的資料庫物件，通常是資料表。您可以將這些類別放入應用程式的 models.py 檔案中。

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

對您的 models.py 檔案中的模型進行變更。
執行 python manage.py makemigrations，在 migrations 資料夾中產生指令碼，將資料庫從其目前狀態遷移至新狀態。
執行 python manage.py migrate，將指令碼套用至實際的資料庫。

遷移指令碼有效地記錄了您隨時間對資料模型所做的所有增量變更。透過套用遷移，Django 會更新資料庫以符合您的模型。由於每個增量變更都有自己的指令碼，Django 可以自動將資料庫的任何先前版本（包括新資料庫）遷移至目前版本。因此，您只需要關注 models.py 中的模型，永遠不需要處理底層資料庫結構描述或遷移指令碼。這部分讓 Django 來做！

同樣地，在程式碼中，您完全使用您的模型類別來儲存和擷取資料；Django 會處理底層細節。唯一的例外是，您可以使用 Django 管理公用程式的 loaddata 命令將資料寫入您的資料庫。此公用程式通常在 migrate 命令初始化結構描述後，用於初始化資料集。

使用 db.sqlite3 檔案時，您也可以使用諸如 SQLite browser 之類的工具直接處理資料庫。使用此類工具新增或刪除資料表中的記錄是可以的，但請避免對資料庫結構描述進行變更，因為資料庫隨後會與您應用程式的模型不同步。相反，請更改模型，執行 makemigrations，然後執行 migrate。

資料庫類型

預設情況下，Django 包含一個適用於開發工作的應用程式資料庫 db.sqlite3 檔案。如何時使用 SQLite (When to use SQLite) (sqlite.org) 所述，SQLite 適用於每天點擊量低於 10 萬次的中低流量網站，但不建議用於更高流量的情況。它也僅限於單一電腦，因此無法用於負載平衡和地理複製等任何多伺服器場景。

基於這些原因，請考慮使用正式環境等級的資料儲存區，例如 PostgreSQL、MySQL 和 SQL Server。有關 Django 對其他資料庫支援的資訊，請參閱資料庫設定 (Database setup)。您也可以使用 Azure Python 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 文件中的模型欄位參考 (Model field reference)。）

每個欄位都採用一些屬性，例如 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 產生的指令碼。您也可以查看資料庫本身以確認結構描述已更新。

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

透過模型使用資料庫

在設定好模型並遷移資料庫後，您只需使用模型即可儲存和擷取資料。在本節中，您將透過一個表單頁面新增至應用程式，藉此記錄訊息。然後，您將修改首頁以顯示這些訊息。因為您在此處修改許多程式碼檔案，請留意細節。

在 hello 資料夾中（您擁有 views.py 的地方），建立一個名為 forms.py 的新檔案，內容如下，其中定義了一個包含從資料模型 LogMessage 繪製之欄位的 Django 表單

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

在 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 文件中的跨網站請求偽造保護 (Cross Site Request Forgery protection)。
在應用程式的 static/hello/site.css 檔案中，新增一個規則以使輸入表單更寬
```
input[name=message] {
    width: 80%;
}
```
在應用程式的 urls.py 檔案中，為新頁面新增一個路由
```
path("log/", views.log_message, name="log"),
```

在 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})

在準備嘗試所有功能之前還有一個步驟！在 templates/hello/layout.html 中，於「navbar」div 中為訊息記錄頁面新增一個連結
```

<a href="{% url 'log' %}" class="navbar-item">Log Message</a>
```
執行應用程式並在瀏覽器中開啟首頁。選取導覽列上的 Log Message 連結，這應該會顯示訊息記錄頁面
輸入一則訊息，選取 Log，您應該會被帶回首頁。首頁尚未顯示任何已記錄的訊息（您稍後會進行補救）。歡迎隨意再記錄幾則訊息。如果您願意，可以使用諸如 SQLite Browser 之類的工具查看資料庫，以確認記錄已建立。請以唯讀方式開啟資料庫，否則請記得在使用應用程式之前關閉資料庫，否則應用程式會因為資料庫鎖定而失敗。
完成後停止應用程式。

現在修改首頁以顯示已記錄的訊息。首先將應用程式 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 %}

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

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

在 views.py 中，匯入 Django 的通用 ListView 類別，我們將用它來實作首頁
```
from django.views.generic import ListView
```

同樣在 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

在應用程式的 urls.py 中，匯入資料模型
```
from hello.models import LogMessage
```

同樣在 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",
)

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

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

啟動應用程式並在瀏覽器中開啟首頁，現在應該會顯示訊息
完成後停止應用程式。

在頁面範本中使用偵錯器

如上一節所示，頁面範本可以包含程序性指令（例如 {% for message in message_list %} 和 {% if message_list %}），而不僅僅是被動的聲明性元素（例如 {% url %} 和 {% block %}）。因此，您可以像處理任何其他程序性程式碼一樣，在範本內部產生程式設計錯誤。

幸運的是，當您的偵錯設定中有 "django": true 時（如您已經設定的那樣），VS Code 的 Python 擴充功能提供了範本偵錯。下列步驟示範了此功能

在 templates/hello/home.html 中，在 {% if message_list %} 和 {% for message in message_list %} 兩行上設定斷點，如下圖中黃色箭頭所示
在偵錯器中執行應用程式並在瀏覽器中開啟首頁。（如果您已經在執行偵錯器，則不需要在設定斷點後重新啟動應用程式；只需重新整理頁面即可。）觀察 VS Code 會在範本的 {% if %} 陳述式處中斷並進入偵錯器，並在 變數 (Variables) 窗格中顯示所有內容變數
使用「不進入函式」(Step Over) (F10) 命令逐步執行範本程式碼。觀察偵錯器會跳過所有聲明性陳述式，並在任何程序性程式碼處暫停。例如，逐步執行 {% for message in message_list %} 迴圈讓您可以檢查 message 中的每個值，並讓您可以逐步執行到 <td>{{ message.log_date | date:'d M Y' }}</td> 之類的行。
您也可以在 偵錯主控台 (Debug Console) 面板中處理變數。（但是，目前無法在主控台中取得像 date 這樣的 Django 篩選器。）
準備好後，選取「繼續」(Continue) (F5) 以完成應用程式的執行並在瀏覽器中查看轉譯後的頁面。完成後停止偵錯器。

選做活動

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

為環境建立 requirements.txt 檔案

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

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

雖然您可以手動建立該檔案，但您也可以使用 pip freeze 命令，根據已啟動環境中實際安裝的程式庫來產生該檔案

使用 Python: 選取解譯器 (Python: Select Interpreter) 命令選取您選擇的環境，執行 終端機: 建立新終端機 (Terminal: Create New Terminal) 命令 (⌃⇧` (Windows, Linux Ctrl+Shift+`))) 以開啟一個已啟動該環境的終端機。
在終端機中，執行 pip freeze > requirements.txt 以在您的專案資料夾中建立 requirements.txt 檔案。

任何收到專案副本的人員（或任何建置伺服器）只需要執行 pip install -r requirements.txt 命令，即可在作用中環境內重新安裝應用程式依賴的套件。

注意：pip freeze 會列出您在目前環境中安裝的所有 Python 套件，包括您目前未使用的套件。該命令還會列出具有精確版本號的套件，您可能希望將其轉換為範圍以在未來獲得更多彈性。有關詳細資訊，請參閱 pip 命令文件中的需求檔案 (Requirements Files)。

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

預設情況下，Django 為受驗證保護的 Web 應用程式提供管理介面。該介面透過內建的 django.contrib.admin 應用程式實作，該應用程式預設包含在專案的 INSTALLED_APPS 清單 (settings.py) 中，而驗證則由內建的 django.contrib.auth 應用程式處理，該應用程式預設也在 INSTALLED_APPS 中。

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

透過在 VS Code 中為您的虛擬環境開啟終端機，然後執行命令 python manage.py createsuperuser --username=<username> --email=<email>（當然，請用您的個人資訊取代 <username> 和 <email>），在應用程式中建立一個超級使用者帳戶。當您執行該命令時，Django 會提示您輸入並確認密碼。

請務必記住您的使用者名稱和密碼組合。這些是您用於驗證應用程式的身分憑證。
在專案層級的 urls.py（本教學課程中的 web_project/urls.py）中新增下列 URL 路由，以指向內建的管理介面
```
# This path is included by default when creating the app
 path("admin/", admin.site.urls),
```
執行伺服器，然後在瀏覽器中開啟應用程式的 /admin 頁面（例如使用開發伺服器時的 http://127.0.0.1:8000/admin）。
會出現一個登入頁面，由 django.contrib.auth 提供。輸入您的超級使用者憑證。
驗證完成後，您會看到預設管理頁面，透過該頁面您可以管理使用者和群組

您可以隨心所欲地自訂管理介面。例如，您可以提供編輯和移除資料庫中條目的功能。有關進行自訂的更多資訊，請參閱 Django 管理站台文件 (Django admin site documentation)。

使用容器工具擴充功能為 Django 應用程式建立容器

容器工具 (Container Tools) 擴充功能讓您可以輕鬆地從 Visual Studio Code 建置、管理和部署容器化應用程式。如果您有興趣了解如何為本教學課程中開發的 Django 應用程式建立 Python 容器，請參閱容器中的 Python (Python in a container) 教學課程，該教學課程將引導您完成如何

建立描述簡單 Python 容器的 Dockerfile 檔案。
建置、執行並驗證 Django 應用程式的功能。
對在容器中執行的應用程式進行偵錯。

後續步驟

恭喜您完成本 Visual Studio Code 中 Django 使用指南的實作！

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

在本教學課程中，我們僅觸及了 Django 所能做的一切的皮毛。請務必瀏覽 Django 文件和官方 Django 教學課程，以獲取關於視圖、範本、資料模型、URL 路由、管理介面、使用其他類型資料庫、部署至正式環境等更多詳情。

若要嘗試在正式環境網站上執行您的應用程式，請查看教學課程使用 Docker 容器將 Python 應用程式部署到 Azure App Service (Deploy Python apps to Azure App Service using Docker Containers)。Azure 還提供了一個標準容器，Linux 上的 App Service (App Service on Linux)，您可以在其中從 VS Code 部署 Web 應用程式。

您可能還會想要審閱 VS Code 文件中與 Python 相關的下列文章

02/04/2026