教學課程：在Visual Studio中使用檢視和頁面範本建立 Django 應用程式

發行項
01/27/2025

本篇文章呈現教學課程系列 中的步驟二，內容是介紹如何在 Visual Studio 中使用 Django 網頁框架。

Visual Studio 可讓您從專案範本建立 Django 應用程式，為專案提供更廣泛的起點。教學課程系列中的步驟 1 說明如何建立 Django 網站專案的站點層級組態檔，以支持一個或多個 Django web 應用程式。在步驟 2 中，您會將內容新增至 Django Web 專案，以使用具有多個轉譯檢視的單一頁面來建立您的第一個 Django Web 應用程式。

在教學課程的步驟 2 中，您將瞭解如何：

使用單一頁面建立 Django 應用程式
從 Django 專案執行應用程式
使用 HTML 呈現視圖
使用 Django 頁面範本渲染視圖

先決條件

步驟 1：建立 Visual Studio 方案和 Django 專案建立 Visual Studio 方案和 Django 專案。
如需有關 Django 範本版本、Visual Studio 專案與 Django 專案，以及 Mac 上 Python 開發的詳細資訊，請檢閱本教學課程系列的步驟 1 中的必要條件一節。

使用預設結構建立 Django 應用程式

Django 應用程式是個別的 Python 套件，其中包含一組特定用途的相關檔案。 Django 專案可以包含許多應用程式，可協助網頁主機從單一域名提供許多個別進入點（或路由）。例如，contoso.com 等網域的 Django 專案可能會包含一個適用於 www.contoso.com 路由的應用程式、support.contoso.com 路由的第二個應用程式，以及 docs.contoso.com 路由的第三個應用程式。在此案例中，Django 專案會處理 urls.py 和 settings.py 檔案中的網站層級 URL 路由和設定。每個應用程式都有自己的不同樣式和行為，透過其內部路由、檢視、模型、靜態檔案和系統管理介面。

Django 應用程式的開發通常以一組標準檔案開始。 Visual Studio 提供範本，以在 Django 專案中使用這些檔案初始化 Django 應用程式。還有一個整合的選單命令，具有同樣的功能。

使用範本建立應用程式

請遵循下列步驟，從範本建立應用程式：

在 [方案總管]中，以滑鼠右鍵按兩下 Visual Studio 專案（BasicProject），然後選取 [新增>新增專案]。
在 [新增項目] 對話框中，選取 [Django 1.9 應用程式] 範本：
1. 輸入應用程式 NameHelloDjangoApp。
2. 選取 ，新增。

請遵循下列步驟，使用整合式 Django 功能表命令來建立應用程式：

在 [方案總管]中，以滑鼠右鍵按兩下Visual Studio專案（BasicProject），然後選取 [新增>Django 應用程式]。
在 [[新增 Django 應用程式] 對話框中，輸入應用程式名稱 HelloDjangoApp：
選取 [確定] 。

探索 Django 應用程式資料夾

當您建立 HelloDjangoApp 應用程式時，Visual Studio 會在 Visual Studio 專案中建立具有相同名稱的資料夾：

資料夾包含下列項目：

項目	描述
移轉	Django 儲存用於更新資料庫以符合模型變更的腳本的資料夾。 Django 的移轉工具接著會將必要的變更套用至任何舊版的資料庫，以符合目前的模型。當您使用移轉時，您會將焦點放在模型上，並讓 Django 處理基礎資料庫架構。針對本教學課程系列中的練習，資料夾包含一個 __init__.py 檔案，表示資料夾會定義自己的 Python 套件。如需詳細資訊，請參閱 Django 檔。
__init__.py	init 檔案的存在會將 Django 應用程式識別為套件。
範本	Django 頁面範本的資料夾，其中包含單一 index.html 檔案。 index.html 檔案會放在與應用程式名稱相同的資料夾中。範本是 HTML 區塊，檢視可以新增資訊以動態呈現頁面。頁面範本「變數」，例如 index.html 檔案中的 `{{ content }}`，是動態值的佔位符，如本文稍後所述。通常，Django 應用程式會將其放在符合應用程式名稱的子資料夾中，為其範本建立命名空間。
admin.py	您擴充應用程式系統管理介面的 Python 檔案，用來檢視和編輯資料庫中的數據。一開始，這個檔案只包含語句，`from django.contrib import admin`。根據預設，Django 會透過 Django 專案 settings.py 檔案中的條目來包含標準管理介面。若要開啟介面，您可以移除註解 urls.py 檔案中的現有條目。
apps.py	Python 檔案，定義應用程式的組態類別。（請參閱下表後面的範例。
models.py	模型是由函式識別的數據對象，檢視會透過這些物件與應用程式的基礎資料庫互動。 Django 提供資料庫連接層，讓應用程式不關心模型詳細數據。 models.py 檔案是您建立模型的預設位置。一開始，models.py 檔案只包含語句，`from django.db import models`。
tests.py	包含單元測試基本結構的 Python 檔案。
views.py	檢視類似於網頁，其採用 HTTP 要求並傳回 HTTP 回應。通常，檢視會轉譯為 HTML，而網頁瀏覽器知道如何顯示，但檢視不一定必須可見（例如中繼表單）。 Python 函式會定義將 HTML 轉譯至瀏覽器的檢視。 views.py 檔案是您建立檢視的預設位置。一開始，views.py 檔案只包含語句，`from django.shortcuts import render`。

當您使用名稱「HelloDjangoApp」時，apps.py 檔案的內容如下所示：

from django.apps import AppConfig

class HelloDjangoAppConfig(AppConfig):
    name = 'HelloDjangoApp'

在 Visual Studio 中或從命令行建立應用程式

Add>Django app 命令和新增>新專案 命令（結合 Django 應用程式範本），會產生與 Django CLI 命令 manage.py startapp <app_name>相同的檔案。在 Visual Studio 中建立 Django 應用程式的優點是應用程式資料夾及其所有檔案都會自動整合到專案中。您可以使用相同的 Visual Studio 命令，在專案中建立任意數目的應用程式。

新增應用程式特定的頁面檢視

如果您在 Visual Studio 中執行目前的專案，方法是選取 [偵錯]>[開始偵錯] （F5）或主工具列上的 Web Server，您會看到預設的 Django 頁面。 Web 應用程式通常有多個具有不同檢視的頁面。應用程式 URL 位址的唯一路由會識別應用程式中的每個頁面。

請遵循下列步驟來定義應用程式特定的頁面檢視，並將應用程式新增至 Django 專案：

在 Visual Studio 專案的 HelloDjangoApp 子資料夾中，以下列程式代碼取代 views.py 檔案的內容：
```
from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, Django!")
```
此程式代碼會匯入必要的轉譯和 HTTP 定義，並定義名為 index的檢視。

在 Visual Studio 專案的 BasicProject 子資料夾中，修改 urls.py 檔案，以符合下列程式代碼。您可以保留目前檔案中的指示性批注，就像您偏好一樣。

from django.urls import include, re_path
import HelloDjangoApp.views

# Django processes URL patterns in the order they appear in the array
urlpatterns = [
    re_path(r'^$', HelloDjangoApp.views.index, name='index'),
    re_path(r'^home$', HelloDjangoApp.views.index, name='home')
]

每個 URL 模式都會描述 Django 如何路由與網站相關的 URL 的視圖（即在 URL 位址後面的路由部分 https://www.domain.com/）：

在 urlPatterns 定義中，以正規表示式 ^$ 開頭的第一個條目是網站根頁面的路由，/。
第二個條目 ^home$路由到應用程式 /home 頁面。

請注意，此範例程式代碼中的定義示範您可以有多個路由至相同的檢視。

使用（r）前置詞定義原始路由字串

Python 中路由字串中的 r 前置詞表示「原始」。此前置詞會指示 Python 不要逸出路由字串中的任何字元。路由字串的正則表達式會使用許多特殊字元。路由字串中的 r 前置詞比逸出字元 \更容易讀取。

在路由中使用插入號（^）和美元（$）字元

在定義 URL 模式的正規表示式中，插入符號 ^ 表示「行開頭」，而美元符號 $ 表示「行尾」。在與網站根目錄相關的 URL 中（應用程式地址之後的部分 https://www.domain.com/），這些字元的用法有多種：

正規表示式 ^$ 有效表示「空白」，並符合應用程式網站根目錄的完整 URL 位址，https://www.domain.com/。
模式 ^home$ 完全符合 https://www.domain.com/home/，這就是 /home所遵循的站點路由。（Django 在模式比對中不會使用尾端的斜線 /。）
如果您未在正則表示式中使用尾端美元符號 $，例如 ^home 路由字串，則 URL 模式比對適用於 開頭為 home 的任何 URL，例如 home、homework、homestead、home192837等等。

若要試驗不同的正則表示式，請在 pythex.org嘗試在線工具，例如 regex101.com。

從 Django 專案執行應用程式

新增應用程式特定內容之後，請再次執行您的應用程式，並在瀏覽器中檢查路由檢視：

當應用程式在瀏覽器中開啟時，請檢查瀏覽器內 /（網站根目錄）和 /home URL 路由的頁面檢視。針對這兩個路由，應用程式會在瀏覽器中顯示訊息 Hello, Django!。
完成時，請在控制台視窗中選取 [Ctrl+C]，後面接著任何索引鍵以停止應用程式。您也可以選擇 [偵錯]>[停止偵錯]。
關閉應用程式的任何開啟瀏覽器視窗。

提交版本控制的變更

更新 Django 應用程式程式代碼並測試更新之後，您可以檢閱並認可原始檔控制的變更：

將變更儲存至項目檔，例如使用 ctrl Ctrl+S 鍵盤快捷方式。
在 Git 控制項列上，選取鉛筆 11 的未提交的變更以開啟 [Git 變更] 視窗：
在 [Git 變更] 視窗中，輸入認可訊息，然後選取 [[全部認可]：

在提交完成時，Visual Studio 會顯示本機建立的 提交 <雜湊> 訊息。
（選擇性）將認可的變更推送至遠端存放庫：
1. 在 Git 控制列上，選取傳出/傳入的提交（箭號 1/0）。
2. 選取 [同步處理[提取]，然後選取 [推送]，或 [推送]。
您也可以在推送多個本地提交至遠端存放庫之前，先累積這些本地提交。

將變更儲存至項目檔，例如使用 ctrl Ctrl+S 鍵盤快捷方式。
在 Visual Studio 的右下角選取未提交的變更（鉛筆 11），這會開啟 [Team Explorer]：
在 Team Explorer中，輸入「建立 Django 應用程式特定頁面」的認可訊息，然後選取 全部認可。

認可完成時，Visual Studio 會顯示在本機建立 認可 <哈希> 訊息。同步處理以與伺服器共享變更。
（選擇性）將認可的變更推送至遠端存放庫：
1. 在 Team Explorer中，選取 Sync。
2. 展開 [傳出認可]，然後選取 [推送]。
您也可以在將本地的多個提交推送至遠端存儲庫之前，先累積這些提交。

針對本教學課程系列中的後續程序，您可以參閱本節，以取得提交版本控制中變更的步驟。

使用範本來呈現頁面和視圖

views.py 檔案中的 index 函式會產生 Django 應用程式頁面的純文字 HTTP 回應。大部分真實世界的網頁都會回應豐富的 HTML 頁面，這些網頁通常會併入實時數據。開發人員使用函式定義檢視的主要原因，是動態產生內容。

HttpResponse 方法的自變數只是字串。您可以使用動態內容，在字串內建置任何 HTML。因為最好將標記與數據分開，所以最好將標記放在範本中，並將數據保留在程式代碼中。

調整視圖以使用內嵌 HTML

將檢視處理轉換為針對具有某些動態內容的頁面使用內嵌HTML。

在 Visual Studio 專案的 HelloDjangoApp 子資料夾中，開啟 views.py 檔案。

以下列程式代碼取代 index 函式（保留現有的 from 語句）：

from datetime import datetime

def index(request):
   now = datetime.now()

   html_content = "<html><head><title>Hello, Django</title></head><body>"
   html_content += "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
   html_content += "</body></html>"

   return HttpResponse(html_content)

修訂后的 index 函式會使用每次重新整理頁面時更新的動態內容來產生 HTML 回應。

儲存您的變更，然後再次執行您的應用程式。頁面現在會顯示目前的日期和時間，以及「Hello Django！ 訊息。
請重新整理頁面幾次，以確認日期和時間是否更新。完成時，請停止應用程式。

建立網頁檢視的 HTML 範本

在程式代碼中產生 HTML 適用於小型頁面。不過，隨著頁面變得更複雜，您必須將頁面的靜態 HTML 元件（以及 CSS 和 JavaScript 檔案的參考）維護為「頁面範本」。接著，您可以將動態程式代碼產生的內容插入頁面範本。在上一節中，只有來自 now.strftime 呼叫的日期和時間是動態的，這表示所有其他內容都可以放在頁面範本中。

Django 頁面範本是一個 HTML 區塊，其中包含多個稱為「變數」的替換標記。這些變數由開括號 {{ 和關括號 }} 標示，例如 {{ content }}。 Django 的範本模組接著會以您在程式代碼中提供的動態內容取代變數。

請遵循下列步驟，將頁面轉譯程式轉換為使用 HTML 範本：

在 Visual Studio 專案的 HelloDjangoApp 子資料夾中，開啟 settings.py 檔案。
更新 INSTALLED_APPS 定義中的應用程式參考，以包含應用程式名稱 HelloDjangoApp。將應用程式名稱新增為清單中的第一個專案：
```
INSTALLED_APPS = [
    'HelloDjangoApp',
    # Existing entries in the list ...
]
```
將應用程式新增至清單會通知 Django 專案，有一個名為 HelloDjangoApp 的資料夾 包含應用程式。
確認 TEMPLATES 物件組態會將 APP_DIRS 設為 True：
```
'APP_DIRS': True,
```
此語句會指示 Django 在已安裝應用程式的範本資料夾中尋找範本。（此語句預設應包含在定義中。
在 HelloDjangoApp 子資料夾中，開啟 templates/HelloDjangoApp/index.html 頁面範本檔案。
確認檔案只包含一個變數，{{ content }}：
```
<html>
 <head>
 <title></title>
 </head>

 <body>
 {{ content }}
 </body>
</html>
```
{{ content }} 語句是佔位符或取代令牌（也稱為 範本變數），您可以在程式代碼中提供值。
在 Visual Studio 專案的 HelloDjangoApp 子資料夾中，開啟 views.py 檔案。
以下列程式代碼取代 index 函式，以使用 django.shortcuts.render 協助程式函式（保留現有的 from 語句）：
```
def index(request):
 now = datetime.now()

 return render(
 request,
 "HelloDjangoApp/index.html", # Relative path from the 'templates' folder to the template file
 {
 'content': "Hello Django! on " + now.strftime("%A, %d %B, %Y at %X")
 }
 )
```
render 輔助函式提供簡化介面以便操作頁面範本。此函式有三個自變數：
- 請求物件。
- 應用程式 範本資料夾內範本檔案的相對路徑。如果適當的話，範本檔案會針對它支援的檢視命名。
- 範本所參考之變數的字典。您可以在字典中包含物件，其中模板中的變數可以參考 {{ object.property }}。
儲存您的項目變更，然後再次執行應用程式。

請注意，content 值內的內嵌 HTML 語法（\ ...）不會將 轉譯為 HTML，因為範本化引擎（Jinja）會自動逸出 HTML 內容。自動逸出可防止意外的插入式攻擊弱點。

開發人員通常會從一個頁面收集輸入，然後使用範本佔位元將其作為另一個頁面的值。逸出也提醒您最好讓 HTML 遠離程式代碼。

完成時，請停止應用程式。

使用不同佔位符

您可以在 HTML 標記內針對每個數據片段使用相異的佔位元。然後，再次調整您的 index 函式，以提供特定的佔位元值：

以下列標記取代 templates/HelloDjangoApp/index.html 頁面範本檔案的內容：
```
<html>
 <head>
 <title>{{ title }}</title>
 </head>
 <body>
 {{ message }}{{ content }}
 </body>
</html>
```
此 HTML 標記會新增頁面標題，並保留頁面範本中的所有格式設定。

在 HelloDjangoApp/views.py 檔案中，以下列程式代碼取代 index 函式：

def index(request):
    now = datetime.now()

    return render(
        request,
        "HelloDjangoApp/index.html",  # Relative path from the 'templates' folder to the template file
        # "index.html", # Use this code for VS 2017 15.7 and earlier
        {
            'title' : "Hello Django",
            'message' : "Hello Django!",
            'content' : " on " + now.strftime("%A, %d %B, %Y at %X")
        }
    )

此程式代碼會提供頁面範本中所有變數的值。

儲存您的變更，然後再次執行您的應用程式。這次您應該會看到正確呈現的輸出：
您可以將變更提交至原始碼控制，並更新遠端存放庫。如需詳細資訊，請參閱將變更提交至版本控制。

個別頁面範本

範本通常會在不同的 HTML 檔案中維護，但您也可以使用內嵌範本。建議使用不同的檔案，以維持標記和程式碼之間的明確分離。

針對範本使用 .html 擴充功能

頁面範本檔案的 .html 擴展名完全是選擇性的。您一律可以在 render_template 函式的第一個自變數中識別檔案的確切相對路徑。不過，Visual Studio（和其他編輯器）通常會使用 .html 檔案提供程式碼完成和語法著色等功能，這超過頁面範本不是 HTML 的事實。

當您使用 Django 專案時，Visual Studio 會自動偵測您正在編輯的 HTML 檔案是否實際上是 Django 範本，並提供特定的自動完成功能。如果您開始輸入 Django 模板註解（{#），Visual Studio 會自動添加結尾的 #} 字元。 批注選取 和 取消批注選取 命令 （在 [編輯>進階] 功能表上，也會使用範本批註，而不是 HTML 批注。

問題疑難排解

當您執行應用程式時，可能會遇到與應用程式範本檔案相關的問題。請檢閱下列幾點，並確定 Django 專案組態正確無誤。

找不到範本

如果 Django 或 Visual Studio 顯示找不到範本錯誤，請確定您的應用程式位於 INSTALLED_APPS 清單中。此清單位於Visual Studio專案應用程式子資料夾下的 settings.py 檔案中（例如 HelloDjangoApp）。如果列表中沒有應用程式的專案，Django 不知道要查看應用程式的範本資料夾。

重複的範本結構

當 Django 在 render 函式中尋找參考的範本時，它會使用符合相對路徑的第一個檔案。如果您在相同專案中有多個 Django 應用程式，且範本的資料夾結構相同，則一個應用程式可能會不小心從另一個應用程式使用範本。若要避免這類錯誤，請一律在應用程式 範本底下建立子資料夾， 符合應用程式名稱的資料夾，以避免任何重複。

下一步

步驟 3：提供靜態檔案、新增頁面，以及使用範本繼承

共用方式為

教學課程：在Visual Studio中使用檢視和頁面範本建立 Django 應用程式

先決條件

使用預設結構建立 Django 應用程式

使用範本建立應用程式

使用整合式功能表命令來建立應用程式

探索 Django 應用程式資料夾

在 Visual Studio 中或從命令行建立應用程式

新增應用程式特定的頁面檢視

使用（r）前置詞定義原始路由字串

在路由中使用插入號（^）和美元（$）字元

從 Django 專案執行應用程式

提交版本控制的變更

使用範本來呈現頁面和視圖

調整視圖以使用內嵌 HTML

建立網頁檢視的 HTML 範本

使用不同佔位符

個別頁面範本

針對範本使用 .html 擴充功能

問題疑難排解

找不到範本

重複的範本結構

下一步

意見反應

其他資源

共用方式為

教學課程：在Visual Studio中使用檢視和頁面範本建立 Django 應用程式

先決條件

使用預設結構建立 Django 應用程式

使用範本建立應用程式

使用整合式功能表命令來建立應用程式

探索 Django 應用程式資料夾

在 Visual Studio 中或從命令行建立應用程式

新增應用程式特定的頁面檢視

使用 （r） 前置詞定義原始路由字串

在路由中使用插入號 （^） 和美元 （$） 字元

從 Django 專案執行應用程式

提交版本控制的變更

使用範本來呈現頁面和視圖

調整視圖以使用內嵌 HTML

建立網頁檢視的 HTML 範本

使用不同佔位符

個別頁面範本

針對範本使用 .html 擴充功能

問題疑難排解

找不到範本

重複的範本結構

下一步

意見反應

其他資源

使用（r）前置詞定義原始路由字串

在路由中使用插入號（^）和美元（$）字元