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 教學課程中的步驟相同)

安裝 Python 擴充功能。
安裝 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 下載 (適用於資料科學用途)。
在 Windows 上，請確定您的 Python 解譯器的位置包含在 PATH 環境變數中。您可以在命令提示字元中執行 path 來檢查位置。如果未包含 Python 解譯器的資料夾，請開啟 [Windows 設定]，搜尋「環境」，選取 [編輯您帳戶的環境變數]，然後編輯 [Path] 變數以包含該資料夾。

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

在本節中，您將建立一個虛擬環境，其中安裝了 Django。使用虛擬環境可避免將 Django 安裝到全域 Python 環境中，並讓您完全控制應用程式中使用的程式庫。虛擬環境也讓為環境建立 requirements.txt 檔案變得容易。

在您的檔案系統上，為本教學課程建立一個專案資料夾，例如 hello_django。
在該資料夾中，使用下列命令 (視您的電腦而定) 根據您目前的解譯器建立名為 .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 模組無法使用，而且環境會處於未完成狀態。
在 VS Code 中開啟專案資料夾，方法是執行 code .，或執行 VS Code 並使用 [檔案] > [開啟資料夾] 命令。
在 VS Code 中，開啟命令選擇區 ([檢視] > [命令選擇區] 或 (⇧⌘P (Windows、Linux Ctrl+Shift+P)))。然後選取 [Python: 選取解譯器] 命令
此命令會呈現 VS Code 可以自動找到的可用解譯器清單 (您的清單會有所不同；如果您沒有看到想要的解譯器，請參閱設定 Python 環境)。從清單中，選取專案資料夾中以 ./.venv 或 .\.venv 開頭的虛擬環境
從命令選擇區執行 終端機: 建立新的終端機 (⌃⇧` (Windows、Linux Ctrl+Shift+`))，這會建立終端機，並透過執行其啟動指令碼自動啟動虛擬環境。

注意：在 Windows 上，如果您的預設終端機類型是 PowerShell，您可能會看到錯誤，指出因為系統上停用了指令碼執行，所以無法執行 activate.ps1。錯誤會提供連結，以取得如何允許指令碼的相關資訊。否則，請使用 [終端機: 選取預設設定檔] 將「命令提示字元」或「Git Bash」設定為您的預設值。
選取的環境會顯示在 VS Code 狀態列的右側，並注意到 [('.venv': venv)] 指示器，告訴您您正在使用虛擬環境
在 VS Code 終端機中執行下列命令，更新虛擬環境中的 pip
```
python -m pip install --upgrade pip
```
在 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 專案

在已啟動虛擬環境的 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 伺服器提供 Hook。
  - settings.py：包含 Django 專案的設定，您會在開發 Web 應用程式的過程中修改這些設定。
  - urls.py：包含 Django 專案的目錄，您也會在開發過程中修改此目錄。
  - wsgi.py：與 WSGI 相容的 Web 伺服器進入點，用於提供您的專案。您通常會保持此檔案原樣，因為它會為生產 Web 伺服器提供 Hook。
執行下列命令以建立空的開發資料庫
```
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 模組負責 Hook 到生產伺服器。

如果您想要使用與預設連接埠 8000 不同的連接埠，請在命令列上指定連接埠號碼，例如 python manage.py runserver 5000。
Ctrl+按一下終端機輸出視窗中的 http://127.0.0.1:8000/ URL，以在您的預設瀏覽器中開啟該位址。如果 Django 安裝正確且專案有效，您會看到如下所示的預設頁面。 VS Code 終端機輸出視窗也會顯示伺服器記錄。
完成後，關閉瀏覽器視窗，並使用 Ctrl+C 停止 VS Code 中的伺服器，如終端機輸出視窗中所示。

建立 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 以符合下列程式碼，這會為應用程式的首頁建立單一檢視

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 中的 [執行] 檢視 (使用左側活動列或 F5)。您可能會看到訊息「若要自訂執行和偵錯，請建立 launch.json 檔案」。這表示您尚未擁有包含偵錯組態的 launch.json 檔案。如果您按一下 [建立 launch.json 檔案] 連結，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 頁面範本的偵錯，您將在本教學課程稍後看到。

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

探索偵錯工具

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

開始之前：請確定您已在本節結尾使用終端機中的 Ctrl+C 停止執行中的應用程式。如果您將應用程式留在一個終端機中執行，它會繼續擁有連接埠。因此，當您在偵錯工具中使用相同的連接埠執行應用程式時，原始執行中的應用程式會處理所有要求，而且您不會在偵錯中的應用程式中看到任何活動，而且程式不會在中斷點停止。換句話說，如果偵錯工具似乎無法運作，請確定沒有其他應用程式執行個體仍在執行。

在 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> 不同。如果您想要相同的檢視函式處理兩者，請為每個變體定義路徑。

將 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 函式。如程式碼註解中所述，請務必篩選任意使用者提供的資訊，以避免對應用程式進行各種攻擊。在此案例中，程式碼會篩選名稱引數，使其僅包含字母，這可避免控制字元、HTML 等的注入。 (當您在下一節中使用範本時，Django 會自動篩選，您不需要此程式碼。)

在 hello_there 函式的第一行程式碼 (now = datetime.now()) 設定中斷點，方法是執行下列任一項操作
- 將游標放在該行上，按 F9，或
- 將游標放在該行上，選取 [執行] > [切換中斷點] 功能表命令，或
- 直接按一下行號左側的邊界 (當游標停留在該處時，會出現淡紅色的點)。
中斷點會以紅色點顯示在左邊界中
選取 [執行] > [開始偵錯] 功能表命令，或選取清單旁的綠色 [開始偵錯] 箭頭 (F5) 來啟動偵錯工具

觀察狀態列變更色彩以指示偵錯

偵錯工具列 (如下所示) 也會出現在 VS Code 中，其中包含下列順序的命令：[暫停] (或 [繼續]，F5)、[跳過] (F10)、[跳入] (F11)、[跳出] (⇧F11 (Windows、Linux Shift+F11))、[重新啟動] (⇧⌘F5 (Windows、Linux Ctrl+Shift+F5)) 和 [停止] (⇧F5 (Windows、Linux Shift+F5))。請參閱 VS Code 偵錯以取得每個命令的描述。
輸出會顯示在「Python 偵錯主控台」終端機中。開啟瀏覽器並導覽至 http://127.0.0.1:8000/hello/VSCode。在頁面呈現之前，VS Code 會在您設定的中斷點暫停程式。中斷點上的小黃色箭頭表示它是要執行的下一行程式碼。
使用 [跳過] 執行 now = datetime.now() 陳述式。
在 VS Code 視窗的左側，您會看到 [變數] 窗格，其中顯示區域變數 (例如 now) 以及引數 (例如 name)。下方是 [監看式]、[呼叫堆疊] 和 [中斷點] 的窗格 (如需詳細資訊，請參閱 VS Code 偵錯)。在 [區域變數] 區段中，嘗試展開不同的值。您也可以按兩下值 (或使用 Enter (Windows、Linux F2)) 來修改它們。不過，變更變數 (例如 now) 可能會中斷程式。開發人員通常只會在程式碼一開始未產生正確值時才進行變更以更正值。
當程式暫停時，[偵錯主控台] 面板 ([終端機] 面板中的「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'
```
提示：[偵錯主控台] 也會顯示應用程式中的例外狀況，這些例外狀況可能不會顯示在終端機中。例如，如果您在 [執行和偵錯] 檢視的 [呼叫堆疊] 區域中看到「已在例外狀況中暫停」訊息，請切換到 [偵錯主控台] 以查看例外狀況訊息。

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

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'

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

提示：為了更輕鬆地重複導覽至特定 URL (例如 http://127.0.0.1:8000/hello/VSCode)，請使用 print 陳述式在檔案 (例如 views.py) 中的某處輸出該 URL。 URL 會顯示在 VS Code 終端機中，您可以在其中使用 Ctrl+按一下以在瀏覽器中開啟它。

前往定義和查看定義命令

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

前往定義 會從您的程式碼跳到定義物件的程式碼。例如，在 views.py 中，在 home 函式中按一下滑鼠右鍵 HttpResponse，然後選取 [前往定義] (或使用 F12)，這會導覽至 Django 程式庫中的類別定義。
Peek 定義 (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)，也可在滑鼠右鍵內容選單中找到)，與「前往定義」類似，但會在編輯器中直接顯示類別定義 (在編輯器視窗中騰出空間，以避免遮蔽任何程式碼)。按下 Escape 鍵可關閉「Peek」視窗，或使用右上角的 x。

使用範本來呈現頁面

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

更好的做法是完全將 HTML 排除在程式碼之外，改用範本，讓您的程式碼只關注資料值，而不是呈現。

在 Django 中，範本是一個 HTML 檔案，其中包含程式碼在執行階段提供的值的預留位置。然後，Django 範本引擎會在呈現頁面時負責進行替換，並提供自動跳脫以防止 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 的內建日期篩選器和時間篩選器。然後，程式碼只需要傳遞 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>
```
在 views.py 的頂端，新增下列匯入陳述式
```
from django.shortcuts import render
```
同樣在 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()
        }
    )
```
您可以看到，程式碼現在簡潔得多，並且只關注資料值，因為標記和格式設定都包含在範本中。
啟動程式 (在偵錯工具內部或外部，使用 ⌃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 文件中的管理靜態檔案。

切換到生產環境時，導覽至 settings.py，設定 DEBUG=False，並將 ALLOWED_HOSTS = ['*'] 變更為允許特定主機。使用容器時，這可能會導致額外的工作。如需詳細資訊，請參閱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 已複製到最上層的 static_collected 資料夾，與 manage.py 並排。
在實務上，每當您變更靜態檔案並在部署到生產環境之前，請執行 collectstatic。

建立延伸基底範本的多個範本

由於大多數 Web 應用程式都有多個頁面，而且這些頁面通常共用許多通用元素，因此開發人員會將這些通用元素分隔到基本頁面範本中，然後其他頁面範本會擴充該範本。(這也稱為範本繼承，表示擴充頁面會從基本頁面繼承元素。)

此外，由於您可能會建立許多擴充相同範本的頁面，因此在 VS Code 中建立程式碼片段會很有幫助，您可以使用該程式碼片段快速初始化新的頁面範本。程式碼片段可協助您避免繁瑣且容易出錯的複製貼上作業。

下列章節將逐步說明此程序的各個部分。

建立基本頁面範本和樣式

Django 中的基本頁面範本包含一組頁面的所有共用部分，包括對 CSS 檔案、指令碼檔案等的參考。基本範本也定義一個或多個區塊標籤，擴充範本預期會覆寫這些標籤的內容。區塊標籤在基本範本和擴充範本中都由 {% block <name> %} 和 {% endblock %} 分隔。

下列步驟示範如何建立基本範本。

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

將下列樣式新增至現有 "message" 樣式下方的 static/hello/site.css，並儲存檔案。(本逐步解說並未嘗試示範回應式設計；這些樣式只是產生相當有趣的結果。)

.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 中，選取 [檔案] (Windows/Linux) 或 [程式碼] (macOS) 功能表，然後選取 [喜好設定] > [使用者程式碼片段]。
在出現的清單中，選取 [html]。(如果您先前已建立程式碼片段，則該選項可能會在清單的 [現有程式碼片段] 區段中顯示為 "html.json"。)。

在 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 就會將該程式碼片段作為自動完成選項提供，如下一個章節所示。您也可以使用 [插入程式碼片段] 命令從功能表中選擇程式碼片段。

如需有關一般程式碼片段的詳細資訊，請參閱建立程式碼片段。

使用程式碼片段新增頁面

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

在 templates/hello 資料夾中，建立一個名為 home.html 的新檔案，然後開始輸入 djext 以查看程式碼片段顯示為完成

當您選取完成時，程式碼片段的程式碼會顯示，游標位於程式碼片段的插入點
在 "title" 區塊中的插入點，輸入 Home，在 "content" 區塊中，輸入 <p>Visual Studio Code Django 教學課程的首頁。</p>，然後儲存檔案。這些行是擴充頁面範本的唯一部分
在 templates/hello 資料夾中，建立 about.html，使用程式碼片段插入樣板標記，在 "title" 和 "content" 區塊中分別插入 About us 和 <p>Visual Studio Code Django 教學課程的關於頁面。</p>，然後儲存檔案。
重複上一個步驟以建立 templates/hello/contact.html，使用 Contact us 和 <p>Visual Studio Code Django 教學課程的聯絡頁面。</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 可以輕鬆地使用模型來表示該資料庫中的物件。在 Django 中，模型是一個 Python 類別，衍生自 django.db.models.Model，表示特定的資料庫物件，通常是一個資料表。您將這些類別放在應用程式的 models.py 檔案中。

使用 Django 時，您幾乎完全透過在程式碼中定義的模型來處理資料庫。然後，當您隨著時間演進模型時，Django 的「移轉」會自動處理基礎資料庫的所有詳細資訊。一般工作流程如下

變更 models.py 檔案中的模型。
執行 python manage.py makemigrations 以在 migrations 資料夾中產生指令碼，將資料庫從目前狀態移轉到新狀態。
執行 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 中，開啟一個終端機，並啟動您的虛擬環境 (使用 [終端機: 建立新的終端機] 命令，⌃⇧` (Windows、Linux Ctrl+Shift+`)))，導覽至專案資料夾，然後執行下列命令

python manage.py makemigrations
python manage.py migrate

查看 migrations 資料夾，以查看 makemigrations 產生的指令碼。您也可以查看資料庫本身，以查看結構描述是否已更新。

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

透過模型使用資料庫

在您的模型就緒且資料庫已移轉後，您可以使用您的模型來儲存和擷取資料。在本節中，您將為應用程式新增一個表單頁面，您可以使用該頁面記錄訊息。然後，您將修改首頁以顯示這些訊息。由於您在此處修改了許多程式碼檔案，請注意詳細資訊。

在 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

在 templates/hello 資料夾中，建立一個名為 log_message.html 的新範本，內容如下，其中假設範本會獲得一個名為 form 的變數，以定義表單的主體。然後，它會新增一個提交按鈕，標籤為「記錄」。
```
{% 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 文件中的跨網站要求偽造保護。
在應用程式的 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>
```
執行應用程式並開啟瀏覽器至首頁。選取導覽列上的 [記錄訊息] 連結，應會顯示訊息記錄頁面
輸入訊息，選取 [記錄]，您應該會回到首頁。首頁尚未顯示任何已記錄的訊息 (您稍後會修正)。也請隨意記錄更多訊息。如果您願意，可以使用 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 %} 陳述式上中斷到偵錯工具中，並在 [變數] 窗格中顯示所有內容變數
使用 [逐步執行] (F10) 命令逐步執行範本程式碼。觀察到偵錯工具逐步執行所有宣告式陳述式，並在任何程序程式碼處暫停。例如，逐步執行 {% for message in message_list %} 迴圈可讓您檢查 message 中的每個值，並讓您逐步執行類似 <td>{{ message.log_date | date:'d M Y' }}</td> 的行。
您也可以在 [偵錯主控台] 面板中使用變數。(但是，Django 篩選器 (例如 date) 目前在主控台中不可用。)
準備就緒後，選取 [繼續] (F5) 以完成執行應用程式，並在瀏覽器中檢視呈現的頁面。完成後停止偵錯工具。

選用活動

下列章節說明您在 Python 和 Visual Studio Code 中工作時可能會發現有用的其他步驟。

為環境建立 requirements.txt 檔案

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

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

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

使用 [Python: 選取解譯器] 命令選取您選擇的環境後，執行 [終端機: 建立新的終端機] 命令 (⌃⇧` (Windows、Linux Ctrl+Shift+`))) 以開啟已啟動該環境的終端機。
在終端機中，執行 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 中。

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

在應用程式中建立超級使用者帳戶，方法是在 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 管理網站文件。

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

Docker 擴充功能讓您可以輕鬆地從 Visual Studio Code 建置、管理和部署容器化應用程式。如果您有興趣瞭解如何為本教學課程中開發的 Django 應用程式建立 Python 容器，請查看容器中的 Python 教學課程，其中將逐步引導您完成下列步驟

建立 Dockerfile 檔案，描述簡單的 Python 容器。
建置、執行和驗證 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 相關的下列文章

02/06/2025