연습-데이터를 표시하는 제네릭 뷰 구현

  • 2분

유기견 세부 정보 페이지를 만들려고 합니다. 여기서는 제네릭 뷰 DetailView를 사용하여 만들어야 하는 코드의 양을 간소화하겠습니다.

중요

이 연습에서는 이 모듈의 앞부분에 있는 설정 단계를 완료했다고 가정합니다.

DogDetail 뷰 만들기

detail view 클래스를 만드는 것부터 시작합니다.

  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'

detail view 등록

뷰가 만들어지면 경로를 등록할 수 있습니다.

  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/tv/shelter_detail.html을 엽니다.

  2. {# TODO: Add link to dogs #}이라고 표시된 줄 아래에 다음 코드를 추가하여 각 항목에 대한 링크를 detail view에 만듭니다.

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

페이지 테스트

모든 항목이 만들어졌으니 작동 중인 페이지를 살펴보겠습니다.

  1. 파일>모두 저장을 선택하여 모든 파일을 저장합니다.

  2. 브라우저에서 http://localhost:8000으로 이동합니다.

  3. 보호소 목록에서 Contoso를 선택합니다.

  4. 강아지 목록에서 Roscoe를 선택합니다.

    세부 정보 페이지가 나타납니다.

    Roscoe에 대한 세부 정보 페이지의 스크린샷

이제 Django에서 제네릭 뷰 시스템을 사용하여 보기를 만들었습니다.