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

2 分钟

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

重要

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

创建 DogDetail 视图

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

在 Visual Studio Code 中，打开 dog_shelters/views.py。
在 # TODO: Import generic views 行下方，添加以下代码以导入通用视图模块。
```
# TODO: Import generic views
from django.views import generic
```

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

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

注册详细信息视图

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

打开 dog_shelters/urls.py。
在 # TODO: Register detail view 行下方，添加以下代码来注册 DogDetailView 的路径。
```
# TODO: Register detail view
path('dog/<int:pk>', views.DogDetailView.as_view(), name='dog_detail'),
```
重要

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

创建 HTML 模板

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

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

将以下代码添加到 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 %}

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

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

打开 dog_shelters/templates/shelter_detail.html。
在 {# TODO: Add link to dogs #} 行下方，添加以下代码为每个狗创建一个到详细信息视图的链接。
```
{# TODO: Add link to dogs #}
<a href="{% url 'dog_detail' dog.id %}">
    {{dog.name}}
</a>
```

测试页面

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

选择“文件”>“全部保存”，以保存所有文件。
在浏览器中转到 http://localhost:8000。
从收容所列表中，选择“Contoso”。
从狗列表中，选择”Roscoe”。

详细信息页显示。