Vue.jsとDjango REST FrameworkでSPA構築〜前半〜

Vue.jsとFlaskの連携に続き、今回はVue.jsとDjango（Django REST Framework）の連携を解説します。チュートリアルやネット上の情報は1ページだけ連携する内容が多く、ルーティングを考慮した複数ページに対応したSPA（Single Page Application）の情報が無かったので、本記事ではそれぞれ違うURLで表示する2ページの構成にしました。views.pyの関数とルーティングを増やしていけば3ページ、4ページ…と構成を増やすことができます。ボリュームが大きいので前半（バックエンド）と後半（フロントエンド）に分けて解説していきます。

Vue.jsとFlaskでSPA(Single Page Application)

コードはGitHubリポジトリにあげています。

開発環境

PC: MacBook Pro (14, 2021)
OS: macOS Monterey 12.0.1
Python: 3.10.0
Django: 4.1.7
Vue: 3.2.47

完成時のディレクトリ構造

※vue createコマンドで生成されるfrontend/node_modulesは非表示にしています。

.
├── app
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── backend
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── dist
│   ├── favicon.ico
│   └── static
│       ├── css
│       │   └── app.ae28e334.css
│       └── js
│           ├── app.c134098e.js
│           ├── app.c134098e.js.map
│           ├── chunk-vendors.fd7cbdcf.js
│           └── chunk-vendors.fd7cbdcf.js.map
├── frontend
│   ├── README.md
│   ├── babel.config.js
│   ├── jsconfig.json
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   │   ├── favicon.ico
│   │   └── index.html
│   ├── router.js
│   ├── src
│   │   ├── App.vue
│   │   ├── assets
│   │   │   └── logo.png
│   │   ├── components
│   │   │   ├── OneView.vue
│   │   │   └── TwoVie.vue
│   │   └── main.js
│   └── vue.config.js
├── manage.py
├── requirements.txt
├── templates
│   └── index.html
└── venv

Djangoプロジェクトを作成

DjangoとDjango REST Framework、django-cors-headersをインストールします。

pip install Django djangorestframework django-cors-headers

Djangoプロジェクト（backend）を作成します。（.を付けずに実行すると1段階階層が深いところにディレクトリが生成されます。）

django-admin startproject backend .

開発サーバーを起動します

python manage.py runserver

http://127.0.0.1:8000/にアクセスしてブラウザで画像のように表示されていればDjangoが起動できています。

Djangoアプリケーションを作成

Djangoアプリケーション（app）を作成します

python manage.py startapp app

appディレクトリが生成されたらbackend/settings.pyに設定を追加します。

追加項目
・INSTALLED_APPS
・MIDDLEWARE
・CORS_ORIGIN_WHITELIST

backend/settings.py

...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',  # 追加
    'app',  # 追加
    'corsheaders',  # 追加
]
...

...
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # 追加
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
...

...
# 追加
CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8080',
    'http://127.0.0.1:8000',
    'http://localhost:8000',
    'http://localhost:8080',
)
...

backend/urls.py

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/v1/', include('app.urls')),
]

app/views.py

from django.views.generic.base import TemplateView
from rest_framework import status
from rest_framework.views import APIView
from rest_framework.response import Response

import datetime


class SampleAPIView(APIView):
    def get(self, request):
        return Response("OK", status=status.HTTP_200_OK)


class DateTimeView(APIView):
    def get(self, request):
        datetime_str = datetime.datetime.now().strftime('%Y%m%d_%H%M%S')
        return Response(datetime_str, status=status.HTTP_200_OK)


class IndexView(TemplateView):
    template_name = "index.html"

appにurls.pyを追加します。

touch app/urls.py

app/urls.py

from django.urls import path
from app.views import SampleAPIView, DateTimeView

urlpatterns = [
    path("sample/", SampleAPIView.as_view(), name="sample"),
    path("datetime/", DateTimeView.as_view(), name="datetime"),
]

http://127.0.0.1:8000/api/v1/sample/とhttp://127.0.0.1:8000/api/v1/datetime/の各ページにアクセスしてブラウザで画像のように表示されていればDjango REST frameworkでAPI連携の準備ができました。

Django REST frameworkでAPI連携の準備ができたので、一旦ここでバックエンド側は終了です。続いてフロントエンド側（Vue.js）の実装を進めていきます。

後半のフロントエンドの実装は以下のURLです。

Vue.jsとDjango REST FrameworkでSPA構築〜後半〜

---

株式会社ファントムへのお問い合わせ

群馬県でPythonを使ったAIやソフトウェアを開発している株式会社ファントムが運営しています。