3/3-6

axiosのpostメソッド

const newTask=(task)=>{
const data={
title:task.title
}
headers:{
"Content-Type":"application/json",
"Authorization":"Token トークン",
}
}).then(res=>{setTasks([...tasks,res.data])})
}
  • .post()
    • 新たにDBに加えることができる
    • 第1引数にURL
    • 第2引数に加えるデータ
    • 第3引数にheaders
    • postメソッドに続けてsetTaskでシングルページ化の処理
<input type="text" name="title" value={editedTask.title} onChange={HandleInputChange()} placeholder="New task" required />
<button onClick={()=>{newTask(editedTask)}}>Create</button>
  • placeholder属性
    • テキストボックス内に表示される「例」
  • required
    • 入力必須
const HandleInputChange=()=>evt=>{
const value=evt.target.value;
const name=evt.target.name;
setEditedTask({...editedTask,[name]:value})
}

 

  • [name]のようにObjectにする意味(title)は？

 

3/3-5

axiosのメソッド

  • .get()
    • 第１引数にURL
    • 第２引数にheaders:{"Authorization":"Token トークン"}を取る
    • 続いて.then(res=>useState関数(res.data)とすることで
      • 得られたデータをuseState変数に格納する
  • .delete()
    • 第１引数にURL
    • 第２引数にheaders:{"Authorization":"Token トークン"}を取る
      • これだけで該当のデータを削除する

 

シングルページ化

  • 更新することなく変更を反映する
  • axios.delete()を使ったときにシングルページ化する
    • .then(res=>{setTasks(tasks.filter(task=>task.id !==id));
      setSelectedTask()})
      • axios.delete()に続けて更新する処理を書く
        • fileterメソッド
          • 引数がfaleseの時要素は取り除かれる
        • setSelectedTask()で選んで表示させてる方も空にする

 

Font-Awesome

 

 

 

3/3-4

ReactでdjangoのAPIを取得する

 

Django側

  • CORSのインストール
    • Django側で行う

    • docker-compose exec backend pip install django-cors-headers

  • プロジェクト/settings.pynosettei
    • CORSを設定する
    • INSTALLED_APPS=
      • 'corsheaders',を加える
    • MIDDLEWARE=
      • 'corsheaders.midddleware.CorsMiddleware'を加える
    • CORS_ORIGIN_WHITELIST=の新規作成
      • 'htttp://localhost:3000'を加える

 

React側

  • src/components/DrfAPIFetch.jsを作る
    • import React,{useState,useEffect} from 'react'
      import axios from 'axios'


      const DrfAPIFetch = () => {

      const [tasks,setTasks]=useState()

      useEffect(()=>{
      headers:{
      "Authorization":"Token トークン"
      }
      })
      .then(res =>{setTasks(res.data)})
      },[])

      return (
      <div>
      <ull>
      {
      tasks.map(task=><li key={task.id}>{task.title} {task.id}</li>)
      }
      </ull>
      </div>
      )
      }

      export default DrfAPIFetch
    • あ
    •  
  • src/App.js
    • DrfAPIFetchを読み込んでタグを作る

3/3-3

urls

  • プロジェクト/urls.py
    • from django.contrib import admin
      from django.urls import path
      from django.conf.urls import include
      from rest_framework.authtoken.views import obtain_auth_token

      urlpatterns = [
      path('admin/', admin.site.urls),
      path('api/',include('apiapp.urls')),
      path('auth/',obtain_auth_token),
      ]
    • URL/admin
      • 管理者ページへ
    • URL/api
      • /tasks
        • tokenをModHeaderで持っているとさらに下層へアクセスできる
          • /1/
          • タスクのid
      • /users
        • tokenなしでも現状アクセスできる
        • 変更もできる
          • /1/
          • username
    • URL/auth
      • トークンを手に入れるためのページ
      • Postmanで手に入る

 

 

  • アプリ/urls.py
    • 初期からはないので自分で作る

    • from django.urls import path
      from django.conf.urls import include
      from rest_framework import routers
      from apiapp.views import TaskViewSet,UserViewSet,ManageUserView

      router = routers.DefaultRouter()
      router.register('tasks',TaskViewSet)
      router.register('users',UserViewSet)

      urlpatterns = [
      path('myself/',ManageUserView.as_view(),name='myself'),
      path('',include(router.urls)),
      ]

 

    • プロジェクトのurls.pyで「URL/api」へのアクセスがあったときに繋がる
    • routers.DefaultRouter
    • routers.DefaultRouter.register('tasks',TaskViewSet)
      • /api/tasks/へのアクセスを確立している
      • TaskViewSetに従う
    • routers.DefaultRouter.register('users',UserViewSet)
      • /api/users/へのアクセスを確立している
      • UserViewSetに従う
    • path('myself/',ManageUserView.as_view(),name='myself')
      • /api/myself/へのアクセスを確立している
        • 自分のログイン情報？

3/3-2

アプリ/views.py

 

from rest_framework.authentication import TokenAuthentication
from rest_framework.permissions import IsAuthenticated,AllowAny
from rest_framework import generics
from django.contrib.auth.models import User
from rest_framework import viewsets


from .models import Task
from .serializers import TaskSerializer,UserSerializer

class UserViewSet(viewsets.ModelViewSet):
queryset=User.objects.all()
serializer_class=UserSerializer
permission_class=(AllowAny,)

class ManageUserView(generics.RetrieveUpdateAPIView):
serializer_class=UserSerializer
authentication_classes=(TokenAuthentication,)
permission_classes=(IsAuthenticated,)

def get_object(self):
return self.request.user

class TaskViewSet(viewsets.ModelViewSet):
queryset=Task.objects.all()
serializer_class=TaskSerializer
authentication_classes=(TokenAuthentication,)
permission_classes=(IsAuthenticated,)

 

3/3

  • シリアライザー
    • シリアライズするためのライブラリ 
    • 入力でもらった情報を隠しながらDBに伝える
    • 出力においても隠す
  • アプリ/serializers.py
    • 新規作成する
    • from rest_framework import serializers
      from .models import Task
      from django.contrib.auth.models import User
      from rest_framework.authtoken.models import Token

      class UserSerializer(serializers.ModelSerializer):
      class Meta:
      model =User
      fields=['id','username','password']
      extra_kwargs={'password':{'write_only':True,'required':True}}

      def create(self,validated_data):
      user=User.objects.create_user(**validated_data)
      Token.objects.create(user=user)
      return user

      class TaskSerializer(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 =Task
      fields=['id','title','created_at','updated_at']
    • serializersはrest_frameworkに含まれている
    • Userモデル
    • Token
    • メタクラス
    • fields
    • extra_kwards
      • より詳細に制限をする
        • 辞書型
        • キーに個別のフィールドを
        • 制限を要素におき制限自体も辞書型とする。
          • write_only:True
            • 書き込み専用
          • required:True
            • 要求されても返さない
    • バリデーション
      • 意図しない値が入力された時エラーを発生させる
      • validated_data

 

 

 

  •  そもそもテンプレート化してるっぽい