코딩 개발일지

[자바스크립(js)+장고(Django)] 게시글 수정/삭제 본문

AI 본 교육/AI 9주차

[자바스크립(js)+장고(Django)] 게시글 수정/삭제

호기호 2023. 10. 17. 00:05

삭제기능이 구현하기 더 쉬워서 먼저 만들었다.

articleId 값을 정의해주는 방법이 많다.

<html>

  <!-- 글삭제 버튼 -->
  <div style="text-align: center;">
  <button
    id="delete-button"
    class="btn btn-danger"
    onclick="handleDeleteArticle(this)"
  >

<js> 에서 articleId 값 정의하는 법.

 
window.onload = async function(){
    const urlParams = new URLSearchParams(window.location.search);
    articleId = urlParams.get('article_id');
    console.log(articleId)

    await loadArticles(articleId);
    await loadComments(articleId);
}

html의 onclick을 js파일에서 받아서 response를 fetch로 백엔드주소를 받아서 DELETE method로 보내면 된다.

그러면 백엔드의 views.py에서의 함수가 작동하게되고, 백엔드의 Response를 204로 지정해줬기때문에, if문으로 메세지를 입력해 주었고, 다시 메인화면으로 가도록 경로설정을 해줬다.

<js>

// 글 삭제
async function handleDeleteArticle() {
    const token = localStorage.getItem("access");
    const response = await fetch(`${backend_base_url}/articles/${articleId}/`, {
        method: 'DELETE',
        headers: {
            "Authorization": `Bearer ${token}`
        },
    });

    if (response.status == 204) {
        alert("글 삭제 완료!");
        window.location.replace(`${frontend_base_url}/`);
    } else {
        alert("권한이없습니다.", response.status);
    }
}

<백엔드의 delete 경로>

class ArticleDetailView(APIView):
    def get(self,request, article_id):
        article = get_object_or_404(Articles, id=article_id)
        serializer = ArticleListSerializer(article)
        return Response(serializer.data, status=status.HTTP_200_OK)
        # print("get요청")
       
    def put(self,request, article_id):
        article = get_object_or_404(Articles, id=article_id)
        if request.user == article.user: # 수정은 게시글 작성만이 가능하게 해야하므로
            serializer = ArticleCreateSerializer(article, data=request.data)
            if serializer.is_valid():
                serializer.save()
                return Response(serializer.data, status=status.HTTP_200_OK)
            else:
                return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
        else:
            return Response("권한이없습니다.", status=status.HTTP_403_FORBIDDEN)
        # print("put요청")
       
    def delete(self,request, article_id):
        article = get_object_or_404(Articles, id=article_id)
        if request.user == article.user:
            article.delete()
            return Response("삭제완료", status=status.HTTP_204_NO_CONTENT)
        else:
            return Response("권한이없습니다.", status=status.HTTP_403_FORBIDDEN)
        # print("delete요청")

수정의 경우, 좀 더 복잡했다.

마찬가지로 html에 버튼을 넣어줬다.

<html>

<!-- 글 수정 버튼 -->
    <button type="button" class="btn btn-danger" onclick="updateBtn()">수정하기</button>

그리고 버튼을 누르면 글 수정페이지도 가도록 경로설정을 해주면서, 아까와 마찬가지로 articleId를 정의해줬다.

경로 뒤에 물음표를 붙여주면 해단 게시글로 이동 가능하다.

<js>

// 수정하기로 이동하는 버튼
async function updateBtn() {
    const urlParams = new URLSearchParams(window.location.search);
    articleId = urlParams.get('article_id');
    window.location.href = `${frontend_base_url}/article_update.html?article_id=${articleId}`
}

글 수정페이지는 글 생성페이지를 복사해와서 거의 비슷하게 만들어주면 된다. 수정 버튼의 함수도 당연히 바꿔주면 된다.

        <button type="button" class="btn btn-primary" onclick="updatesubmit()">
          수정하기
        </button>

console.log를 수시로 써보면서 확인해보기

ex) console.log(articleId) 써서 정의해준 articleId가 제대로 가져와졌는지 확인 등

image를 가져오기위해 FormData() 사용함

 

나머지는 삭제랑 같고, method만 PUT으로 바꿔주고, body가 필요하기때문에, append시켜준 formdata를 넣어준다.

<js>

async function updatesubmit(){
    const urlParams = new URLSearchParams(window.location.search);
    articleId = urlParams.get('article_id');
    console.log(articleId) 

    const updatedTitle = document.getElementById("title").value;
    const updatedContent = document.getElementById("content").value;
    const image = document.getElementById("image").files[0]
    console.log(updatedTitle)
    console.log(updatedContent)

    const formdata = new FormData();

    formdata.append('title', updatedTitle)
    formdata.append('content', updatedContent)
    if (image) {
        formdata.append('image', image);
    }

    let token = localStorage.getItem("access")

    const response = await fetch (`${backend_base_url}/articles/${articleId}/`,{
        method: 'PUT',
        headers: {
            "Authorization": `Bearer ${token}`
        },
        body: formdata
    }
    )

    window.location.href = `${frontend_base_url}/article_detail.html?article_id=${articleId}`
}
저작자표시

'AI 본 교육 > AI 9주차' 카테고리의 다른 글

프로필사진 업로드 / 팔로우 기능 에러해결  (2) 2023.10.10
'AI 본 교육/AI 9주차' Related Articles more