Progateで作ったWebアプリをDjangoで作ってみる2！ Part7 -DetailView編-

目標物の確認

ProgateのNode.jsコースで作ったブログアプリと同じものをDjangoで作ってみます。

Djangoでのアプリ開発の一連の流れを整理するために記していきます。

完成イメージ

記事画面の作成

個々の記事はDetailViewというViewで表示させます。

まずはHTMLファイル（article.html）を作成します。

Part6で作成したbase.htmlを継承して（☆1）、{% block content %} {% endblock content %}の中に個別記事を表示するコードを書いていきます（☆2）。

記事が「全員（object.category == 'all'）」の場合、コンテンツが表示されるようにします（☆3）。記事が、「会員限定（object.category == 'limited'）」の場合、タイトルは表示されるが、コンテンツはログインされている場合（user.is_authenticated）は表示されるようにします（☆4）。ログインされていない場合は、コンテンツは表示されず、ログイン画面へのリンクが表示されるようします（☆4）。

article.html

{% extends 'blog/base.html' %} <!--☆1-->
{% load static %}

{% block content %} <!--☆2-->
  <main>
    <div class="article">
      {% if object.category == 'all' %} <!--☆3-->
        <h1>{{ object.title }}</h1>
        <p>{{ object.content }}</p>
      {% endif %} <!--☆3-->
      {% if object.category == 'limited' %} <!--☆4-->
        <i>会員限定</i>
        <h1>{{ object.title }}</h1> <!--☆4-->
        {% if user.is_authenticated %} <!--☆4-->
          <p>{{ object.content }}</p> <!--☆4-->
        {% else %} <!--☆4-->
          <div class="article-login">
            <p>今すぐログインしよう！</p>
            <p>記事の続きは<br>ログインすると読むことができます</p>
            <img src="{% static 'blog/login.svg' %}">
            <a class="btn" href="{% url 'blog:login' %}">ログイン</a>
          </div>
        {% endif %} <!--☆4-->
      {% endif %} <!--☆4-->
    </div>
  </main>
  <footer>
    <a class="btn sub" href="{% url 'blog:list' %}">一覧にもどる</a>
  </footer>
{% endblock content %} <!--☆2-->

views.pyファイルを作成していきます（☆5）。

blogapp/blog/views.py

from blog.models import BlogModel
from django.shortcuts import render, redirect
from django.views.generic import TemplateView, ListView, DetailView # ☆5
from django.contrib.auth.models import User
from django.db import IntegrityError
from django.contrib.auth import authenticate, login, logout
from .models import BlogModel

class BlogTop(TemplateView):...

def signupview(request):...

def loginview(request):...

def logoutview(request):...

class BlogList(ListView):...

class BlogArticle(DetailView): # ☆5
    template_name = 'blog/article.html'
    model = BlogModel

urls.pyファイルも作成します（☆6）。

<int:pk>が、テーブルに入っているデータを具体的に指定する上で使われるコードです（☆6）。

blogapp/blog/urls.py

from django.urls import path
from .views import BlogTop, signupview, loginview, logoutview, BlogList, BlogArticle # ☆6

app_name = 'blog'

urlpatterns = [
    path('', BlogTop.as_view(), name='top'),
    path('signup/', signupview, name='signup'),
    path('login/', loginview, name='login'),
    path('logout/', logoutview, name='logout'),
    path('list/', BlogList.as_view(), name='list'),
    path('article/<int:pk>/', BlogArticle.as_view(), name='article') # ☆6

]

ログインの有無でページの表示が変わっています。

成功です！