クラスベースビューでの一覧画面の作成
前回はクラスベースビューでトップページを作成した。
今回はクラスベースビューを使って一覧画面を使用する。
前回：【Django】クラスベースビューでトップページを作成【ブログアプリ2】
現在のディレクトリ構成は以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
デスクトップ └Blog2 ├app │ ├migrations │ ├__init__.py │ ├admin.py │ ├apps.py │ ├models.py │ ├tests.py │ ├views.py │ ├urls.py ├db.sqlite3 ├config │ ├・・・ │ ├settings.py │ └urls.py ├templates │ ├base.html │ └index.html ├env_blog2 └manage.py |
クラスベースビューでの一覧画面を作成する手順
urls.pyの編集
～デスクトップ/Blog2/app/urls.py
|
1 2 3 4 5 6 7 8 9 |
from django.urls import path, include from .views import TopPageView1, TopPageView2, BlogListView #[1] app_name = 'blog' urlpatterns = [ path('', TopPageView1.as_view(), name="index1"), path('index/', TopPageView2.as_view(), name="index2"), path('list/', BlogListView.as_view(), name="list"), #[2] ] |
[1]views.pyからBlogListViewをインポート
BlogListViewは未作成なので、次の手順で作成する。
[2]新しいURLパターンを追加
第一引数は利用者が入力したURL。URLの末尾が第一引数であるlist/と一致した場合に実行される。
例↓このURLだった場合に一覧画面を表示する。
http:127.0.0.1:8000/app/list/
第二引数はviews.pyのBlogListViewをメソッドとして呼び出している。
第三引数はこのURLパターンにlistという名前を付けている。
views.pyの編集
～デスクトップ/Blog2/app/views.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
from django.shortcuts import render from django.views.generic import View, TemplateView, ListView #[1] from .models import Blog #[2] # Create your views here. class TopPageView1(View): def get(self, request): template_name = 'index.html' return render(request, template_name) class TopPageView2(TemplateView): template_name = 'index.html' #[3] class BlogListView(ListView): model = Blog template_name = 'list.html' context_object_name = 'blogs' |
[1]ListViewをインポート
ListViewはDjangoに元々用意されている汎用ビュークラス。
一覧画面を表示させることに特化している。
[2]Blogモデルをインポート
models.pyで定義したBlogモデルをインポートする。
[3]BlogListViewを作成
[1]でインポートしたListViewを継承してBlogListViewを作成する。
変数modelには[2]でインポートしたBlogモデルをインポートし、DBからBlogモデルのデータ、つまり各記事を取得できるようにする。
変数template_nameにはhtmlファイルのアドレスを格納している。
変数context_object_nameにはblogsを格納した。
関数ベースビューとは異なりobject = Blog.objects.all()でBlogモデルから全記事のデータを取得してreturnするコードを書く必要はない。継承元のListViewであらかじめ定義されている。
関数ベースビューではcontextにキーと値を格納してrender関数でreturnしている。html側ではcontextというキーを使って記事一覧を扱っていた。
クラスベースビューではobject_listという名前で自動的にhtml側で扱うための変数が用意されている。ただし、context_object_nameに値を入れることで、ここに格納した名前を使ってhtml側でデータを扱うことができる。今回はblogsという名前でhtml側で全記事のデータを扱える。
参考：関数ベースビューで作成した記事一覧
list.htmlの作成
～デスクトップ/Blog2/template/list.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{% extends 'base.html' %} {% block title %}ブログ{% endblock %} {% block content%} <h1>一覧</h1> <ul> {% for blog in blogs %} <li>{{blog.title}}</li> <li>{{blog.content}}</li> <li>{{blog.created_date}}</li><br> {% endfor %} </ul> {% endblock %} |
<h1>一覧</h1>
h1タグで一覧という見出しを作成。
<ul>
順序なしのリストを作成するulタグ。</ul>と囲んで使用する。
それぞれの項目は後述の通りliタグを使用する。
{% for blog in blogs %}
for文を使って
ここで使用しているblogsは先ほどviews.pyでBlogListViewでcontext_object_nameに格納したblogsという文字列。list.html側でblogsとして記事一覧のデータを扱うことができている。
<li>{{blog.title}}</li>
<li>{{blog.content}}</li>
<li>{{blog.created_date}}</li><br>
ulタグに囲われている状態でliタグを使って順序なしリストの各項目を作成している。
各項目の中身はブログ記事のデータ。blogという名前のオブジェクトの中にtitle,content,created_dataという属性が入っているのでそれぞれを項目として表示する。
ディレクトリ構成の確認
現在のディレクトリ構成は以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
デスクトップ └Blog2 ├app │ ├migrations │ ├__init__.py │ ├admin.py │ ├apps.py │ ├models.py │ ├tests.py │ ├views.py #編集 │ ├urls.py #編集 ├db.sqlite3 ├config │ ├・・・ │ ├settings.py │ └urls.py ├templates │ ├base.html │ ├index.html │ └list.html #新規作成 ├env_blog2 └manage.py |
urls.pyでは新たなURLパターンを作成した。
以下のURLを利用者がリクエストしてきた場合に実行されるPath関数を追記している。
http:127.0.0.1:8000/app/list/
views.pyではBlogListViewクラスを作成した。
これはListViewクラスという汎用ビュークラスを継承して作成している。ListViewクラスは一覧画面を作成することに特化しているので、モデルとテンプレートの情報を加えるだけで記事一覧を表示するためのオブジェクトを利用者にレスポンスすることができる。
list.htmlではviews.pyのBlogListViewから受け取ったblogsオブジェクト(context_object_nameで指定した名前)を使ってタイトル、内容、作成日を順序なしリストとして表示できるように記載した。
Django記事一覧
前回：【Django】クラスベースビューでトップページを作成【ブログアプリ2】
次回：【Django】クラスベースビューとforms.pyで新規作成画面を作成【ブログアプリ2】
コメント