Progateで作ったWebアプリをDjangoで作ってみる! Part4 -Read編-
ProgateのNode.jsコースではお買い物リストアプリを作るのですが、これと全く同じものをDjangoで作ってみます。
Djangoでのアプリ開発の一連の流れを整理するために記していきます。
HTMLとCSS、PNG形式画像は使い回しで、一部をDjango用のタグに変えます。
前回のおさらい
Part3ではデータベースの設定をしました。
今回はデータベースに登録されているお買い物アイテム一覧が表示されるListページを作成していきます。
Listページの作成
はじめにurls.pyファイルにコードを追加していきます。
URLパターンを逆引きできるように、app_name = 'list'
と名前をつけます(☆1)。
from django.urls import path
from .views import ListTop, ListIndex
# URLパターンを逆引きできるように名前をつける
app_name = 'list' # ☆1
urlpatterns = [
# リクエストされたパス部分が''に合致した場合、views.pyのListTopクラスをインスタンス化する
path('', ListTop.as_view(), name='top'),
]
ListページのHTMLファイル(index.html)を作っていきます。
Part2でやったように静的ファイルを読み込むためのタグを挿入、変更します(☆2)。
ProgateのNode.jsコースで作ったもの(ejsファイル)を流用しているので一部変なタグがありますが、次回以降で修正していきます。
Listページのindex.htmlに書かれている{% %}
や{{ }}
はテンプレートと呼ばれるもので、{% %}
は「処理」を行うもので{{ }}
は「データ」を扱うものです。
☆3のhref="{% url 'list:top' %}
の記載について見てみます。まずこのタグはurlが呼び出されるものです。じゃあ、どのようなurlが呼び出されるかというと、'list'
はurls.pyのapp_name
で指定したlistアプリのことで、'top'
はurls.pyのname='top'
と定義したコードに対応したurlです。つまり、この場合だと、listアプリのtop.htmlが呼び出されることになります。
☆4の{% for object in object_list %}
はobject_listから一つずつ取り出す繰り返し処理です。object_listはListViewで指定したモデルの全データを示していて、今回の場合だとListModelの中の全てのデータが格納されています。つまり、買い物リストです。
{% for object in object_list %}
と{% endfor %}
タグで囲まれま部分がループ処理となります。
{{ forloop.counter }}
はループした回数を表示、つまり、リストの上から順に1, 2, 3,...というふうになります。
{{ object.item }}
はobject_list
から取り出された個別のデータの中のitemフィールドを意味しています。この場合だと、買い物リストです。
{% load static %} <!--☆2-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LIST APP</title>
<link rel="stylesheet" href="{% static 'list/style.css' %}"> <!--☆2-->
</head>
<body>
<header>
<a href="{% url 'list:top' %}" class="header-logo">LIST APP</a> <!--☆3-->
</header>
<div class="container">
<div class="container-header">
<h1>買い物リスト</h1>
<a href="/new" class="new-button">+ 新規登録</a>
</div>
<div class="index-table-wrapper">
<div class="table-head">
<span class="id-column">ID</span>
<span>買うもの</span>
</div>
<ul class="table-body">
{% for object in object_list %} <!--☆4-->
<li>
<div class="item-data">
<span class="id-column">{{ forloop.counter }}</span> <!--☆4-->
<span class="name-column">{{ object.item }}</span> <!--☆4-->
</div>
<div class="item-menu">
<form action="/delete/<%= item.id %>" method="post">
<input type="submit" value="削除">
</form>
<a href="/edit/<%= item.id %>">編集</a>
</div>
</li>
{% endfor %} <!--☆4-->
</ul>
</div>
</div>
</body>
</html>
views.pyファイルにコードを追加していきます。
ListViewという、Djangoがあらかじめ用意しているclassに書かれている関数や変数を使えるようにします。ListViewは、データベースのデータを取り出して表示するイメージのものです。文字どおり、リストにする感じです。
ListViewをインポートして、それを継承したListIndex
を作成し、template_name
を定義します(☆5)。
model.pyファイルの中のどのデータベースを使うか指定していきます。models.pyのListModelを使うため、まずはfrom .models import ListModel
でimportして、ListIndex
の中でmodel = ListModel
と設定します(☆6)。
from django.shortcuts import render
from django.views.generic import TemplateView, ListView # ☆5
from .models import ListModel # ☆6
class ListTop(TemplateView):
# top.htmlをレンダリング
template_name = 'list/top.html'
class ListIndex(ListView): # ☆5
# index.htmlをレンダリング
template_name = 'list/index.html'
model = ListModel # ☆6
urls.pyファイルにコードを追加して、views.pyのListTopクラスを読み込むようにします(☆7)。
from django.urls import path
from .views import ListTop, ListIndex
# URLパターンを逆引きできるように名前をつける
app_name = 'list'
urlpatterns = [
# リクエストされたパス部分が''に合致した場合、views.pyのListTopクラスをインスタンス化する
path('', ListTop.as_view(), name='top'),
# リクエストされたパス部分が'index'に合致した場合、views.pyのListIndexクラスをインスタンス化する
path('index/', ListIndex.as_view(), name='index'), # ☆7
]
最後にTopページのListページへのリンク用のタグも変更しておきます(☆8)。
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LIST APP</title>
<link rel="stylesheet" href="{% static 'list/style.css' %}">
</head>
<body>
<div class="top-wrapper">
<div class="top-detail">
<h2 class="subtitle">買い物リストアプリ</h2>
<h1 class="title">LIST APP</h1>
<p class="description">
LIST APPは、買い物をリストアップするサービスです。
<br>
買いたいものをリストに登録してみましょう。
</p>
<a href="{% url 'list:index' %}" class="index-button">一覧を見る</a> <!--☆8-->
</div>
<div class="top-image">
<img src="{% static 'list/top.png' %}">
</div>
</div>
</body>
</html>
これでお買い物リストが表示される一覧ページ(仮)ができあがりました。
ちゃんとデータベースに登録したアイテムがリストに表示されています!
つぎは、リストに追加していくためのページを作っていきます!
Part5に続きます!
Author And Source
この問題について(Progateで作ったWebアプリをDjangoで作ってみる! Part4 -Read編-), 我々は、より多くの情報をここで見つけました https://qiita.com/insilicomab/items/a86b8d508687dbd7f712著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .