[add] #25 djangoからREST FrameWorkを取得出来るようにした フロント側でDBの情報を取得するため

.gitignore

@@ -14,7 +14,8 @@ yarn.lock
 # Build
 dist
 node_modules
-
+src/backend/static/*.html
+src/backend/static/*.js
 
 ###################
 ## backend

package.json

@@ -34,6 +34,7 @@
     "webpack-dev-server": "^4.15.0"
   },
   "dependencies": {
+    "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/backend/ServerSide/admin.py

@@ -1,3 +1,6 @@
 from django.contrib import admin
+from .models import User
 
 # Register your models here.
+
+admin.site.register(User)

src/backend/ServerSide/serializers.py

@@ -0,0 +1,7 @@
+from rest_framework import serializers
+from .models import User
+
+class UserSerializer(serializers.ModelSerializer):
+  class Meta:
+    model = User
+    fields = ('id','name','age')

src/backend/ServerSide/views.py

@@ -4,6 +4,9 @@
 
 from django.urls import reverse_lazy
 
+from rest_framework import viewsets
+from .serializers import UserSerializer
+
 from .models import User
 
 # Create your views here.
@@ -16,4 +19,8 @@ class User_Create(CreateView):
   model = User
   fields = ['name','age']
 
-  success_url = reverse_lazy('ServerSide:home')
+  success_url = reverse_lazy('ServerSide:home')
+
+class UserView(viewsets.ModelViewSet):
+  serializer_class = UserSerializer
+  queryset = User.objects.all()

src/backend/djangoEnv/settings.py

@@ -44,19 +44,27 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'rest_framework',
+    'corsheaders',
     'ServerSide',
 ]
 
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    "corsheaders.middleware.CorsMiddleware",
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
 
+# リクエストの許可
+CORS_ALLOWED_ORIGINS = [
+    'http://localhost:8080'
+]
+
 ROOT_URLCONF = 'djangoEnv.urls'
 
 TEMPLATES = [

src/backend/djangoEnv/urls.py

@@ -16,12 +16,20 @@
 """
 from django.contrib import admin
 from django.urls import path , include
+
 from django.conf import settings
 from django.conf.urls.static import static
 
+from rest_framework import routers
+from ServerSide import views
+
+router = routers.DefaultRouter()
+router.register(r'users',views.UserView,'ServerSide')
+
 urlpatterns = [
     path('admin/', admin.site.urls),
-    path('django/', include('ServerSide.urls'))
+    path('django/', include('ServerSide.urls')),
+    path('api/',include(router.urls)),
 ]
 
 urlpatterns += static(settings.STATIC_URL , document_root=settings.STATICFILES_DIRS)

src/frontend/js/components/App.jsx

@@ -1,7 +1,11 @@
+import Listget from "./Listget";
+
+import { ENDPOINT_URL } from "../index";
+
 const App = () => {
   return (
     <>
-      <div>Hello React App!!</div>
+      <Listget url={ENDPOINT_URL}/>
     </>
   );
 };

src/frontend/js/components/Listget.jsx

@@ -0,0 +1,47 @@
+import { useState , useEffect } from "react";
+import axios from 'axios';
+
+import messages from '../../json/Message.json'
+
+const Listget = ({url}) => {
+  let fetched = false;
+  let [jsonfetchDatas,FetchResponse] = useState([])
+
+  useEffect(() => {
+    axios.get(url).then((res) => {
+      FetchResponse(res.data);
+      fetched = true;
+    });
+  },[]);
+
+  const Success = ({datas}) => {
+    return (
+      <ul>
+        {datas.map((data) => {
+          return (
+            <li key={data.id}>
+              <div>
+                <span>id: {data.id}</span>
+              </div>
+              <div>
+                <span>name: {data.name}</span>
+              </div>
+              <div>
+                <span>age: {data.age}</span>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  };
+
+  return (
+    <>
+      {!fetched  && <div>{messages.Server.BackendFetchError["01"]}</div>}
+      { fetched  && <Success datas={jsonfetchDatas}/> }
+    </>
+  );
+};
+
+export default Listget;

src/frontend/js/index.jsx

@@ -2,6 +2,8 @@ import { createRoot } from 'react-dom/client';
 
 import App from "./components/App";
 
+export const ENDPOINT_URL = 'http://localhost:8000/api/users/'
+
 const rootEl = document.querySelector("#root");
 const root = createRoot(rootEl);
 root.render(

src/frontend/json/Message.json

@@ -0,0 +1,7 @@
+{
+  "Server": {
+    "BackendFetchError": {
+      "01": "バックエンドのサーバーを起動してください"
+    }
+  }
+}

src/frontend/json/testdata.json

@@ -0,0 +1,16 @@
+{
+  "datas": [
+    {
+      "data": 1,
+      "id": 1
+    },
+    {
+      "data": 2,
+      "id": 5
+    },
+    {
+      "data": 4,
+      "id": 5
+    }
+  ]
+}