DjangoとReactを使ったアプリケーションを作ってみる①(Django側の準備)

プロジェクト作成～起動確認
パッケージのインストール
モデルの作成
django_react/settings.pyの編集
django_react/urls.pyの編集
home/urls.pyの編集
home/serializer.pyの作成
home/views.pyの作成
動作確認

基本的な環境構築は以前まとめているので省略。
今回はReactとの接続において必要な処理をメインに記載していく。

環境構築参考：
Djangoを使ってみる①(環境構築～プロジェクト作成) - doramochi blog
Djangoを使ってみる②(アプリケーションの作成) - doramochi blog

プロジェクト作成～起動確認

今回は「django_react」というプロジェクトを作成し、「home」というアプリケーションを作成。
「python manage.py runserver 0.0.0.0:8000」など適当なコマンドを実行し、下記画面が起動することを確認する。

パッケージのインストール

djangorestframework、django-cors-headersというパッケージをインストールしておく

conda install -c conda-forge djangorestframework
conda install -c conda-forge django-cors-headers

モデルの作成

今回はYoutubeみたいなものを作ってみようと思い、とりあえず下記の様なモデルを作成しておく。

class Video(models.Model):
    title = models.CharField(max_length=30)
    description = models.TextField(max_length=300)
    path = models.CharField(max_length=60)
    datetime = models.DateTimeField(blank=False, null=False)
    number_of_views = models.IntegerField(blank=True, default=0)

マイグレーション実行。

python manage.py makemigrations home
python manage.py migrate

動作確認用のサンプルデータとして1つデータを追加しておく。
今回は管理画面を使わず、DB Browser for SQLiteを使用してDBを編集。

django_react/settings.pyの編集

settings.pyの「INSTALLED_APPS 」の部分に下記を追加。
合わせて「CORS_ORIGIN_WHITELIST」も追加。
CORSに関しては
なんとなく CORS がわかる...はもう終わりにする。 - Qiita
などを参照。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework', #追加
    'corsheaders', #追加
    'home', #追加
]
 #追加
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000',
)

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

django_react/urls.pyの編集

homeのurls.pyを参照するように下記を追記。

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/home/', include('home.urls')), #追加
]

home/urls.pyの編集

とりあえずviews.pyの「ListVideo」を参照するようにしておく。

urlpatterns = [
    path('', views.ListVideo.as_view()) #追加
]

home/serializer.pyの作成

DBのデータをJSON形式に変換するためのクラスを追加しておく。

from rest_framework import serializers
from .models import Video

class VideoSerializer(serializers.ModelSerializer):
    class Meta:
        model = Video
        fields = ('id',
                  'title',
                  'description',
                  'path',
                  'datetime',
                  'number_of_views')

home/views.pyの作成

ListVideoクラスを作成。
モデルの中身をすべて取得し、idが指定された場合クエリを実行しフィルタリング。
その結果をJSON形式で返すという処理を記載。

from rest_framework.response import Response
from rest_framework.views import APIView
from .models import Video
from home.serializer import VideoSerializer

class ListVideo(APIView):
    def get(self, request):
        video = Video.objects.all()
        req_id = self.request.query_params.get('id')
        if req_id:
            video = video.filter(id=req_id)
        serializer = VideoSerializer(video, many=True)

        return Response(serializer.data)