上一篇

下一步

练习 - 实现通用视图以显示数据

已完成

我们想要为狗创建新的详细信息页。 我们将使用通用视图 DetailView 来简化需要创建的代码量。

重要

此练习假定你已完成本模块前面的设置步骤。

创建 DogDetail 视图

首先创建详细信息视图类。

1. 在 Visual Studio Code 中，打开 dog_shelters/views.py。

2. 在 # TODO: Import generic views 行下方，添加以下代码以导入通用视图模块。

   # TODO: Import generic views
   from django.views import generic
   

3. 将以下代码添加到 views.py 的底部，以创建 DogDetail 的通用视图并设置模型、模板和上下文对象。

   class DogDetailView(generic.DetailView):
       model = models.Dog
       template_name = 'dog_detail.html'
       context_object_name = 'dog'
   

注册详细信息视图

创建该视图后，可以注册该路径。

1. 打开 dog_shelters/urls.py。

2. 在 # TODO: Register detail view 行下方，添加以下代码来注册 DogDetailView 的路径。

   # TODO: Register detail view
   path('dog/<int:pk>', views.DogDetailView.as_view(), name='dog_detail'),
   

   重要

   删除该行末尾的尾随逗号。

创建 HTML 模板

现在，你将创建 HTML 模板以显示狗的详细信息。 对象名称将为 dog，正如我们创建表单时设置的那样。

1. 在 Visual Studio Code 中，在 dog_shelters/templates 内创建一个名为 dog_detail.html 的新文件。

2. 将以下代码添加到 dog_detail.html 以创建模板来显示狗的详细信息。

   {% extends 'base.html' %}
   
   {% block title %}
   {{ dog.name }}
   {% endblock %}
   
   {% block content %}
   <h2>{{ dog.name }}</h2>
   <div>About {{ dog.name }} - {{ dog.description }}</div>
   {% endblock %}
   

更新收容所详细信息页以包含我们的链接

注册路径和创建模板后，我们可以更新收容所详细信息模板，以包含指向狗详细信息页的链接。

1. 打开 dog_shelters/templates/shelter_detail.html。

2. 在 {# TODO: Add link to dogs #} 行下方，添加以下代码为每个狗创建一个到详细信息视图的链接。

   {# TODO: Add link to dogs #}
   <a href="{% url 'dog_detail' dog.id %}">
       {{dog.name}}
   </a>
   
   

测试页面

创建所有内容后，让我们看看实际页面。

1. 选择“文件”>“全部保存”，以保存所有文件。

2. 在浏览器中转到 http://localhost:8000。

3. 从收容所列表中，选择“Contoso”。

4. 从狗列表中，选择”Roscoe”。

   详细信息页显示。

   

现在，我们已使用 Django 中的通用视图系统创建了视图！

继续