Övning – Implementera allmänna vyer för att visa data

2 minuter

Vi vill skapa en ny detaljsida för hundar. Vi ska använda den allmänna vyn DetailView för att effektivisera mängden kod som vi behöver skapa.

Viktigt!

Den här övningen förutsätter att du har slutfört installationsstegen tidigare i den här modulen.

Skapa DogDetail-vy

Vi börjar med att skapa detaljvisningsklassen.

Öppna dog_shelters/views.py i Visual Studio Code.
Under raden som läser # TODO: Import generic viewslägger du till följande kod för att importera modulen generiska vyer.
```
# TODO: Import generic views
from django.views import generic
```

Lägg till följande kod längst ned i views.py för att skapa den allmänna vyn för DogDetail och ange modell, mall och kontextobjekt.

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

Registrera detaljvyn

När vyn har skapats kan vi registrera sökvägen.

Öppna dog_shelters/urls.py.
Under raden som läser # TODO: Register detail viewlägger du till följande kod för att registrera sökvägen för vår DogDetailView.
```
# TODO: Register detail view
path('dog/<int:pk>', views.DogDetailView.as_view(), name='dog_detail'),
```
Viktigt!

Kom ihåg det avslutande kommatecknet i slutet av linjen.

Skapa HTML-mallen

Nu ska du skapa HTML-mallen för att visa information om hunden. Objektnamnet blir dog som vi anger när formuläret skapas.

I Visual Studio Code skapar du en ny fil inuti dog_shelters/mallar med namnet dog_detail.html.

Lägg till följande kod i dog_detail.html för att skapa mallen för att visa information om hunden.

{% extends 'base.html' %}

{% block title %}
{{ dog.name }}
{% endblock %}

{% block content %}
<h2>{{ dog.name }}</h2>
<div>About {{ dog.name }} - {{ dog.description }}</div>
{% endblock %}

Uppdatera informationssidan för skydd så att den innehåller vår länk

Med vår sökväg registrerad och mall skapad kan vi uppdatera mallen för skyddsinformation så att den innehåller länkar till vår hundinformationssida.

Öppna dog_shelters/mallar/shelter_detail.html.
Under raden som läser {# TODO: Add link to dogs #}lägger du till följande kod för att skapa en länk för varje hund till detaljvyn.
```
{# TODO: Add link to dogs #}
<a href="{% url 'dog_detail' dog.id %}">
    {{dog.name}}
</a>
```

Testa sidan

Nu när allt har skapats ska vi se hur vår sida fungerar.

Spara alla filer genom att välja Spara>alla filer.
Gå till http://localhost:8000 i webbläsaren.
I listan över skyddsrum väljer du Contoso.
I listan över hundar väljer du Roscoe.

Informationssidan visas.