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 下載；通常使用頁面上首先出現的下載 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 專案中。應用程式本身只是一個 Python 套件，遵循 Django 預期的一些慣例。

因此，若要建立最小的 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 函式。如程式碼註解中所述，請務必篩選任意使用者提供的資訊，以避免對您的應用程式進行各種攻擊。在此案例中，程式碼會篩選 name 引數，使其僅包含字母，這可避免注入控制字元、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 程式庫中的類別定義。
查看定義 (⌥F12 (Windows Alt+F12、Linux Ctrl+Shift+F10)，也在滑鼠右鍵內容功能表上)，類似，但會直接在編輯器中顯示類別定義 (在編輯器視窗中建立空間以避免遮蔽任何程式碼)。按下 Escape 以關閉 [查看] 視窗，或使用右上角的 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 的內建日期篩選器和時間篩選器。如此一來，程式碼只需要傳遞日期時間「值」，而不是預先格式化好的字串
```
<!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>

將以下樣式新增到 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 中，選取「檔案」 (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 browser 這樣的工具直接使用資料庫。使用此類工具在表格中新增或刪除記錄是可以的，但要避免變更資料庫結構描述，因為這樣資料庫將與應用程式的模型不同步。相反地，請變更模型，執行 makemigrations，然後執行 migrate。

資料庫類型

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

由於這些原因，請考慮使用生產級資料儲存區，例如 PostgreSQL、MySQL 和 SQL Server。有關 Django 對其他資料庫的支援資訊，請參閱資料庫設定。您也可以使用適用於 Python 的 Azure SDK 來使用 Azure 儲存服務，例如表格和 Blob。

定義模型

Django 模型再次是一個 Python 類別，衍生自 django.db.model.Models，您將其放置在應用程式的 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 的變數來定義表單的主體。然後，它新增一個提交按鈕，標籤為 "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 文件中的跨網站請求偽造保護。
在應用程式的 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> 這樣的行。
您也可以在「偵錯主控台」面板中使用變數。（但是，像 date 這樣的 Django 篩選器目前在主控台中不可用。）
準備就緒後，選取繼續（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 教學課程，其中將引導您完成以下步驟：」

「建立描述簡單 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 相關的下列文章」

04/03/2025