Spring-Boot,JPA로 질문/답변 게시판 구현(35)

Spring-Boot, JPA로 질문/잡변 게시판 구현 및 배포

자바지기님 유튜브 강의 정리

6-3. AJAX를 활용한 답변 삭제

  • 댓글 삭제 기능 구현을 해보자

  • show.html의 script구문에 삭제버튼이 있기 때문에 기존 삭제 버튼을 수정한다.

    <!-- show.html -->
      
    ...
    <li>
        <a class="link-delete-article" href="/api/questions//answers/">삭제</a>
    </li>
    ...
    <script>
    ...
    <li>
        <a class="link-delete-article" href="/api/questions/{3}/answers/{4}">삭제</a>
    </li>
    </script>
    
    • link-delete-article 클래스에 대한 버튼 클릭을 했을 때 이벤트를 잡으면된다.
  • scripts.js에 작성한다.

    //scripts.js
    ...
    $(".link-delete-article").click(deleteAnswer);
    function deleteAnswer(e) {
      e.preventDefault();
      var url = $(this).attr("href");
      console.log("url :" + url);
        
      $.ajax({
          type : 'delete',
          url : url,
          dataType : 'json',
          error : function(xhr, status) {
            console.log("error");
          },
          success : function(data, status) {
            console.log("success");
          }
      })
    }
    
    • 삭제 버튼을 눌렀을 때 해당 url로 가지않고 url을 얻어오기만 한다.
    • error, success에 대한 function을 따로 구현할 수 있지만 내부에서 구현하여 처리할 수도 있다.
  • 테스트해보면 당연하지만 url오류가 난다. Controller에 Delete에 대한 메서드를 구현한다.

    public class ApiAnswerController {
      ...
      @DeleteMapping("{id}")
      public Result delete(@PathVariable Long questionId, @PathVariable Long id, HttpSession session) {
        if (!HttpSessionUtils.isLoginUser(session)) {
            return Result.fail("로그인 하세요.");
        }
        Answer answer = answerRepository.findOne(id);
        User loginUser = HttpSessionUtils.getUserFromSession(session);
        if (!answer.isSameWriter(loginUser)) {
          return Result.fail("자신의 글만 삭제할 수 있습니다.");
        }
        answerRepository.delete(id);
        return Result.ok();
      }
    }
    
  • 테스트

    • 테스트 하면 콘솔의 데이터에 value(true or false), errorMessage(false일때만)이 출력될텐데 value가 true이면 삭제에 성공한것이다.
    • :raising_hand_man:이해 안되는점 : 댓글을 작성하고 바로 삭제를 누르면 405 error가 발생한다. 그런데 새로고침을 한번 하고 삭제를 누르면 정상적으로 작동한다. 그런데 왜 그런지는 잘 모르겠다.

여기까지 실습

  • success에서 value가 true일때에 대한 처리를 해주자.

    ...
    function deleteAnswer(e) {
      ...
      success: function(data, status) {
        console.log(data);
        var deleteBtn = $(this);
        var url = deleteBtn.attr("href");
          
        $.ajax({
            ...
            success: function (data, status) {
              console.log(data);
              if(data.valid) {
                deleteBtn.closest("article").remove();
              } else {
                alert(data.errorMessage);  
              }
            }
        })
      }
    }
    
    • show.html에서 this에해당하는 부분에서 가장 가까운 article을 삭제한다. 그런데 위의 this와 ajax내부의 this가 다르기 때문에 임시변수를 선언해서 고쳐준다.

여기까지 실습

  • ajax를 적재적소에 잘 활용하면, 좀 더 사용자입장에서 좋게할 수 있는 유용한 기능이다. 최근에는 웹 애플리케이션 제작에 많이 사용되기 때문에 학습을 해두는것이 좋다.

댓글남기기