LoginSignup
2
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@timchanpon

Django REST Framework + Vue で都道府県と連携した市区町村プルダウンメニューを作成

Posted at

目標

選択された都道府県に属する市区町村を選択候補とするプルダウンメニューの作成

Githubでコードをみる

開発環境

  • Python 3.7.3
  • Django 3.0.5
  • Django REST Framework 3.11.0
  • Vue.js 2.6.11 (CDN)
  • Axios 0.19.2 (CDN)

※Djangoは、Class-Basedで開発していきます。

開発前の準備

１．必要なライブラリのインストール

pip install django
pip install djangorestframework

２．プロジェクト作成

# プロジェクト用ディレクトリ作成
mkdir your_project_name
cd your_project_name

# プロジェクト作成
django-admin startproject config .

# 作成されるプロジェクトの中身
└── your_project_name
    │
    ├── config
    │   ├── __init__.py
    │   ├── asgi.py
    │   ├── settings.py
    │   ├── urls.py
    │   └── wsgi.py
    │
    └── manage.py

３．言語＆タイムゾーン設定変更

config/settings.py
...

LANGUAGE_CODE = 'ja'  # 英語から日本語に変更

TIME_ZONE = 'Asia/Tokyo'  # タイムゾーンを東京に変更

USE_I18N = True

USE_L10N = True

USE_TZ = True

...

今回は試験的開発のため、データベースはデフォルトのSQLiteのままでいきます。

さっそく開発開始（バック処理）

１．アプリを作成

python manage.py startapp addresses
config/settings.py
...

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'addresses.apps.AddressesConfig',  # 作成したアプリを登録

    'rest_framework',  # 最初にインストールしたdjango-rest-frameworkも登録
]

...

２．モデルを作成

addresses/models.py
from django.db import models


class Pref(models.Model):
    """都道府県モデル"""

    name = models.CharField(max_length=5)

    def __str__(self):
        return self.name


class City(models.Model):
    """市区町村モデル"""

    pref = models.ForeignKey(Pref, on_delete=models.PROTECT)
    name = models.CharField(max_length=15)

    def __str__(self):
        pref_name = self.pref.name
        city_name = self.name

        return pref_name + city_name

コマンドでDBに変更を反映

python manage.py makemigratios
python manage.py migrate

作成したモデルを管理サイトに登録

addresses/admin.py
from django.contrib import admin

from .models import Pref, City


admin.site.register(Pref)
admin.site.register(City)

３．シリアライザを作成

このシリアライザファイルが、モデルオブジェクトをJson形式に変換してくれます。

addresses/serializers.py
from rest_framework import serializers

from .models import City


class CitySerializer(serializers.ModelSerializer):
    class Meta:
        model = City
        fields = ('name', )  # Json形式に変換してほしいフィールドを追加

４．Viewを追加

addresses/views.py
from django.views import generic
from rest_framework import generics

from .models import Pref, City
from .serializers import CitySerializer


class PrefListView(generic.ListView):  # 通常のListViewを指定
    model = Pref
    template_name = 'index.html'


class CityAPIView(generics.ListAPIView):  # rest-frameworkのListViewを指定
    serializer_class = CitySerializer

    # パラメータから受け取った都道府県オブジェクトに属する
    # 市区町村オブジェクトを返すよう設定
    def get_queryset(self):
        pref = self.kwargs['pk']
        queryset = City.objects.filter(pref=pref)

        return queryset

５．ルーティンを追加

config/urls.py
from django.contrib import admin
from django.urls import path, include

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

    # トップページアクセスでAddressesアプリに飛ぶよう設定
    path('', include('addresses.urls')),
]

Addressesアプリにもurls.pyを作成

addresses/urls.py
from django.urls import path

from .views import PrefListView, CityAPIView


urlpatterns = [
    # トップページアクセスをPrefListViewに指定
    path('', PrefListView.as_view()),
    # 選択された都道府県オブジェクトのパラメータを受け取るAPIルートを追加
    path('city/<int:pk>/', CityAPIView.as_view()),
]

開発（フロント処理）

１．都道府県プルダウンメニューを追加

addresses/templates/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Index</title>
</head>
<body>

<select>
  <!-- for文で、都道府県オブジェクトをプルダウン表示 -->
  {% for pref in pref_list %}
    <option value="{{ pref.pk }}">{{ pref.name }}</option>
  {% endfor %}
</select>

</body>
</html>

２．都道府県プルダウンメニューをVueと連携

addresses/templates/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Index</title>
  <!-- CDNでVue.jsをインポート -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
  <!-- v-modelで、選択された都道府県オブジェクトのpk値をprefに代入 -->
  <select v-model="pref">
    {% for pref in pref_list %}
      <option value="{{ pref.pk }}">{{ pref.name }}</option>
    {% endfor %}
  </select>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      pref: null,
    },
  })
</script>

</body>
</html>

３．選択された都道府県に属する市区町村オブジェクトをAxiosで取得

addresses/templates/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Index</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- CDNでAxiosをインポート -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
  <select v-model="pref">
    {% for pref in pref_list %}
      <option value="{{ pref.pk }}">{{ pref.name }}</option>
    {% endfor %}
  </select>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      pref: null,
      cityList: null,
    },
    watch: {
      pref: function() {
        // prefに値が代入された場合
        if (this.pref) {
          getUrl = 'city/' + this.pref + '/'
          // それに属する市区町村オブジェクトを取得しcityListに代入
          axios.get(getUrl).then(res => (this.cityList = res.data))
        }
      },
    },
  })
</script>

</body>
</html>

４．市区町村プルダウンメニューを追加

addresses/templates/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Index</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
  <select v-model="pref">
    {% for pref in pref_list %}
      <option value="{{ pref.pk }}">{{ pref.name }}</option>
    {% endfor %}
  </select>
  <!-- 都道府県が選択された場合のみ選択可能になるよう設定 -->
  <select :disabled="!pref">
    <!-- v-forで取得した市区町村オブジェクトをプルダウン表示 -->
    <option v-for="city in cityList">[[ city.name ]]</option>
  </select>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      pref: null,
      cityList: null,
    },
    watch: {
      pref: function() {
        if (this.pref) {
          getUrl = 'city/' + this.pref + '/'
          axios.get(getUrl).then(res => (this.cityList = res.data))
        }
      },
    },
    // Vueデフォルトの "{{ }}" だと、Djangoのそれと被ってしまい
    // うまく表示されないため "[[ ]]" に変更
    delimiters: ['[[', ']]'],
  })
</script>

</body>
</html>

実際に動かしてみる

１．管理者ユーザーを作成

python manage.py createsuperuser
ユーザー名:
メールアドレス:
Password:
Password (again):

Superuser created successfully.

２．管理サイトで都道府県＆市区町村オブジェクトを新規作成

まずサーバーを起動

python manage.py runserver

無事起動したら http://127.0.0.1:8000/admin から管理サイトへログインし、オブジェクトを新規作成する。

完成！

トップページ http://127.0.0.1:8000 にアクセスすれば結果が確認できます。

2
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?