この記事ではDjangoの公式チュートリアルに沿った内容で使い方を解説していきます。
今回はDjangoでフロントエンドを構築する手順です。
フロントエンド実装の概要
Djangoでwebアプリのフロントエンドを実装するには、大きく3つの設定が必要です。
それぞれどのように設定していくのか、詳細に説明していきます。
ルーティングを設定
ルーティングでは、httpのURLと呼び出されるサーバのプログラムを紐づけます。
ルーティングは2種類のファイルで実施し、プロジェクト全体のルーティングとアプリケーションのルーティングに分かれています。
├ mysite/ ├ mysite/ │ ├ urls.py # プロジェクト全体のルーティング設定 ├ polls/ │ ├ urls.py # アプリケーションのルーティング設定
プロジェクト全体のルーティング
プロジェクト全体のルーティングはプロジェクトディレクトリにある「 mysite/urls.py」ファイルに設定します。
from django.contrib import admin
from django.urls import path, include #includeをインポート
from django.views.generic import RedirectView
urlpatterns = [
path('polls/', include('polls.urls')), #アプリケーションのルーティングを参照する
path('admin/', admin.site.urls),
path('', RedirectView.as_view(url='/polls/')), #リダイレクトの設定
]
URLの後ろに/pollsが続く場合、アプリケーションのurls.pyの設定を参照するように設定しています。
また、URLの後ろが空白だった場合、pollsにリダイレクトする設定にしています。
アプリケーションのルーティング
アプリケーションのルーティング設定は、「polls/urls.py」ファイルに設定します。
このファイルは自動で生成されないため、新規作成する必要があります。
from django.urls import path
from . import views
app_name = 'polls'
urlpatterns = [
# ex: /polls/
path('', views.Index, name='index'),
]
URL/pollsの後ろが空白の場合、views.pyファイルのindex関数を呼び出します。
アプリケーションの動作を記述
サーバにリクエストが来た際の処理を記述していきます。
設定ファイルは「polls/views.py」です。
from django.shortcuts import render
from .models import Question
def index(request):
latest_question_list = Question.objects.order_by('-pub_date')[:5]
context = {'latest_question_list': latest_question_list}
return render(request, 'polls/index.html', context)
questionテーブルのデータのリストを取得し、index.htmlの描画をしています。
表示するページを作成
views.pyで表示するためのページを作成していきます。
表示用のファイルはhtmlファイルで、templatesディレクトリの中に格納しておきます。
templatesディレクトリを作成
mkdir -p mysite/polls/templates/polls/
テンプレートディレクトリの中にアプリ名のディレクトリを作成し、その中にhtmlファイルを格納します。
htmlファイルを作成
views.pyに記載した「index.html」を作成していきます。
{% if latest_question_list %}
<ul>
{% for question in latest_question_list %}
<li><a href="/polls/{{ question.id }}/">{{ question.question_text }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No polls are available.</p>
{% endif %}
Djangoでは{% %}で囲むとpythonのコードが記述できて、{{ カラム名}}でデータを受け取ることができます。
ページを表示してみる
全ての設定が完了したので、webアプリにアクセスしてみましょう。
まず、サーバを起動します。
python3 manage.py runserver 0:8000
ブラウザからサーバにアクセスすると、Questionテーブルに入っている内容が箇条書きで表示されています。
まとめ
Djangoでwebアプリのフロントエンドを実装しました。
フロントエンドを実装するためには大きく3つの設定が必要でした。
ルーティングを設定する・アプリケーションの動作を決める・表示画面を作るについてそれぞれ解説しました。
参考文献
コメント