Webアプリ開発（Django+Vue.js+Docker）#4

こちらの記事の続きとなっています。

今回は、初期画面を作成し、docker-compose upをしてlocalhost:80で表示できるようにしたいと思います。

フロントエンド

index.html

今回はこのページを作成します。
※見た目は今後整える

ホーム

それでは、まず、templatesディレクトリ内に「index.html」ファイルを作成します。
その後、以下をコピペします。

{% extends 'base.html' %}

{% block content %}
<div>
  <h1>{{ date|date:"Y年 m月 d日"}}</h1>
  
  <div>
    <h5>ようこそ！</h5>
    <h5>今日も頑張りましょう！</h5>
  </div>
</div>
{% endblock %}

説明すると、{% extends 'base.html' %}で前回作成した型を読み込みます。
その後、型のボディにあたる{% block content %}{% endblock %}の間に内容を記述していきます。

詳しい内容に関しては、バックエンドを下記ながら説明します。

バックエンド

config/urls.py

まずは、作成したアプリにパスをつなぎます。

config/urls.pyを以下の様に書き換えます。

from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('test.urls')),
]

urlpatternsでは、第一引数で指定したurlに飛ぶと、第二引数で示したページが表示するという仕組みになっています。

そのため、localhost:80/admin/に飛ぶとadminサイト（管理画面）に飛び、localhost:80/に飛ぶとテストアプリが表示されます。

test/urls.py

テストアプリの各画面への遷移のためにパスをつなぎます。

testディレクトリ内にurls.pyを作成し、以下をコピペ。

from django.urls import path
from . import views

app_name='test'

urlpatterns = [
    path("", views.index, name="index"),
]

urlpatternsはテストアプリないの挙動を決めます。
第一引数で指定したURLに飛ぶと、第二引数で指定した関数が実行されます。第三引数は、この動作に名前付けをします。
この部分に関しては、ボタンによるページ遷移を実装する際にせつめいします。

この場合、localhost:80/に飛ぶとviews.pyに記述された、index関数が実行されます。

test/views.py

index関数を実装します。
内容は、ページを表示するとともに、少しだけデータを送ることをしたいと思います。

まず、以下をコピペします。
※後々使うものもimportされていますが気にせず、、、

from django.shortcuts import redirect, render
from django.http import HttpResponseRedirect
from django.utils import timezone
from django.urls import reverse
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.models import User
from django.contrib import messages
from django.core import serializers

def index(request):
  if request.method == 'GET':
    param = {'date': timezone.now, 'time': timezone.timedelta}
    return render(request, 'index.html', param)

この処理は、index関数が実行されたときに、どのようなメソッドで実行されたのかを判断します。
そして、getだった場合は日にちと時刻を辞書型配列に格納して、index.htmlを表示するとともに、データを格納した辞書をフロントエンドに渡します。

これで準備完了！

表示してみる

それでは、ターミナルでdocker-compose upと打ち込み、localhost:80をブラウザで表示して見ましょう！

localhost:80

ちゃんと表示されていますね！
あと、timezoneを使用してバックエンドから送ったデータもちゃんと表示されています。

ここで、やっとわかったと思いますが、htmlファイルの

{{ date|date:"Y年 m月 d日"}}

の部分は、バックエンドから送信されたdateを（Y,m,dに分けて）表示するというものでした。
「|」以降の表示方法に関しては様々あるので興味があれば適宜変更してみてください！

ここを起点にして見た目やらページ遷移やらを作っていきます！

それでは、今回はここまでにします。

最後に今のファイル構成です。

ファイル構成