Djangoでwebアプリの作成(フロントエンド)

スポンサーリンク
Djangoでwebアプリの作成(フロントエンド編)Django

この記事ではDjango公式チュートリアルに沿った内容で使い方を解説していきます。

今回はDjangoでフロントエンドを構築する手順です。

 

フロントエンド実装の概要

Djangowebアプリのフロントエンドを実装するには、大きく3つの設定が必要です。

Djangoで実装に必要な項目
  • ルーティングを設定する
  • アプリケーションの動作を決める
  • 表示画面を作る

 

それぞれどのように設定していくのか、詳細に説明していきます。

 

ルーティングを設定

ルーティングでは、httpのURLと呼び出されるサーバのプログラムを紐づけます。

ルーティングは2種類のファイルで実施し、プロジェクト全体のルーティングとアプリケーションのルーティングに分かれています。

├ mysite/ 
   ├ mysite/ 
   │ ├ urls.py # プロジェクト全体のルーティング設定
   ├ polls/ 
   │ ├ urls.py # アプリケーションのルーティング設定

 

プロジェクト全体のルーティング

プロジェクト全体のルーティングはプロジェクトディレクトリにある「 mysite/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」ファイルに設定します。

このファイルは自動で生成されないため、新規作成する必要があります。

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」です。

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」を作成していきます。

polls/templates/polls/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テストページ

 

まとめ

Djangowebアプリのフロントエンドを実装しました。

フロントエンドを実装するためには大きく3つの設定が必要でした。

ルーティングを設定する・アプリケーションの動作を決める・表示画面を作るについてそれぞれ解説しました。

 

参考文献

Django
The web framework for perfectionists with deadlines.

コメント

タイトルとURLをコピーしました