
環境
- macOS Catalina 10.15.4
- Python 3.8.1
- Django 2.2
- Django REST framework 3.11.0
- node 12.16.3
- yarn 1.22.4
準備
まずはDjangoのプロジェクトやらアプリやらを作っていきます。任意のディレクトリ(僕はdrf-react-todoというディレクトリで作業していきます)に移動して以下のコマンドを実行します。
django-admin startproject todo_API
cd todo_API
django-admin startapp api
APIの作成
settings.py
settings.pyにアプリの追加を行っておきます。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework', #追加
'api', #追加
]
これはどうでもいいですが日本語に設定しておきました。
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
models.py
モデルの作成をします。単純なTodoModelをmodels.pyに作っておきます。
class TodoModel(models.Model):
title = models.CharField(max_length=100)
content = models.TextField()
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
def __str__(self):
return self.title
serializers.py
serializers.pyを新しくapiの中に作成しserializerを作ります。
from rest_framework import serializers
from .models import TodoModel
class TodoSerializer(serializers.ModelSerializer):
created_at = serializers.DateTimeField(format="%Y-%m-%d %H:%M", read_only=True)
updated_at = serializers.DateTimeField(format="%Y-%m-%d %H:%M", read_only=True)
class Meta:
model = TodoModel
fields = ('id', 'title', 'content', 'created_at', 'updated_at')
views.py
次にviewを作っていきます。DRFのviewsetsを使うと簡単にviewを作ることができます。これで一覧取得、新規作成。それぞれのデータの詳細表示、更新、削除が行えます。
from rest_framework import viewsets
from .models import TodoModel
from .serializers import TodoSerializer
# Create your views here.
class TodoViewSet(viewsets.ModelViewSet):
queryset = TodoModel.objects.all()
serializer_class = TodoSerializer
urls.py
urls.pyを編集してpathとviewを対応させます。まずプロジェクトのtodo_API/urls.pyから編集します。
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('api.urls')),
]
api/にリクエストが来た場合にはapiアプリの中のurls.pyの中にviewを探しにいきます。
次にapiアプリの中にurls.pyを新規作成して編集します。
from django.urls import path, include
from rest_framework import routers
from .views import TodoViewSet
router = routers.DefaultRouter()
router.register('todos', TodoViewSet)
urlpatterns = [
path('', include(router.urls)),
]
今回はviewが1つしかないのであまり意味はありませんが、routerを使ってpathとviewを紐付けします。これでapi/todos/にリクエストが来たときにTodoViewSetで処理の内容を決めます。
CORS設定
reactアプリからAPIを叩けるように設定していきます。まず、terminal等で以下のコマンドを実行してください。
pip install django-cors-headers
コマンドを実行したらsettings.pyに少し追加の設定をします。追加しているのは3箇所です。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders', #追加
'api',
]
# 以下三行追加
CORS_ORIGIN_WHITELIST = [
'http://localhost:3000',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', #追加
'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',
]
動作確認
動作確認をしてみます。
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
これでlocalhost:8000/api/todos/ にリクエストしてブラウザ上で確認できたらAPIの作成はひとまず完了です。
続き

コメント
参考にさせていただきました。ありがとうございます。
serializers.py の “model = Task” は、”model = TodoModel” ではないでしょうか?
コメントありがとうございます!
ご指摘していただいた通りTodoModelが正しいです。ありがとうございます!