通过

教程：在 Visual Studio 中使用完整的 Django Web 项目模板

  • 项目

本文是教程系列《在Visual Studio中使用Django网络框架》的第4步。

本教程系列中的前面的步骤为两个应用程序创建 Visual Studio 解决方案和 Django 项目。 BasicProject 是基于空白 Django Web 项目模板的最小应用，HelloDjangoApp 使用 Django 1.9 应用模板为静态文件提供 HTML 模板中的页面视图。

在步骤 4 中，将第三个 Django 应用添加到解决方案中，该应用基于完整的 Django Web 项目 模板。 此模板可帮助你创建一个完整的 Django 应用，其中包含从基页模板继承的三个页面。 该应用采用 jQuery 和 Bootstrap 等静态 JavaScript 库。 模板的身份验证功能在教程系列 的最后一步中介绍。

在本教程的步骤 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 启动项目创建后，应会看到消息提示 Python 包规范文件“requirements.txt”在项目“DjangoWeb”中检测到。：

屏幕截图，显示有关在 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 创建 Superuser：

    屏幕截图，显示如何在 Visual Studio 中选择 Django 为项目创建超级用户命令。

  2. 在提示符下，输入项目的帐户详细信息，包括用户名、密码和电子邮件地址。

    无需对现有帐户使用安全凭据。 可以创建新的用户名和密码，以专门用于 Django Web 应用。

  3. 记录凭据供以后使用。 需要凭据来使用网页应用的认证功能。

运行 Django Web 项目

现在，你已准备好运行 Django Web 应用程序，并查看模板提供的功能：

  1. 在 解决方案资源管理器中，右键单击 djangoWeb 项目，然后选择 设置为启动项目。

    此命令将所选项目设置为 Visual Studio 解决方案的默认 启动项目。 启动 调试器时，Visual Studio 将运行启动项目的代码。 在 解决方案资源管理器中，解决方案的启动项目的名称以粗体显示：

    显示 Django Web 项目名称的屏幕截图在解决方案资源管理器中为粗体，以指示它是 Visual Studio 2022 中的启动项目。

    显示 Django Web 项目名称的屏幕截图在解决方案资源管理器中为粗体，以指示它是 Visual Studio 中的启动项目。

  2. 选择 调试>启动调试（F5），或使用工具栏上的 Web 服务器 按钮来运行服务器：

    显示 Visual Studio 主工具栏上的 Web Server 命令的屏幕截图。

浏览 Web 应用页面

模板创建的应用有三个页面：“主页”、“关于”和“联系人”。导航栏上每个页面都有链接。

显示浏览器中正在运行的 Django Web 项目应用的屏幕截图。

  1. 请尝试使用导航栏上的选项在页面之间切换。

  2. 检查正在运行的应用的不同部分，包括页面内容。 请注意 URL 地址路由如何根据当前页更改。

  3. 通过选择导航栏上的“登录” 选项，对应用进行身份验证。 请输入您在上一部分中提供的超级用户凭据。

  4. Django Web 项目 模板创建的应用使用 Bootstrap 进行响应式布局，以适应移动外形规格。 若要查看此响应能力，可将浏览器调整为窄视图，使内容垂直呈现，导航栏变为菜单图标：

    显示浏览器中 Django Web Project 应用的移动视图（窄）视图的屏幕截图，其中导航栏转换为下拉菜单。

你可以让应用继续运行，以便进行下一部分的练习。

如果要保存工作，请停止应用，并按照本教程系列前面的步骤中的说明操作：

检查 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 Project 创建的页面视图的代码位于项目的 应用/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 页面模板位于项目的 应用/模板/应用 文件夹中（通常重命名）。 基本模板 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 文件中。 本教程系列 最后一步（对用户进行身份验证） 更详细地介绍了这两个模板文件。

缩进模板中的 {% block %} 和 {% endblock %} 标记

HTML 示例显示 Visual Studio 页面模板中提供的标记。 请注意，block 标记在 markup 中没有缩进。 为了清楚地显示 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 模式直接映射到项目 应用/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 模式还会匹配诸如“about=django”、“about09876”、“about-face”等 URL。 尾部的 $ 字符创建了一种 URL 模式，确保只匹配术语“about”。

下一步

步骤 5：在 Django 中对用户进行身份验证