教程：在 Visual Studio 中创建具有视图和页面模板的 Django 应用

本文介绍本教程系列中的步骤 2 在 Visual Studio中使用 Django Web 框架。

Visual Studio 允许你从项目模板创建 Django 应用程序，以便为项目提供更广泛的起点。 本教程系列 步骤 1 介绍了如何为 Django Web 项目创建站点级配置文件以支持一个或多个 Django Web 应用。 在步骤 2 中，将内容添加到 Django Web 项目，以创建具有多个呈现视图的单个页面的第一个 Django Web 应用。

在本教程的步骤 2 中，你将了解如何：

先决条件

• 在 步骤 1 中创建的 Visual Studio 解决方案和 Django 项目：创建 Visual Studio 解决方案和 Django 项目。

• 有关 Django 模板版本、Visual Studio 项目与 Django 项目以及 Mac 上的 Python 开发的详细信息，请查看本教程系列步骤 1 中的 先决条件 部分。

使用默认结构创建 Django 应用

Django 应用是一个单独的 Python 包，其中包含一组特定用途的相关文件。 Django 项目可以包含许多应用，这些应用可帮助 Web 主机从单个域名提供许多单独的入口点（或 路由）。 例如，域（如 contoso.com）的 Django 项目可能包含 www.contoso.com 路由的一个应用、support.contoso.com 路由的第二个应用，以及 docs.contoso.com 路由的第三个应用。 在此方案中，Django 项目处理 urls.py 和 settings.py 文件中的站点级 URL 路由和设置。 每个应用通过其内部路由、视图、模型、静态文件和管理界面具有其自己的独特样式和行为。

Django 应用的开发通常以一组标准文件开始。 Visual Studio 提供了用于在 Django 项目中使用这些文件初始化 Django 应用的模板。 还有一个用于相同用途的集成菜单命令。

使用模板创建应用

按照以下步骤从模板创建应用：

1. 在 解决方案资源管理器中，右键单击 Visual Studio 项目（BasicProject），然后选择“添加>新项。

   

   

2. 在 添加新项 对话框中，选择 Django 1.9 应用 模板：

   1. 输入应用 名称HelloDjangoApp。

   2. 选择“”并添加“”。

   

   

使用集成菜单命令创建应用

按照以下步骤使用集成的 Django 菜单命令创建应用：

1. 在 解决方案资源管理器中，右键单击 Visual Studio 项目（BasicProject），然后选择 添加>Django 应用。

   

   

2. 在“添加 Django 应用 对话框中，输入应用名称 HelloDjangoApp：

   

   

3. 选择“确定”。

浏览 Django 应用文件夹

创建 HelloDjangoApp 应用时，Visual Studio 会在 Visual Studio 项目中创建名称相同的文件夹：

该文件夹包含以下项：

使用名称“HelloDjangoApp”时，apps.py 文件的内容如下所示：

from django.apps import AppConfig

class HelloDjangoAppConfig(AppConfig):
    name = 'HelloDjangoApp'

在 Visual Studio 或命令行中创建应用

添加>Django 应用 命令和 添加>新项 命令（与 Django 应用程序模板结合使用）生成与 Django CLI 命令 manage.py startapp <app_name>相同的文件。 在 Visual Studio 中创建 Django 应用的好处是，应用文件夹及其所有文件都会自动集成到项目中。 可以使用同一个 Visual Studio 命令在项目中创建任意数量的应用。

添加特定于应用的页面视图

如果在 Visual Studio 中运行当前项目，请选择 “调试”>“开始调试”（F5）或主工具栏上的 Web 服务器，则会看到默认的 Django 页面。 Web 应用通常具有具有不同视图的多个页面。 应用 URL 地址的唯一路由标识应用中的每一页。

按照以下步骤定义特定于应用的页面视图，并将应用添加到 Django 项目：

1. 在 Visual Studio 项目的 HelloDjangoApp 子文件夹中，将 views.py 文件的内容替换为以下代码：

   from django.shortcuts import render
   from django.http import HttpResponse
   
   def index(request):
       return HttpResponse("Hello, Django!")
   

   此代码导入必要的呈现和 HTTP 定义，并定义名为 index的视图。

2. 在 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 前缀表示“raw”。该前缀指示 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 等。

若要试验不同的正则表达式，请尝试联机工具，例如 regex101.com 和 pythex.org。

从 Django 项目运行应用

添加特定于应用的内容后，再次运行应用并在浏览器中检查路由视图：

1. 当应用程序在浏览器中打开时，在浏览器中检查 /（站点根）和 /home URL 路由的页面视图。 对于这两个路由，应用程序会在浏览器中显示消息 Hello, Django!。

2. 操作完成后，在控制台窗口中选择 Ctrl+C，然后按下任意键以停止应用程序。 还可以选择 调试>停止调试。

3. 关闭应用程序的任何打开的浏览器窗口。

将更改提交到源代码管理

更新 Django 应用代码并测试更新后，可以查看并提交对源代码管理所做的更改：

有关本教程系列中的后续过程，请参阅本部分，了解将更改提交到源代码管理的步骤。

使用模板呈现页面和视图

views.py 文件中的 index 函数为 Django 应用页面生成纯文本 HTTP 响应。 大多数实际网页都使用丰富的 HTML 页面做出响应，这些页面通常包含实时数据。 开发人员使用函数定义视图的主要原因是动态生成内容。

HttpResponse 方法的参数只是一个字符串。 可以使用动态内容在字符串中构建任何 HTML。 由于最好将标记与数据分开，因此最好将标记放在模板中并将数据保留在代码中。

调整视图以使用内联 HTML

将视图处理转换为对包含一些动态内容的页面使用内联 HTML：

1. 在 Visual Studio 项目的 HelloDjangoApp 子文件夹中，打开 views.py 文件。

2. 将 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 响应。

3. 保存更改并再次运行应用。 页面现在会显示当前日期和时间以及“Hello Django！ 消息。

4. 刷新页面几次以确认日期和时间更新。 完成后，停止应用。

为页面视图创建 HTML 模板

在代码中生成 HTML 适用于小型页面。 但是，随着页面变得更复杂，你需要将页面的静态 HTML 部分（以及对 CSS 和 JavaScript 文件的引用）作为“页面模板”。然后，可以将动态代码生成的内容插入到页面模板。 在上一部分中，只有来自 now.strftime 调用的日期和时间是动态的，这意味着所有其他内容都可以放在页面模板中。

Django 页面模板是一个 HTML 块，其中包含多个称为“变量”的替换令牌。变量由打开和关闭的大括号 {{ 和 }} 标示，例如 {{ content }}。 Django 的模板模块随后使用你在代码中提供的动态内容替换变量。

按照以下步骤将页面呈现过程转换为使用 HTML 模板：

1. 在 Visual Studio 项目的 HelloDjangoApp 子文件夹中，打开 settings.py 文件。

2. 更新 INSTALLED_APPS 定义中的应用程序引用以包含应用名称 HelloDjangoApp。 将应用名称添加为列表中的第一个条目：

   INSTALLED_APPS = [
       'HelloDjangoApp',
       # Existing entries in the list ...
   ]
   

   将应用添加到列表中会通知 Django 项目有一个名为 HelloDjangoApp 的文件夹，其中包含一个应用。

3. 请确认 TEMPLATES 对象的配置集将 APP_DIRS 设置为 True：

   'APP_DIRS': True,
   

   此语句指示 Django 在已安装应用程序的 模板 文件夹中查找模板。 （默认情况下，此语句应包含在定义中。

4. 在 HelloDjangoApp 子文件夹中，打开 模板/HelloDjangoApp/index.html 页面模板文件。

5. 确认该文件仅包含一个变量，{{ content }}：

   <html>
     <head>
       <title></title>
     </head>
   
     <body>
       {{ content }}
     </body>
   </html>
   

   {{ content }} 语句是一个占位符或替换标记（也称为 模板变量），可在其中提供代码中的值。

6. 在 Visual Studio 项目的 HelloDjangoApp 子文件夹中，打开 views.py 文件。

7. 将 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': "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
         }
      )
   

   render 帮助程序函数提供了一个简化的界面，用于处理页面模板。 此函数有三个参数：

   • 请求对象。
   • 应用 模板 文件夹中模板文件的相对路径。 模板文件为它支持的视图命名（如果适用）。
   • 模板引用的变量字典。 可以在字典中包含对象，其中模板中的变量可以引用 {{ object.property }}。

8. 保存项目更改并再次运行应用。

   请注意，content 值内的内联 HTML 语法 (\<strong> ...) 不呈现为 HTML，因为模板化引擎 (Jinja) 自动转义 HTML 内容。 自动转义可防止意外漏洞注入攻击。

   开发人员通常从一个页面收集输入，并使用模板占位符将其用作另一个页面中的值。 转义还充当提醒：最好将 HTML 保持在代码外。

   完成后，停止应用。

使用不同的占位符

可以对 HTML 标记中的每个数据片段使用不同的占位符。 然后，再次调整 index 函数以提供特定的占位符值：

1. 将 templates/HelloDjangoApp/index.html 页面模板文件的内容替换为以下标记：

   <html>
     <head>
       <title>{{ title }}</title>
     </head>
     <body>
       <strong>{{ message }}</strong>{{ content }}
     </body>
   </html>
   

   此 HTML 标记添加一个页面标题，并保留页面模板中的所有格式。

2. 在 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")
           }
       )
   

   此代码为页面模板中的所有变量提供值。

3. 保存更改并再次运行应用。 这一次你应该会看到正确呈现的输出。

   

4. 可以将更改提交到源代码管理并更新远程存储库。 有关详细信息，请参阅将更改提交到源代码管理。

单独的页面模板

模板通常保留在单独的 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 应用，且模板的文件夹结构相同，则一个应用可能会无意中使用来自另一个应用的模板。 为了避免此类错误，请始终在应用的 模板下创建一个子文件夹 文件夹，该文件夹与应用的名称匹配，以避免任何重复。

下一步