Ćwiczenie — implementowanie widoków ogólnych w celu wyświetlania danych

2 min

Chcemy utworzyć nową stronę szczegółów dla psów. Użyjemy widoku DetailView ogólnego, aby usprawnić ilość kodu, który musimy utworzyć.

Ważne

W tym ćwiczeniu przyjęto założenie, że kroki konfiguracji zostały wykonane wcześniej w tym module.

Tworzenie widoku DogDetail

Zaczynamy od utworzenia klasy widoku szczegółów.

W programie Visual Studio Code otwórz dog_shelters /views.py.
Poniżej wiersza, który odczytuje # TODO: Import generic views, dodaj następujący kod, aby zaimportować moduł widoków ogólnych.
```
# TODO: Import generic views
from django.views import generic
```
Dodaj następujący kod w dolnej części views.py , aby utworzyć ogólny widok dla DogDetail i ustawić model, szablon i obiekt kontekstu.
```
class DogDetailView(generic.DetailView):
    model = models.Dog
    template_name = 'dog_detail.html'
    context_object_name = 'dog'
```

Rejestrowanie widoku szczegółów

Po utworzeniu widoku możemy zarejestrować ścieżkę.

Otwórz dog_shelters/urls.py.
Poniżej wiersza, który odczytuje # TODO: Register detail view, dodaj następujący kod, aby zarejestrować ścieżkę dla naszego DogDetailViewpliku .
```
# TODO: Register detail view
path('dog/<int:pk>', views.DogDetailView.as_view(), name='dog_detail'),
```
Ważne

Zapamiętaj końcowy przecinek na końcu wiersza.

Tworzenie szablonu HTML

Teraz utworzysz szablon HTML, aby wyświetlić szczegóły psa. Nazwa obiektu będzie dog ustawiana podczas tworzenia formularza.

Wewnątrz programu Visual Studio Code utwórz nowy plik wewnątrz dog_shelters/szablonów o nazwie dog_detail.html.

Dodaj następujący kod, aby dog_detail.html , aby utworzyć szablon w celu wyświetlenia szczegółów psa.

{% extends 'base.html' %}

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

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

Zaktualizuj stronę szczegółów schroniska, aby uwzględnić nasz link

Po zarejestrowaniu ścieżki i utworzeniu szablonu możemy zaktualizować szablon szczegółów schroniska w celu uwzględnienia linków do naszej strony szczegółów psa.

Otwórz dog_shelters/templates/shelter_detail.html.
Poniżej wiersza, który odczytuje {# TODO: Add link to dogs #}, dodaj następujący kod, aby utworzyć link dla każdego psa do widoku szczegółów.
```
{# TODO: Add link to dogs #}
<a href="{% url 'dog_detail' dog.id %}">
    {{dog.name}}
</a>
```

Testowanie strony

Po utworzeniu wszystkich elementów zobaczymy naszą stronę w akcji.

Zapisz wszystkie pliki, wybierając pozycję Plik>Zapisz wszystko.
W przeglądarce przejdź do adresu http://localhost:8000.
Z listy schronisk wybierz pozycję Contoso.
Z listy psów wybierz pozycję Roscoe.

Zostanie wyświetlona strona szczegółów.