練習－實作泛型檢視以顯示資料

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_form.html 的 dog_shelters/templates 內建立新的檔案。

將下列程式碼新增至 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]。

詳細資料頁面隨即出現。