[80일차] 게시판 댓글 수정 및 삭제 구현

🏫 Open API_JAVA

[80일차] 게시판 댓글 수정 및 삭제 구현

Dorothy_YANG 2022. 11. 17. 23:37

728x90

20221116(수)

목차
- 댓글 처리 방식 - REST API
- 댓글 페이지 번호 및 버튼 추가
- 댓글 수정하기
- 댓글 삭제하기
- 부트스트랩 CSS 적용하기
- index.jsp로 footer, header.jsp 만들기

< 댓글 처리 방식 - REST API >

우리 눈에는 한번에 보이지만 실제로는 두번의 작업이 일어난다.

(1) 게시물 내용과 댓글 목록 데이타 생성을 한번에 할 수도 있지만,

(2) 게시물 내용과 댓글목록 데이타 요청코드를 따로 할 수 있다. // getPage를 재사용하기 위해서

REST API 강조

다양한 전송방식과 URI 설계
REST 방식의 데이터 교환에서 가장 특이한 점은 기존의 GET/POST 외에 다양한 방식으로 데이터를 전달한다는 점

작업 상태	전송 방식
Create	POST
Read	GET
Update	PUT
Delete	DELTE

작업	전송방식	URI
등록	POST	/members/new
조회	GET	/members/{id}
수정	PUT	/members/{id} + body (json 데이터 등)
삭제	DELETE	/member/{id}

브라우저에서는 (클라이언트에서 서버에 요청하는 방식은 2개 뿐) POST, GET만 지원해준다.
그래서 PUT이나 DELETE를 서버층에 요청할 수 있도록 우리가 코드작업을 해주면,
브라우저가 PUT이나 DELETE를 요청하는 것처럼 상황을 만들 수 있다.
➡ REST 설계 개념 : 원래 요청방식대로 작업해라~란 개념.
REST전에는 GET POST로만 다 처리했다..

< 댓글 페이지 , 버튼, 수정 모달창 구현 >

✨ 동적으로 생성된 태그는 이벤트 다이렉트로 하지 않는다.
*주소 : http://localhost:8888/board/get?pageNum=1&amount=10&type=&keyword=&bno=3070

(1) get.jsp에 댓글 페이지, 버튼 생성코드 추가

//댓글 페이지번호 클릭.
// 동적으로 추가된 태그를 이벤트 설정을 할려면, 아래와 같이 해야 한다.

$("#replyPageStr").on("click", "ul.pagination li.page-item a", function(e) {
  e.preventDefault();

  replyPage = $(this).attr("href");
  url = "/replies/pages/" + bno + "/" + replyPage + ".json";

  getPage(url);
});

// 댓글수정 클릭.  댓글목록에서 수정버튼이 5개 존재하는 데 선택한 수정버튼을 가리키는 문법.   $(this)
$("#replyListStr").on("click", "input[name='btnModalModify']", function(){

  let rno = $(this).parents("div.box-body").find("input[name='rno']").val();
  let replyer = $(this).parents("div.box-body").find("input[name='replyer']").val();
  let reply = $(this).parents("div.box-body").find("textarea[name='reply']").val();
  let replydate = $(this).parents("div.box-body").find("span.replydate").text();

  console.log("댓글번호 : " + rno); // replydate
  console.log("댓글작성자 : " + replyer);
  console.log("댓글내용 : " + reply);
  console.log("댓글작성일 : " + replydate);

ex) 실행화면

(2) get.jsp에 수정 모달창 코드추가

// 모달대화상자에 수정내용
$("#exampleModalLabel").html("Modify Reply");
$("#replyer").val(replyer);
$("#reply").val(reply);
$("#rno").val(rno);
$("#replydate").html("등록익 : " + replydate);


// 모달대화상자 보이기
$("button[name='btnModal']").hide(); // Save, Modify, Delete 버튼 3개 숨김.
$("#btnReplyModify").show(); // Modify 버튼 보이기.

$("#replyModal").modal('show'); // 부트스트랩4의 메서드

ex) 실행화면

< 댓글 수정하기 >

modify 버튼 눌러서 Ajax 통해 수정하기 작업을 해야한다.
RNO와 REPLY, 이 두 개를 받는 작업을 해야 한다.

(1) get.jsp에 댓글수정 코드추가

// 댓글수정하기
$("#btnReplyModify").on("click", function(){
let rno = $("#rno").val();
let reply = $("#reply").val();

// JavaScript Object 구문
let replyObj = {rno: rno, reply: reply};
// 서버측에 보낼 JSON데이타 포맷을 변환    stringify() : JS Object -> JSON 문자열, parse() : JSON 문자열 -> JS Object
let replyStr = JSON.stringify(replyObj);
// 웹브라우저는 get, post 요청방식만 지원된다. 다른 요청방식을 사용할려면, 코드작업을 별도로 해야한다.
$.ajax({
  type : 'put',
  url : '/replies/modify/' + rno,
  headers : {
    "Content-Type" : "application/json", "X-HTTP-Method-Override" : "PUT"
  },
  dataType: 'text',
  data: replyStr,
  success: function(result){
    if(result == "success"){
      alert("댓글 데이타 수정성공");

      // 모달대화상자의 내용을 초기화.
      $("#exampleModalLabel").html("New Reply");
      $("#replyer").val("");
      $("#reply").val("");
      $("#rno").val("");
      $("#replydate").html("");


      $("button[name='btnModal']").hide(); // Save, Modify, Delete 버튼 3개 숨김.
      $("#btnReplyModify").show(); // Modify 버튼 보이기.

      $("#replyModal").modal('show'); // 부트스트랩4의 메서드
    }
  }
});

(2) Reply Controller.java 수정코드 추가

// 댓글수정하기. 클라이언트로부터 댓글번호(rno), 댓글내용(reply)
@PutMapping(value = "/modify/{rno}") //  /replies/modify/1
public ResponseEntity<String> modify(@PathVariable("rno") Long rno, @RequestBody ReplyVO vo)
{
    ResponseEntity<String> entity = null;

    return entity;
}

(3) ReplyMapper.java 에 댓글수정 코드 추가

(4) ReplyMapper.xml 에 modify 코드 추가

(5) ReplyService.java 에 댓글수정 코드추가

(6) ReplyServiceImpl.java 에 @Override 내용 추가

(7) ReplyController.java 댓글수정 코드추가

ex) 실행 화면

get.jsp에 추가

url = "/replies/pages/" + bno + "/" + replyPage + ".json";

                  getPage(url);

< 댓글 삭제하기 >

(1) get.jsp에 댓글 삭제하기 코드추가

// 댓글삭제하기
          $("input[name='btnModalDelete']").on("click", function(){

            if(!confirm(rno + "번 댓글을 삭제하시겠습니까?")) return;

            let rno = $(this).parents("div.box-body").find("input[name='rno']").val();

            $.ajax({
              type : 'delete',
              url : '/replies/delete/' + rno,
              headers : {
                "Content-Type" : "application/json", "X-HTTP-Method-Override" : "PUT"
              },
              dataType: 'text',
              data: replyStr,
              success: function(result){
                if(result == "success"){
                  alert("댓글 데이타 삭제성공");

                  // 모달대화상자의 내용을 초기화.
                  $("#exampleModalLabel").html("New Reply");
                  $("#replyer").val("");
                  $("#reply").val("");
                  $("#rno").val("");
                  $("#replydate").html("");


                  $("button[name='btnModal']").hide(); // Save, Modify, Delete 버튼 3개 숨김.
                  $("#btnReplyModify").show(); // Modify 버튼 보이기.
                  
                  $("#replyModal").modal('show'); // 부트스트랩4의 메서드

                  url = "/replies/pages/" + bno + "/" + replyPage + ".json";

                  getPage(url);

                }
              }
            });

(2) ReplyMapper.java에 댓글삭제 코드 추가

(3) ReplyMapper.xml에 delete 코드 추가