今どきはNuxt.jsなどでフロントエンドを作って、DjangoでAPIを実装するという方法が主流かと思いますが、Djangoのテンプレートにvue.jsを組み込んでみたいと思います。
このログは、こちらのレポジトリでDjango+Dockerセットアップ後の環境を想定しています。
モジュールインストール
DjangoでAPIを実現するためのモジュールをインストールします。
|
1 2 3 |
make cmd_django pip install djangorestframework pip install django-filter |
一旦、djangoコンテナから抜けて（cmd+d）、djangorestframeworkの静的ファイルをstaticフォルダににコピーします。
※途中、コピー上書きするか聞かれるので「yes」とタイピング。
|
1 |
make collect_static |
アプリケーション作成
articleという名前のアプリケーションを作成します。
|
1 |
docker-compose exec django python manage.py startapp article |
settings.pyにarticleを登録します。
|
1 2 3 4 |
INSTALLED_APPS = [ ... 'article', ] |
モデル作成とマイグレーション
models.pyは以下のように変更します。
|
1 2 3 4 5 6 7 8 9 10 |
from django.db import models class Article(models.Model): article_id = models.AutoField(primary_key=True) article_heading = models.CharField(max_length=250) article_body = models.TextField() def __str__(self): return self.article_heading |
DBに反映します。
|
1 2 |
make make_migrations make migrate |
restframeworkの登録
settings.pyにrestframeworkを登録します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
INSTALLED_APPS = [ ... 'rest_framework', ] REST_FRAMEWORK = { "DEFAULT_AUTHENTICATION_CLASSES": ( "rest_framework.authentication.BasicAuthentication", "rest_framework.authentication.SessionAuthentication", "rest_framework.authentication.TokenAuthentication", ), "DEFAULT_PAGINATION_CLASS": "rest_framework.pagination.PageNumberPagination", "PAGE_SIZE": 100, } |
APIのURL設定
APIへの経路をまとめたファイルをプロジェクトのurls.pyに登録します。
|
1 2 3 4 5 6 |
from .api_urls import api_urlpatterns # 追加 urlpatterns = [ ... path('api/1.0/', include(api_urlpatterns)), # 追加 ] |
|
1 2 3 4 5 6 7 8 9 10 |
from django.urls import path from django.conf.urls import include from article.api_urls import article_router # apiのURL一覧 # 慣例として複数形にする api_urlpatterns = [ path('articles/', include(article_router.urls)), ] |
アプリケーション側の準備
プロジェクトのURL設定が完了したら、次はアプリケーション側でURLを設定しましょう。
|
1 2 3 4 5 6 |
from rest_framework import routers from article.api_views import ArticleViewSet article_router = routers.DefaultRouter() article_router.register(r'', ArticleViewSet) |
|
1 2 3 4 5 6 7 8 |
from rest_framework import viewsets from .models import Article from .serializers import ArticleSerializer class ArticleViewSet(viewsets.ModelViewSet): queryset = Article.objects.all() serializer_class = ArticleSerializer |
プロジェクトのurls.pyにまとめて記述することも可能ですが、こうやってファイルを分けると管理しやくなるそうです。
|
1 2 3 4 5 6 7 8 |
from rest_framework import serializers from .models import Article class ArticleSerializer(serializers.ModelSerializer): class Meta: model = Article fields = '__all__' |
serializers.pyはArticleモデルをJSON形式で書き出す際にどのフィールドを出力するか決定するファイルのようです。
APIが動いているか確認
http://localhost:8000/api/1.0/articles/にアクセスして以下のような画面になっていれば成功です。まだデータがないので、「results」が空ですね。
次回は、ビュー側の設定（テンプレート作成、vue.js組み込み）をしたいと思います。お楽しみに。
以上です。