教學課程：開始使用 Visual Studio 中的 Django Web 架構

Django (英文) 是高階的 Python 架構，專為快速、安全且可擴充的網頁程式開發所設計。 此教學課程會探索專案範本內容中的 Django 架構。 Visual Studio 提供專案範本，以簡化 Django 型 Web 應用程式的建立。

在本教學課程中，您會了解如何：

• 使用 [空白 Django Web 專案] 範本在 Git 存放庫中建立基本的 Django 專案 (步驟 1)。
• 建立具有單一頁面的 Django 應用程式，然後使用範本轉譯該頁面 (步驟 2)。
• 提供靜態檔案、新增頁面，然後使用範本繼承 (步驟 3)。
• 使用 Django Web 專案範本建立具有多個頁面與回應式設計的應用程式 (步驟 4)。
• 驗證使用者 (步驟 5)。

必要條件

• 含下列選項的 Windows 上 Visual Studio 2022：
  • Python 開發 工作負載 (安裝程式的 [工作負載] 索引標籤)。 如需詳細指示，請參閱在 Visual Studio 中安裝 Python 支援。
  • Git for Windows 在 [程式碼工具] 底下的 [個別元件] 索引標籤上。

Django 專案範本也包含舊版的適用於 Visual Studio 的 Python 工具。 範本詳細資料可能與本教學課程中討論的內容不同 (尤其是與舊版 Django 架構不同)。

Visual Studio for Mac 目前不支援 Python 開發。 在 Mac 和 Linux 上，請使用 Visual Studio Code 中的 Python 延伸模組。

「Visual Studio 專案」和「Django 專案」

在 Django 術語中，「Django 專案」有數個站台層級組態檔，以及一或多個「應用程式」。若要建立完整的 Web 應用程式，您可以將這些應用程式部署至 Web 主機。 Django 專案可包含多個應用程式，而且相同的應用程式可以存在於多個 Django 專案中。

Visual Studio 專案可包含 Django 專案以及多個應用程式。 本教學課程中若單獨提到「專案」，皆是指 Visual Studio 專案。 當內容所指的是 Web 應用程式的「Django 專案」部分時，會特別提及「Django 專案」。

在本教學課程中，您將建立單一 Visual Studio 方案，其中包含三個不同的 Django 專案。 每個專案都包含單一 Django 應用程式。 透過將專案保留在相同方案中，可讓您輕鬆地在不同的檔案之間切換，以進行比較。

步驟 1-1：建立 Visual Studio 專案和解決方案

從命令列使用 Django 時，您通常會執行 django-admin startproject <project_name> 命令來啟動專案。 在 Visual Studio 中，[空白 Django Web 專案] 範本可在 Visual Studio 專案和方案內提供相同的結構。

1. 在 Visual Studio 中，選取 [檔案]> [新增]> [專案]，並搜尋 "Django"，選取 [空白 Django Web 專案] 範本，然後選取 [下一步]。

   

2. 輸入下列資訊，然後選取 [建立]：

   • 專案名稱：將 Visual Studio 專案名稱設定為 BasicProject。 此名稱也會用於 Django 專案。
   • 位置：指定要在其中建立 Visual Studio 方案和專案的位置。
   • 方案：讓此控制項保持設定為預設的 [建立新方案] 選項。
   • 方案名稱：設定為 LearningDjango，其適用於本教學課程中作為多個專案容器的方案。

步驟 1-2：檢查 Git 控制項並發佈至遠端存放庫

在此步驟中，您將熟悉 Visual Studio 的 Git 控制項和 Team Explorer。 使用 Team Explorer 視窗，您將使用原始檔控制。

1. 若要將專案認可至本機原始檔控制：

   1. 選取 Visual Studio 主視窗下角的 [新增至原始檔控制] 命令。
   2. 然後，選取 Git 選項。
   3. 現在會帶您前往 [建立 Git 存放庫] 視窗，您可以在其中建立並推送新的存放庫。

   

2. 建立存放庫之後，底部會出現一組新的 Git 控制項。 從左至右，這些控制項會顯示未推送的認可、未認可的變更、最新分支，以及存放庫的名稱。

   

3. 選取 [Git 變更] 按鈕。 Visual Studio 接著會在 Team Explorer 中開啟 [Git 變更] 頁面。 由於新建立的專案已經自動認可至原始檔控制，您不會看到任何暫止的變更。

   

4. 在 Visual Studio 狀態列上，選取未推送認可按鈕 (具有 2 的向上箭頭)，以在 Team Explorer 中開啟 [同步處理] 頁面。 [同步] 頁面提供簡單的選項，可將本機存放庫發佈至不同的遠端存放庫。

   

   您可以選擇專案所需的任何服務。 本教學課程示範如何使用 GitHub，用於教學課程的完整範例程式碼維護於 Microsoft/python-sample-vs-learning-django 存放庫中。

5. 選取任何 [發佈] 控制項時，[Team Explorer] 會提示您輸入更多資訊。 例如，發佈此教學課程的範例時，必須先建立存放庫本身，而在此情況下，[推送至遠端存放庫] 選項已與存放庫的 URL 搭配使用。

   

   如果您尚無現有存放庫，[發佈至 GitHub] 與 [推送至 Azure DevOps] 選項可讓您直接在 Visual Studio 內建立存放庫。

6. 隨著您逐步完成本教學課程，請建立定期使用 Visual Studio 中的控制項來認可並推送變更的習慣。 本教學課程會合適的時機點提醒您。

提示

若要在 Team Explorer 內快速瀏覽，請選取標題 (在上面影像中標為 [變更] 或 [推送]) 以查看可用頁面的快顯功能表。

問題：從專案一開始就使用原始檔控制會有哪些優點？

回答：從一開始就使用原始程式碼控制 (特別是在您也使用遠端存放庫時)，可為專案提供定期的異地備份。 不同於在本機檔案系統上維護專案，原始檔控制能提供完整的變更記錄，並能輕易將單一檔案或整個專案還原至其先前的狀態。 變更記錄可協助判斷迴歸 (測試失敗) 的原因。 當多人一起處理專案時，原始檔控制會管理覆寫並提供衝突解決。

最後，原始檔控制基本上是一種自動化的形式，可為您設定自動化建置、測試和發行管理。 這是針對專案使用 DevOps 的第一個步驟。 沒有理由不從一開始便使用原始檔控制，因為進入障礙很低。

如需原始檔控制作為自動化的進一步討論，請參閱 MSDN Magazine 針對行動應用程式 (但也同樣適用於 Web 應用程式) 所撰寫的文章：本質來源：存放庫在 DevOps 中的角色 (英文)。

問題：我能夠避免 Visual Studio 自動認可新專案嗎？

回答：是。 若要停用自動認可，請移至 Team Explorer 中的 [設定] 頁面。 選取 Git> [全域設定]，清除 [依預設在合併後提交變更] 選項，然後選取 [更新]。

步驟 1-3：建立虛擬環境並將它從原始檔控制中排除

在您為專案設定原始檔控制之後，便可以建立包含專案所需之 Django 套件的虛擬環境。 接著，您可以使用 [Team Explorer] 將環境的資料夾從原始檔控制中排除。

1. 在 [方案總管] 中，以滑鼠右鍵按一下 [Python 環境] 節點，然後選取 [新增環境]。

   

2. 在 [新增虛擬環境] 對話方塊中，選取 [建立] 以接受預設值。 (您可以視需要變更虛擬環境的名稱，這只會變更其子資料夾的名稱，但 env 為標準慣例)。

   

3. 如果出現提示，請同意管理員權限，然後等候幾分鐘讓 Visual Studio 下載並安裝封裝。 在此期間，有數千個檔案會傳輸至許多子資料夾。 您可以在 Visual Studio 的 [輸出] 視窗中查看進度。 您可在等候期間思考下方的＜問題＞小節。

4. 在 Visual Studio Git 控制項 (位於狀態列) 上，選取變更指標 (顯示 99*)，這會在 [Team Explorer] 中開啟 [變更] 頁面。

   建立虛擬環境帶來了數千個變更，但是並不需要將其中任何一個變更包含在原始檔控制中，因為您 (或複製專案的任何其他人) 隨時可從 requirements.txt 重新建立環境。

5. 若要排除虛擬環境，請以滑鼠右鍵按一下 env 資料夾，然後選取 [略過這些本機項目]。

   

6. 排除虛擬環境之後，剩下的變更都是針對專案檔和 .gitignore 檔案的變更。 .gitignore 檔案包含針對虛擬環境資料夾的新增項目。 您可以按兩下該檔案以查看差異。

7. 輸入認可訊息並選取 [全部認可] 按鈕，然後將認可推送至遠端存放庫。

問題：為什麼我要建立虛擬環境？

答案：虛擬環境是隔離應用程式確切相依性的絕佳方法。 這類隔離方式可避免在全域 Python 環境中發生衝突，並協助測試和共同作業。 隨著您持續開發應用程式，不免會帶入許多有用的 Python 套件。 您可以藉由將封裝保留在專案特定的虛擬環境中，輕鬆地更新專案 requirements.txt 檔案。 requirements.txt 檔案描述包含在原始檔控制中的環境。 將專案複製到任何其他電腦 (包括建置伺服器、部署伺服器及其他開發電腦) 時，只要使用 requirements.txt 就能輕鬆重新建立環境 (這就是為何環境不需要位於原始檔控制中的原因)。 如需詳細資訊，請參閱使用虛擬環境。

問題：我要如何移除已認可至原始檔控制的虛擬環境？

回答：首先，編輯您的 .gitignore 檔案以排除該資料夾。 在結尾尋找註解為 # Python Tools for Visual Studio (PTVS) 的區段，然後為虛擬環境資料夾新增新行，例如 /BasicProject/env。 （Visual Studio 不會在 中顯示檔案方案總管。若要直接開啟檔案，請移至 [檔案>開啟>檔案]。您也可以從 Team Explorer 開啟檔案。移至 [設定] 頁面，然後選取 [存放庫 設定]。現在，流覽至 [忽略和屬性檔案] 區段，然後選取 .gitignore 旁的 [編輯] 連結。

其次，開啟命令視窗，瀏覽至 BasicProject 之類的資料夾。 BasicProject 資料夾包含虛擬環境資料夾，例如 env，然後執行 git rm -r env。 接著，從命令列 (git commit -m 'Remove venv') 認可那些變更，或是從 [Team Explorer] 的 [變更] 頁面認可它們。

步驟 1-4：檢查未定案程式碼

專案建立完成之後，請檢查未定案的 Django 專案程式碼 (這同樣和 CLI 命令 django-admin startproject <project_name> 所產生的程式碼相同)。

1. 位於專案根目錄中的是 manage.py，這是 Visual Studio 自動設定為專案啟動檔案的 Django 命令列系統管理公用程式。 您需在命令列上使用 python manage.py <command> [options] 來執行該公用程式。 針對一般 Django 工作，Visual Studio 會提供方便的功能表命令。 以滑鼠右鍵按一下 [方案總管] 中的專案，然後選取 [Python] 以查看清單。 在本教學課程的課程中，您將遇到其中一些命令。

   

2. 在您的專案中，有與專案同名的資料夾。 其中包含基本的 Django 專案檔：

   • __init.py：告訴 Python 此資料夾為 Python 封裝的空白檔案。
   • settings.py：包含 Django 專案的設定，您將在開發 Web 應用程式的過程中修改。
   • urls.py：包含 Django 專案的目錄，您也將在開發過程中修改。
   • wsgi.py：供 WSGI 相容的網頁伺服器服務您專案的進入點。 您通常會以現況保留此檔案，因為它可為實際執行的網頁伺服器提供勾點。

   

3. 如前文所述，Visual Studio 範本也會將指定 Django 套件相依性的 requirements.txt 檔案新增至專案。 正是因為這個檔案，系統才會在您首次建立專案時邀請您建立虛擬環境。

問題：Visual Studio 是否可以在我安裝其他套件之後，從虛擬環境產生 requirements.txt 檔案？

回答：是。 展開 [Python 環境] 節點，以滑鼠右鍵按一下虛擬環境，然後選取 [產生 requirements.txt] 命令。 在您修改環境時，最好定期使用此命令，並將對 requirements.txt 的變更，連同依存於該環境的任何其他程式碼變更認可至原始檔控制。 如果您在組建伺服器上設定持續整合，每當您修改環境時，都應該產生該檔案並認可變更。

步驟 1-5：執行空白 Django 專案

1. 在 Visual Studio 中，選取 [偵錯]>[開始偵錯] (F5) 或使用工具列上的 [網頁伺服器] 按鈕 (您所看到的瀏覽器可能會不同)：

   

2. 執行伺服器表示執行命令 manage.py runserver <port>，其會啟動 Django 的內建開發伺服器。 如果 Visual Studio 表示無法啟動偵錯工具，且包含指出沒有啟動檔案的訊息，請以滑鼠右鍵按一下 [方案總管] 中的 [manage.py]，然後選取 [設定為啟動檔案]。

3. 當您啟動伺服器時，會看到主控台視窗隨即開啟，同時顯示伺服器記錄檔。 Visual Studio 會自動開啟瀏覽器並前往 http://localhost:<port>。 由於 Django 專案沒有應用程式，Django 只會顯示預設頁面，以確認到目前為止您擁有的項目可正常運作。

   

4. 當您完成時，請關閉主控台視窗，或在 Visual Studio 中使用 [偵錯]>[停止偵錯] 命令來停止伺服器。

問題：Django 是網頁伺服器和架構嗎？

回答：可以說是，也可以說不是。 Django 有用於開發用途的內建網頁伺服器。 此網頁伺服器會在您於本機執行 Web 應用程式 (例如在 Visual Studio 中進行偵錯) 時使用。 不過，當您部署至 Web 主機時，Django 會改為使用主機的 Web 伺服器。 Django 專案中的 wsgi.py 模組會負責連結到實際執行伺服器。

問題：使用 [偵錯] 功能表命令和使用專案 Python 子功能表上的伺服器命令，兩者有何差異？

回答：除了 [偵錯] 功能表命令與工具列按鈕之外，您也可以使用專案內容功能表上的 [Python]>[執行伺服器]或 [Python]>[執行偵錯伺服器] 命令來啟動伺服器。 這兩個命令都會開啟主控台視窗，在其中您將看到執行中伺服器的本機 URL (localhost:port)。 不過，您必須使用該 URL 手動開啟瀏覽器，執行偵錯伺服器並不會自動啟動 Visual Studio 偵錯工具。 如果需要，您可以使用 [偵錯]> [附加至處理序] 命令，將偵錯工具附加至執行中的處理序。

下一步

此時，基本的 Django 專案並不會包含任何應用程式。 您將在下一個步驟中建立應用程式。 由於您將使用 Django 應用程式的次數會超過 Django 專案，因此您現在不需要深入了解樣板檔案。

使用檢視與頁面範本建立 Django 應用程式

深入了解

• Django 專案程式碼：撰寫第一個 Django 應用程式，第 1 部分 \(英文\) (docs.djangoproject.com)
• 系統管理公用程式：django-admin 與 manage.py \(英文\) (docs.djangoproject.com)
• GitHub 上的教學課程原始程式碼：Microsoft/python-sample-vs-learning-django