やりたいこと

ユーザIDをキーにしてデータベースからレコードを抽出して画像カラムgeneralUserImageを更新する処理を備忘録として記載します。

ディレクトリ構成

└── Project/
    ├── frontend/
    │   └── app/
    │       ├── api
    │       └── generalUsers/
    │           ├── dashboard/
    │           │   └── page.tsx
    │           └── registration/
    │               └── page.tsx
    └── backend/
        └── generalUsers/
            ├── urls.py
            ├── models.py
            └── views.py

フロント側(Next.js)の実装

frontend/generalUsers/dashboardpage.tsx

'use client'
import { useSearchParams } from "next/navigation";
import { useRouter } from "next/navigation";
import axios from "axios";
import { useEffect,useState } from "react";

export default function Dashboard(){
    const searchParam = useSearchParams();
    const router = useRouter();
    const userId = searchParam.get('userId');
    const userName = searchParam.get('userName');
    console.log('userId is',userId);
    console.log('userName is',userName);
    const thumbnailUrl = searchParam.get('url');
    const imageKey = searchParam.get('imageKey');

    const [generalUserId, setGeneralUserId] = useState<string | null>(null);
    const [generalUserName, setGeneralUserName] = useState<string | null>(null);
    const [generalUserEmail, setGeneralUserEmail] = useState<string | null>(null);
    /*
    // ✅ クライアントマウント後に sessionStorage を読み込む
    useEffect(() => {
        const id = sessionStorage.getItem('generalUserId');
        const name = sessionStorage.getItem('generalUserName');
        const email = sessionStorage.getItem('generalUserEmail');

        setGeneralUserId(id);
        setGeneralUserName(name);
        setGeneralUserEmail(email);

        console.log('id is:', id);
        console.log('name is:', name);
        console.log('email is:', email);
    }, []);
    */

    const clickBackToPage = ()=>{
        router.push('/components/thumbnailsUploadthing');
    }

    const clickUpdate = async()=>{
        try{
            const response  = await axios.put('http://127.0.0.1:8000/generalusers/updategeneralusers/',{
                generalUserId: userId,
                generalUserImage: thumbnailUrl
            });
            alert('Success to update.');
            console.log('Update data is,',response.data);
        }catch(error){
            alert('Failed to update');
            console.log(error);
        }

    }

    return (
        <div>
            <form>
                <div>
                    {generalUserId && (
                        <input type="hidden" value={generalUserId}/>
                    )}
                    {generalUserName && (
                        <input type="hidden" value={generalUserName}/>
                    )}
                    {generalUserEmail && (
                        <input type="hidden" value={generalUserEmail}/>
                    )}
                    
                </div>
                <div>
                    サムネイルURL:<img src={thumbnailUrl} width={200} height={200}/>
                    サムネイルURLKey:{imageKey}
                    <div>
                        この画像で登録しますか？
                    </div>
                    <div>
                        <button
                            type="button"
                            className="bg bg-blue-500 text-white rounded-md px-4 py-4"
                            onClick={clickUpdate}
                        >
                            Update
                        </button>
                        <button
                            type="button"
                            className="bg bg-blue-500 text-white rounded-md px-4 py-4"
                            onClick={()=>clickBackToPage()}
                        >
                            BackToPage
                        </button>
                    </div>
                </div>
            </form>
        </div>
    )
}

サーバ側(Django)の実装

backend/generalUsers/urls.py

from django.urls import path,include
from .views import GeneralUsersViewSet #Add
from rest_framework.routers import DefaultRouter
#from .views import GeneralUsersViewSet
from .views import update_general_user #Add

router = DefaultRouter()
router.register('registergeneralusers',GeneralUsersViewSet,basename='create_general_user')

urlpatterns =[
    path('updategeneralusers/', update_general_user),
    path('',include(router.urls))
]

backend/generalUsers/views.py

#from django.shortcuts import render
from .models import GeneralUsers
from .serializers import GeneralUsersSerializer
from rest_framework import viewsets
from rest_framework.decorators import api_view #追加
from rest_framework.response import Response # 追加
from rest_framework import status #追加
from django.db import transaction # 追加
from django.contrib.auth.hashers import make_password #追加
from django.core.exceptions import ObjectDoesNotExist #Add
from django.contrib.auth.hashers import check_password #Add
from .serializers import GeneralUsersSerializer
# Create your views here.

class GeneralUsersViewSet(viewsets.ModelViewSet):
    queryset = GeneralUsers.objects.all()
    serializer_class = GeneralUsersSerializer

@api_view(['POST'])
def create_general_user(request):
    if request.method == 'POST':
        with transaction.atomic():
            serializer = GeneralUsersSerializer(data=request.data)
            if serializer.is_valid():
                password = serializer.validated_data['password']
                hashed_password = make_password(password)

                serializer.validated_data['generalUserPassword'] = hashed_password
                if serializer.is_valid():
                    serializer.save()
                    return Response(serializer.data,status=status.HTTP_201_CREATED)
                else:
                    return Response(serializer.errors,status=status.HTTP_500_INTERNAL_SERVER_ERROR)
                

@api_view(['PUT'])
def update_general_user(request):
    try:
        general_user_id = request.data.get('generalUserId')
        image_url = request.data.get('generalUserImage')

        user = GeneralUsers.objects.get(generalUserId=general_user_id)
        user.generalUserImage = image_url
        user.save()

        serializer = GeneralUsersSerializer(user)
        return Response(serializer.data,status=status.HTTP_200_OK)
    except GeneralUsers.DoesNotExist:
        return Response({'error': 'User not found'}, status=status.HTTP_404_NOT_FOUND)
    except Exception as e:
        return Response({'error': str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)

backend/generalUsers/models.py

from django.db import models

# Create your models here.
class GeneralUsers(models.Model):
    generalUserId = models.CharField(blank=False,null=False)
    generalUserName = models.CharField(blank=False,null=False)
    generalUserImage = models.CharField(blank=True,null=True)
    generalUserEmail = models.CharField(blank=False,null=False)
    generalUserPassword = models.CharField(blank=False,null=False)
    generalUserDepartment = models.CharField(blank=False,null=False)
    generalUserDepartmentPhone = models.CharField(blank=False,null=False)

    def __str__(self):
        return self.generalUserId

以上です。