共用方式為

教學課程：在Visual Studio中使用完整的 Django Web 專案範本

本文介紹教學課程系列 在 Visual Studio 中使用 Django Web 框架的第 4 步。

本教學課程系列中的先前步驟會為兩個應用程式建立Visual Studio解決方案和 Django 專案。 BasicProject 是以空白 Django Web 專案範本為基礎的基本應用程式，HelloDjangoApp 會使用 Django 1.9 應用程式範本來提供具有 HTML 範本頁面檢視的靜態檔案。

在步驟 4 中，您會根據完整的 Django Web 專案 範本，將第三個 Django 應用程式新增至解決方案。 此範本可協助您建立更完整的 Django 應用程式，其中包含繼承自基底頁面範本的三個頁面。 應用程式會採用靜態 JavaScript 連結庫，例如 jQuery 和 Bootstrap。 範本的驗證功能會在教學課程系列 的最後一個步驟中說明。

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

  • 使用 Django Web 專案 範本建立更完整的 Django Web 應用程式
  • 檢閱範本所提供的 Django 項目結構
  • 探索專案範本所建立的視圖和頁面範本
  • 檢查範本所提供的 URL 路由

先決條件

從範本建立專案

請遵循下列步驟，從完整的 Django Web 專案 範本建立 Django Web 應用程式：

  1. 在 Visual Studio 中，移至 [方案總管]，以滑鼠右鍵按兩下 LearningDjango 方案，然後選取 [新增 >新增專案]。

    注意

    教學課程系列的步驟 1 會建立 LearningDjango Visual Studio 解決方案，以包含本系列中所述的所有 Django 專案。 藉由將所有 Django 專案保留在相同的解決方案中，您可以輕鬆地在不同檔案之間來回切換以進行比較。

    如果您想要在本教學課程步驟中使用 Django 專案的個別 Visual Studio 解決方案，請改為選取 [檔案]>[新增>專案]。

  2. 在 [[新增專案] 對話框中，搜尋 “Django”，選擇 Django Web 專案 範本，然後選取 [下一步] 。

  3. 設定您的新項目：

    1. 將項目的 名稱 設定為 DjangoWeb。

    2. 指定 Visual Studio 位置 來儲存專案。 （預設為解決方案和現有 Django 專案的目前位置。

  4. 選取 ，建立。

建立虛擬環境

在 Visual Studio 起始專案建立之後，您應該會在專案 「DjangoWeb」 中偵測到 Python 套件規格檔案 「requirements.txt」 訊息提示字元。：

顯示Visual Studio中 Django Web 專案需求檔案偵測訊息提示的螢幕快照。

訊息指出選取的範本包含 requirements.txt 檔案，可用來建立專案的虛擬環境。

重要

如果您沒有看到訊息提示，當您在下一節嘗試建立 Django 進階使用者時，可能會遇到錯誤。

確認 Visual Studio 會辨識專案的 requirements.txt 檔案。 在 [方案總管]中，展開 [DjangoWeb 專案] 資料夾，然後開啟 requirements.txt 檔案。 Visual Studio 應該如預期般顯示訊息提示。

請遵循下列步驟來設定虛擬環境：

  1. 在訊息提示時，選取連結以安裝至或建立 虛擬環境。

  2. 在 [新增虛擬環境] 對話框中，選取 [建立]，以接受預設值。

建立 Django 進階使用者

在 Visual Studio 建立 DjangoWeb 項目之後，專案 readme.html 檔案隨即開啟。 此檔案包含為專案建立 Django 進階使用者（也就是系統管理員）的指示。

請遵循下列步驟來建立 Django 超級使用者：

  1. 在 [方案總管]中，以滑鼠右鍵按兩下 djangoWeb 專案，選取 [Python]，然後選取 [Django Create Superuser：

    顯示如何在 Visual Studio 中為項目選取 Django 建立超級使用者命令的螢幕快照。

  2. 在提示中，輸入專案的帳戶詳細數據，包括使用者名稱、密碼和電子郵件位址。

    您不需要使用現有帳戶的安全性認證。 您可以建立新的使用者名稱和密碼，以特別搭配 Django Web 應用程式使用。

  3. 記錄認證以供日後使用。 您需要認證才能執行 Web 應用程式的驗證功能。

執行 Django Web 專案

現在您已準備好執行 Django Web 應用程式，並查看範本所提供的功能：

  1. 在 [方案總管]中，以滑鼠右鍵按兩下 [DjangoWeb 專案]，然後選取 [[設定為啟始專案]。

    此命令會將選取的項目設定為 Visual Studio 解決方案的預設 啟動專案。 當您啟動 調試程式時，Visual Studio 會執行啟動專案的程序代碼。 [方案總管]中，方案啟動專案的名稱會以粗體顯示：

  2. 選取 [偵錯]>[開始偵錯] [F5] 或使用工具列上的 [Web Server] 按鈕來執行伺服器：

    顯示 Visual Studio 主要工具列上 Web Server 命令的螢幕快照。

探索 Web 應用程式頁面

範本所建立的應用程式有三個頁面：「首頁」、「關於」和「連絡人」。導覽列上每個頁面都有連結。

顯示瀏覽器中執行 Django Web 專案應用程式的螢幕快照。

  1. 請嘗試使用導覽列上的選項在頁面之間切換。

  2. 檢查執行中應用程式的不同部分，包括頁面內容。 請注意 URL 位址路由如何根據目前的頁面變更。

  3. 選取導覽列上的 [登入] 選項，以向應用程式進行驗證。 輸入您在上一節中提供的進階用戶認證。

  4. Django Web 專案 樣本所建立的應用程式會使用 Bootstrap 進行回應式配置，以配合行動尺寸。 若要查看此響應性，請將瀏覽器大小調整為窄檢視，使內容以垂直方式顯示，而導覽列會變成選單圖示：

    在瀏覽器中拍攝的螢幕快照，顯示了 Django Web 應用程式在行動版（窄）檢視下，導覽列轉換為下拉選單。

您可以在下一節中讓應用程式執行練習。

如果您要儲存您的工作，請停止應用程式，並遵循本教學課程系列先前步驟中的指示：

檢查 Web 應用程式項目結構

Django Web 專案 範本會在 Visual Studio 中建立具有下列結構的 Web 應用程式專案：

  • DjangoWeb Visual Studio 專案根目錄中的檔案：

    • manage.py：Django 系統管理公用程式。
    • db.sqlite3：預設 SQLite 資料庫。
    • requirements.txt：識別專案中相依於 Django 1.x 的套件。
    • readme.html：包含 Web 應用程式的相關信息，包括需求和重要的使用程式。 Visual Studio 會在建立項目之後顯示此檔案。 如先前所述，此檔案具有為應用程式建立進階使用者（系統管理員）帳戶的指示。

  • DjangoWeb/app 資料夾：

    此資料夾包含所有應用程式檔案，包括 檢視、模型、測試、窗體。 此資料夾也有包含檔案的子資料夾，包括 樣本、移轉，以及 靜態。 您通常會將 應用程式重新命名 資料夾，以使用更獨特的名稱，例如應用程式名稱本身。

  • DjangoWeb/DjangoWeb 資料夾：

    此資料夾是 Django 項目資料夾。 其中包含典型的 Django 專案檔：__init__.py、settings.py、urls.py和 wsgi.py。 已使用專案範本，為應用程式和資料庫檔案設定 settings.py 檔案。 urls.py 檔案也已設定所有應用程式頁面的路由，包括 登入表單。

在 Visual Studio 專案之間共用虛擬環境

您可以在 Visual Studio 專案之間共用虛擬環境。 不過，請記住，不同的專案可能會隨著時間使用不同的套件。 共用虛擬環境必須包含使用該虛擬環境的所有專案的所有套件。

若要使用現有的虛擬環境，請遵循下列步驟：

  1. 當系統提示您在 Visual Studio 中安裝相依性時，請選取「我將自行安裝相依性」選項。

  2. 在 [方案總管]中，以滑鼠右鍵按兩下 [Python 環境] 節點，然後選取 [[新增現有的虛擬環境]。

  3. 瀏覽至並選取包含虛擬環境的資料夾，然後選取 [確定] [確定]。

檢查視圖和頁面範本

Django Web 專案 所建立頁面檢視的程式代碼位於專案的 app/views.py 檔案中。 每個檢視函式都會將範本的路徑和一個簡單的字典物件一起傳給 django.shortcuts.render 協助程式函式。 about 函式會在 Web 應用程式中建立 [關於] 頁面的檢視：

def about(request):
   """Renders the about page."""
   assert isinstance(request, HttpRequest)
   return render(
      request,
      'app/about.html',
      {
         'title':'About',
         'message':'Your application description page.',
         'year':datetime.now().year,
      }
   )

檢視的 HTML 頁面範本位於專案的 app/templates/app 資料夾中（您通常會重新命名）。 基底範本 layout.html是最廣泛的範本。 檔案是指應用程式檢視所需的所有靜態檔案 （JavaScript 和 CSS）。

此樣本也會定義兩個 block 區段：content 和 scripts。 其他 Web 應用程式頁面會覆寫 layout.html 檔案中的 {% block content %} 區段。 您可以在此批註版本的 layout.html 檔案中，查看 <body> 元素內的兩個 block 區段：

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8" />

   <!-- Define viewport for Bootstrap's responsive rendering -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ title }} - My Django Application</title>

   {% load staticfiles %}
   <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
   <link rel="stylesheet" type="text/css" href="{% static 'app/content/site.css' %}" />
   <script src="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>
</head>

<body>
   <!-- Navigation bar section omitted in this excerpt -->

   <div class="container body-content">

<!-- Content block - App pages override this block -->
{% block content %}
{% endblock %}

      <!-- App header and footer content -->
      <hr/>
      <footer>
         <p>&copy; {{ year }} - My Django Application</p>
      </footer>

   </div>

   <script src="{% static 'app/scripts/jquery-1.10.2.js' %}"></script>
   <script src="{% static 'app/scripts/bootstrap.js' %}"></script>
   <script src="{% static 'app/scripts/respond.js' %}"></script>

<!-- Scripts block - List page-specific scripts in this block -->
{% block scripts %}
{% endblock %}

</body>

</html>

個別 HTML 頁面範本、about.html、contact.html和 index.html，每個範本都會擴充基底範本 layout.html。 about.html 範本檔案是最簡單的範本檔案，並顯示 {% extends %} 標籤和 {% block content %} 區段：

{% extends "app/layout.html" %}

<!-- Content block overrides "content" block in layout template -->
{% block content %}

<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>

<p>Use this area to provide additional information.</p>

{% endblock %}

index.html 和 contact.html 範本檔案使用相同的結構，並在 content 區塊中提供更多指示。

應用程式/範本/應用程式 資料夾包含另外兩個 HTML 頁面範本。 login.html 檔案會定義 [登入 應用程式] 頁面的頁面內容。 使用 {% include %} 語句將 loginpartial.html 檔案帶入 layout.html 檔案。 本教學課程系列 的最後一個步驟（驗證使用者） 會詳細說明這兩個範本檔案。

縮排範本中的 {% 區塊 %} 和 {% endblock %} 標籤

HTML 範例會顯示 Visual Studio 頁面範本中提供的標記。 請注意，block 標籤在標記中沒有縮排。 為了清楚地顯示 block 標籤的位置，Visual Studio 頁面範本不會縮排這些標籤。

不過，如果您縮排 block 標籤，Django 頁面範本會正常運作。 有些開發人員偏好在適當的父 HTML 元素內對齊標記。

檢查 URL 路由模式

Django 專案的 URL 檔案 （DjangoWeb/DjangoWeb/urls.py）由 Django Web 專案 範本所建立，包含下列程式代碼：

"""
Definition of urls for DjangoWeb
"""

from datetime import datetime
from django.urls import path
from django.contrib import admin
from django.contrib.auth.views import LoginView, LogoutView
from app import forms, views

urlpatterns = [
    path('', views.home, name='home'),
    path('contact/', views.contact, name='contact'),
    path('about/', views.about, name='about'),
    path('login/',
         LoginView.as_view
         (
             template_name='app/login.html',
             authentication_form=forms.BootstrapAuthenticationForm,
             extra_context=
             {
                 'title': 'Log in',
                 'year' : datetime.now().year,
             }
         ),
         name='login'),
    path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
    path('admin/', admin.site.urls),
]

前三個 URL 模式會直接對應至專案 app/views.py 檔案中定義的 home、contact和 about 檢視函式。 login/ 和 logout/ 模式會對應至應用程式的驗證功能。

特殊 URL 路由模式，例如 ^login/$ 和 ^logout$ 存取內建 Django 檢視，而不是應用程式定義的檢視。 調用 url 方法也包含額外的資料來自訂視圖。 本教學課程系列 最後一個步驟（驗證使用者） 說明如何使用 URL 呼叫。

探索 URL 模式的差異

在本教學課程系列 的第 步驟 3（HTML 範本繼承）中，「關於」頁面的路徑會使用 '^about$' 模式。 此模式與本教學課程步驟中呈現的 URL 路由不同。 根據您的樣本版本，範例程式代碼可能會將「關於」頁面 URL 模式顯示為 about/ 或 ^about，而不是 ^about$。

正則表達式缺少尾端美元符號 $ 是專案範本許多版本的疏忽。 URL 模式非常適合名為 「about」 或 「About」 的頁面。不過，如果沒有尾端 $ 字元，URL 模式也會比對 URL，例如 “about=django”、“about09876”、“about-face”等等。 結尾的$字元會形成URL模式，並確保只匹配“about”一詞。

下一步

步驟 5：在 Django 中驗證使用者