#環境
MacOS
Python 3.7.6
Django 3.0.5
#汎用ビューに書き換える
次にviews.pyのファイル内を汎用ビューに書き換えます。初めにインポートするものを増やします。下記のように追記しましょう。
views.py
from django.shortcuts import render, redirect, get_object_or_404
from django.urls import reverse_lazy
from django.views import generic
from .forms import DayCreateForm
from .models import Day
そしてviews.pyとurls.pyを下記のように書き換えることができます。
views.py
from django.shortcuts import render, redirect, get_object_or_404
from django.urls import reverse_lazy
from django.views import generic
from .forms import DayCreateForm
from .models import Day
class IndexView(generic.ListView):
model = Day
class AddView(generic.CreateView):
model = Day
form_class = DayCreateForm
success_url = reverse_lazy('diary:index')
class UpdateView(generic.UpdateView):
model = Day
form_class = DayCreateForm
success_url = reverse_lazy('diary:index')
class DeleteView(generic.DeleteView):
model = Day
success_url = reverse_lazy('diary:index')
class DetailView(generic.DetailView):
model = Day
urls.py
from django.urls import path
from .import views
app_name = 'diary'
urlpatterns = [
path('', views.IndexView.as_view(), name='index'),
path('add/', views.AddView.as_view(), name='add'),
path('update/<int:pk>/', views.UpdateView.as_view(), name='update'),
path('delete/<int:pk>/', views.DeleteView.as_view(), name='delete'),
path('detail/<int:pk>/', views.DetailView.as_view(), name='detail'),
]
そしてday_form.htmlに下記のように<p>{{ day.title }}</p>を書き足すと更新ページの上部にタイトルを表示させることができます。
day_form.html
{% extends 'diary/base.html' %}
{% block content %}
<p>{{ day.title }}</p>
<form action='' method='POST'>
<table class='table'>
<tr>
<th>タイトル</th>
<td>{{ form.title }}</td>
</tr>
<tr>
<th>本文</th>
<td>{{ form.text }}</td>
</tr>
<tr>
<th>日付</th>
<td>{{ form.date }}</td>
</tr>
</table>
<button type='submit' class='btn btn-primary'>送信</button>
{% csrf_token %}
<img width="1440" alt="スクリーンショット 2020-05-02 12.55.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/5a5a4c27-9e36-e142-4720-9554a9660c93.png">
</form>
{% endblock %}
#ページング機能の追加
続いてページング機能の追加を行いますIndexViewのclass内に下記のコードを追記します。この3は1ページの最大のページ数を表します。
views.py
class IndexView(generic.ListView):
model = Day
paginate_by = 3
次にday_list.htmlの最後の方にこのように追記します。
day_list.html
</tbody>
</table>
{% if page_obj.has_previous %}
<a href="?page={{ page_obj.previous_page_number }}">前へ</a>
{% endif %}
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}">次へ</a>
{% endif %}
{% endblock %}
下記のようにページング機能を追加することができます。
###きれいに整える場合
ページング機能の見た目が少し簡素なので見た目をきれいにします。
page4.html
<nav aria-label="Page navigation">
<ul class="pagination">
{% if page_obj.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.previous_page_number }}">
<span aria-hidden="true">«</span>
</a>
</li>
{% endif %}
{% for link_page in page_obj.paginator.page_range %}
{% if link_page == page_obj.number %}
<li class="page-item active">
<a class="page-link" href="?page={{ link_page }}">
{{ link_page }}
</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="?page={{ link_page }}">
{{ link_page }}
</a>
</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
{% endif %}
</ul>
</nav>
day_list.html
</tbody>
</table>
{% include 'diary/page4.html' %}
{% endblock %}
このように変更することできれいな見た目になりました^_^
#Djangoで作る日記帳アプリ一覧
Djangoで作る日記帳アプリ①
Djangoで作る日記帳アプリ②
Djangoで作る日記帳アプリ③
Djangoで作る日記帳アプリ④
Djangoで作る日記帳アプリ⑤