Djangoのリスト画面を表示するListView, 詳細画面を表示するDetailViewを使いこなす

この記事では、クラスベースビューのリストビュー(ListView), ディテイルビュー(DetailView)の利用方法について記述する。

ListView, DetailViewの基本的な使い方

1.ListViewを用いた画面表示

ListViewのは、一覧画面など複数のデータを並べたい場合に利用される。
一般的に、DBからデータを取り出して一覧表示するが、
DBのテーブル定義を記述するmodels.pyは以下のようにした。

Studentクラスのmodels.ForeignKey(School, related_name='students')とは、Schoolクラスへの外部キーでありスクールからアクセスする場合はstudentsという名前を用いるという意味である。

models.py

from django.db import models

class School(models.Model):
    name = models.CharField(max_length=256)
    principal = models.CharField(max_length=256)
    location = models.CharField(max_length=256)

def __str__(self):
return self.name

class Student(models.Model):
    name = models.CharField(max_length=256)
    age = models.PositiveIntegerField()
    school = models.ForeignKey(School, related_name='students', on_delete='CASCADE')
    # schoolへのforeign key

def __str__(self):
return self.name

次に、views.pyの設定を行う。
views.py内にListViewを継承したクラスを作成してmodelを設定する。
(このmodelがリスト表示するモデルである)

views.py

from django.views.generic import View, TemplateView, ListView, DetailView
from . import models

class SchoolListView(ListView):
    # context_object_name = 'schools'
    # context_object_nameはテンプレートで表示する際のモデルの参照名。これを設定で変えることができる。デフォルト(設定しない場合)では、モデル名_listである。(今回はコメントアウトした)
    model = models.School
    # modelの設定、この場合Schoolをリスト表示する

    # template_name = 'basic_app/school_list2.html'
    # template_nameはテンプレートのパスです。デフォルト(設定しない場合)では、views.pyと同じフォルダ/templates/アプリ名/モデル名_list.htmlです。
    # template_name = 'basic_app/school_list2.htmlとすると、./templates/basic_app/school_list2.html (今回はコメントアウトした)

urls.pyは以下のように記述する(クラス名.as_view())。

from django.urls import path
from basic_app import views

app_name = 'basic_app'

urlpatterns = [
path('', views.SchoolListView.as_view(), name='list'),
]

テンプレートファイルには以下のように記述した。

school_list.html(./templates/basic_app/school_list.html)

{% extends 'basic_app/basic_app_base.html' %}

{% block body_block %}

<h1>Welcome to a list of all schools</h1>
    <ol>
        {% for school in school_list %}
        

<h2><li><a href="{{ school.id }}">{{ school.name }}</a></li></h2>
        
        {% endfor %}
    </ol>

{% endblock %}

Djangoを立ち上げて画面を表示すると以下のように表示される。

(model内に、First School, Second Schoolを入れた状態)

2.DetailViewを用いた値の表示

ListViewで画面表示をしたので、次にListViewからDetailViewへ遷移してみよう。

まず、views.pyはDetailViewを継承して以下のように記述する

views.py

from django.views.generic import View, TemplateView, ListView, DetailView
from . import models

class SchoolDetailView(DetailView):
# context_object_name = 'school'
# context_object_nameはテンプレートでのモデルの参照名、デフォルトでは"モデル名"

model = models.School
# model = としてモデルを設定する

# template_name = 'basic_app/school_detail.html'
# template_nameはテンプレートの配置先。デフォルトでは、./templates/アプリ名/モデル名_detail.html

urls.pyは以下のように<int:pk>としてpkで値を取得できるようにする。

urls.py

from django.urls import path
from basic_app import views

app_name = 'basic_app'

urlpatterns = [
    path('', views.School2ListView.as_view(), name='list'),
    path('<int:pk>', views.SchoolDetailView.as_view(), name='detail')
    # pathに<int:pk>として、urlがbasic_app/<int:pk>のときにSchoolDetailViewから指定したpkの値を取得できる
]

index.html

{% extends 'basic_app/basic_app_base.html' %}

{% block body_block %}

<div class="jumbotron">
    <h1>Welcome to school detail page</h1>
    <h2>details</h2>
    <p>Name: {{ school.name }}</p>
    <p>Principal: {{ school.principal }}</p>
    <p>Location: {{ school.location }}</p>
    

<h3>Students</h3>
    {% for student in school.students.all %}
    

<p>{{ student.name }} {{ student.age }} yesar old</p>
{% endfor %}
</div>
{% endblock %}

Djangoを動かして、アクセスすると以下のような画面になる

ListView, DetailViewの基本的な使い方

関連記事

Footer