본문 바로가기

Projects/Express + MongoDB Spootify

#4. 삭제 기능 구현

삭제기능 구현

삭제버튼을 누르면 작성한 리뷰가 삭제되도록 한다.

 

1) 비밀번호를 입력했는지 체크하고

2) 작성한 비밀번호가 맞으면 삭제하고, 메인페이지로 렌더링해준다

3) 작성한 비밀번호가 틀렸다면, 에러메시지를 띄운다.

 

우선 프론트엔드부터 구현하면 다음과 같다.

 function submitDelete(){
                let confirm_password = $('#confirm_password').val();

                if (!confirm_password) {
                    alert("비밀번호를 입력하지 않았습니다");
                    return false;
                }

                $.ajax({
                    type: "DELETE",
                    url: "/api/delete/<%= review._id %>",
                    data: {
                        confirm_password: confirm_password,
                    },
                    success: function (response) {
                        alert(response['message']);
                        location.href = '/';
                    },
                    error: function(error){
                        alert("비밀번호가 틀렸습니다");
                        location.relode();
                    }
                })
            }

jQuery로 객체를 가져와서, 비밀번호가 입력되어있는지 체크한 뒤, 작성한 리뷰의 id를 파라미터로 보내준다. 그 후 비밀번호가 맞는 경우에만 삭제처리를 한다. 백엔드에서는 이 기능을 다음과 같이 구현한다.

 

// 특정 글을 삭제하는 기능
router.delete('/delete/:id', async(req, res)=>{
  original_review = await Reviews.findOne({_id:req.params.id})

  if (original_review.password == req.body.confirm_password){
    await Reviews.deleteOne({_id:req.params.id},function(error,result){
      if (error){
        console.log(error);
      }else{
        res.status(200).send({message: "삭제완료"})
      }
    })
  }else {
    res.status(400).send({message:"비밀번호가 틀렸습니다"})
  } 
}) 

url 파라미터를 통해 원본 리뷰를 찾는다. 그 후, request의 body에 담긴 리뷰의 비밀번호와 원본 리뷰의 비밀번호가 동일한 경우에만 저장된 내용을 삭제한다. 그 다음, 각각에 따라 서로다른 status code로 메시지를 보내준다.

'Projects > Express + MongoDB Spootify' 카테고리의 다른 글

#5. 프로젝트 후기  (0) 2021.07.04
#3. 리뷰 수정 기능 구현  (0) 2021.07.04
#2. 리뷰작성 화면  (0) 2021.07.04
#1. 메인화면의 구성  (0) 2021.07.04
#0. 프로젝트 소개  (0) 2021.07.04