步骤 4:使用完整的 Django Web 项目模板

上一步:为静态文件提供服务、添加页面和使用模板继承

你已经在 Visual Studio 中了解了 Django 的基础知识,现在可以轻松地了解“Django Web 项目”模板引入的更完整的应用。

在此步骤中,将执行以下操作:

  • 使用“Django Web 项目”模板创建一个更完整的 Django Web 应用并检查项目结构(步骤 4-1)
  • 了解由项目模板创建的视图和页面模板,该模板由三个继承自基本页面模板的页面组成,并使用 jQuery 和 Bootstrap 等静态 JavaScript 库(步骤 4-2)
  • 了解模板提供的 URL 路由(步骤 4-3)

该模板还提供基本身份验证,详情请参见步骤 5

步骤 4-1:通过模板创建项目

  1. 在 Visual Studio 中,转到“解决方案资源管理器”,右键单击在本教程前面创建的“LearningDjango”解决方案,。 然后选择“添加”>“新项目”。 (如果想要使用新的解决方案,请改为选择“文件”>“新建”>“项目”。)

  2. 在“新项目”对话框中,搜索并选择“Django Web 项目”模板。 调用项目“DjangoWeb”,然后选择“创建”。

  3. 由于模板包含 requirements.txt 文件,因此 Visual Studio 会提示安装依赖项的位置。 出现提示时,选择“安装到虚拟环境”选项,然后在“添加虚拟环境”对话框中,选择“创建”以接受默认设置。

  4. 在 Visual Studio 完成虚拟环境设置后,请按照 readme.html 文件中显示的说明创建 Django 超级用户(即管理员)。 右键单击 Visual Studio 项目并选择“Python”>“Django 创建超级用户”命令,然后按照提示进行操作。 请确保记录你的用户名和密码,因为在执行应用的身份验证功能时会用到。

  5. 将“DjangoWeb”项目设置为 Visual Studio 解决方案的默认值,具体方法是在“解决方案资源管理器”中右键单击该项目,然后选择“设为启动项目”。 启动项目(以粗体显示)会在启动调试器时运行。

    Solution Explorer showing the DjangoWeb project as the startup project.

  6. 选择“调试”>“启动调试”(F5) 或使用工具栏上的“Web 服务器”按钮运行服务器。

    Run web server toolbar button in Visual Studio.

  7. 该模板创建的应用有三个页面:“主页”、“关于”和“联系信息”。 可以使用导航栏在这些页面之间导航。 花一到两分钟的时间检查应用的不同部分。 若要通过“登录” 命令对应用进行身份验证,请使用前面创建的超级用户凭据。

    Full browser view of the Django Web Project app.

  8. 由“Django Web 项目”模板创建的应用将引导用于响应式布局,以适应移动设备外形规格。 要查看此响应能力,可以将浏览器调整为窄视图,使内容垂直显示,并使导航栏变为菜单图标。

    Mobile (narrow) view of the Django Web Project app.

  9. 可以在以下各节中使应用保持运行状态。

    若要停止应用并将更改提交到源代码管理,请打开“团队资源管理器”中的“更改”页,右键单击虚拟环境的文件夹(可能是 env),然后选择“忽略这些本地项”。

检查模板创建的内容

在最广泛的层面上,“Django Web 项目”模板创建以下结构:

  • 项目根目录中的文件:
    • manage.py:Django 管理实用工具。
    • db.sqlite3:默认 SQLite 数据库。
    • requirements.txt:包含 Django 1.x 的依赖项。
    • readme.html:在创建项目后显示在 Visual Studio 中的文件。 如上一节所述,请按照此处的说明为应用创建一个超级用户(管理员)帐户。
  • app 文件夹包含所有应用文件,包括视图、模型、测试、窗体、模板和静态文件(请参阅步骤 4-2)。 你通常会使用一个更有特色的应用名称来重命名此文件夹。
  • DjangoWeb(Django 项目)文件夹包含典型的 Django 项目文件:__init__.py、settings.py、urls.py 和 wsgi.py。 settings.py 文件已使用项目模板针对应用和数据库文件进行配置。 urls.py 文件还已设置通往所有应用页面的路由,包括登录表单。

问:能否能在 Visual Studio 项目之间共享虚拟环境?

答:是的,但是,这样做时要意识到,随着时间的推移,不同的项目可能会使用不同的软件包。 因此,共享虚拟环境必须包含使用它的所有项目的所有包。

不过,若要使用现有的虚拟环境,请执行以下步骤:

  1. 当系统提示在 Visual Studio 中安装依赖项时,请选择“我将自行安装” 选项。
  2. 在“解决方案资源管理器” 中,右键单击“Python 环境” 节点并选择“添加现有虚拟环境” 。
  3. 导航到包含虚拟环境的文件夹并选中它,然后选择“确定” 。

步骤 4-2:了解通过项目模板创建的视图和页面模板

正如你在运行项目时所观察到的,该应用包含三个视图:“主页”、“关于”和“联系信息”。 这些视图的代码位于 views.py 文件中。 每个视图函数都会调用 django.shortcuts.render,其中包含模板和简单字典对象的路径。 例如,“关于”页面由 about 函数来处理:

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,
        }
    )

模板位于应用的 templates/app 文件夹中(你通常需要将 app 重命名为实际应用名称)。 基本模板 layout.html 的使用最为广泛 。 layout.html 文件引用所有必要的静态文件(JavaScript 和 CSS)。 layout.html 文件还定义了一个名为“content”的块,该块将替代其他页面,并提供名为“scripts”的另一个块。layout.html 文件中的以下批注摘录显示了这些特定区域:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <!-- Define a 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>
    <!-- Navbar omitted -->

    <div class="container body-content">

<!-- "content" block that pages are expected to override -->
{% block content %}{% endblock %}
        <hr/>
        <footer>
            <p>&copy; {{ year }} - My Django Application</p>
        </footer>
    </div>

<!-- Additional scripts; use the "scripts" block to add page-specific scripts.  -->
    <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>
{% block scripts %}{% endblock %}

</body>
</html>

每个单页模板 about.html、contact.html、index.html 均扩展了基本模板 layout.html 。 about.html 模板文件是最简单的,它显示 {% extends %}{% block content %} 标记:

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

{% block content %}

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

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

{% endblock %}

index.html 和 contact.html 模板文件使用相同的结构,在“内容”块中提供更长的内容。

templates / app 文件夹中还具有第 4 页 login.html,以及使用 {% include %} 引入 layout.html 的 loginpartial.html。 这些模板文件在有关身份验证的步骤 5 中进行了讨论。

问:在 Django 页面模板中是否可以缩进 {% block %} 和 {% endblock %}?

答:能。 如果缩进块标记,Django 页面模板操作正常,也许可以将它们对齐到适当的父元素中。 为了清楚地查看块标记的放置位置,Visual Studio 页面模板不会缩进块标记。

步骤 4-3:了解模板创建的 URL 路由

由“Django Web 项目”模板创建的 Django 项目的 urls.py 文件包含以下代码

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 文件中的 homecontactabout 视图中。 另一方面,模式 ^login/$^logout$ 使用内置的 Django 视图,而不是应用定义的视图。 对 url 方法的调用还包含用于自定义视图的额外数据。 步骤 5 探讨了这些调用。

问:在我创建的项目中,为什么“about”URL 模式使用此处所示的“^about”而不是“^about$”?

答:正则表达式中缺少尾随的“$”是许多版本的项目模板中的一个普遍疏忽。 URL 模式非常适用于名为“about”的页面,但是,如果没有尾随的“$”,URL 模式还会匹配诸如“about=django”、“about09876”、“aboutoflaughter”等 URL。 此处显示的尾随“$”用于创建 URL 模式,该模式只匹配“about”。

后续步骤

深入了解