스프링부트 공부기록(25) - 게시판 프로젝트, @RestController, JSON, Ajax 댓글 처리

✅구현 목표

• 게시물이 로딩된 이후 화면에서 댓글 수를 클릭하면 해당 게시물에 속한 댓글을 Ajax로 가져와서 화면에 보여줌.
• 특정 버튼 클릭 시 새로운 댓글을 입력할 수 있는 모달창을 보여주고 Ajax의 POST 방식으로 댓글을 전송함.
• 댓글 삭제, 수정은 댓글 등록과 동일하게 특정 댓글을 선택하여 모달창에서 처리함.

방식	호출 대상	파라미터	작업	반환 데이터
GET	/replies/board/{bno}(게시물번호)	게시물 번호	해당 게시물의 댓글 조회	JSON 배열
POST	/replies/	JSON으로 구성된 댓글 데이터	댓글 추가	추가된 댓글 번호
DELETE	/replies/{rno}	댓글 번호	댓글 삭제	삭제 결과 문자열
PUT	/replies/{rno}	댓글 번호+수정할 내용	댓글 수정	수정 결과 문자열

 

1. 먼저 댓글 처리에 필요한 ReplyRepository 코드를 수정한다.

 

2. Reply를 컨트롤러, 서비스 영역에서 처리하기 위해 ReplyDTO 클래스 추가

 

3. ReplyService, ReplyServiceImpl 추가

• 댓글 등록(register)
• 특정 게시물의 댓글 리스트 가져오기(getList)
• 댓글 수정(modify)
• 댓글 삭제(remove)
• Reply를 ReplyDTO로 변환하는 entityToDTO( )
• ReplyDTO를 Reply로 변환하는 dtoToEntity( )

ReplyService

 

ReplyServiceImpl

 

4. 컨트롤러 작성

 

💡@RestController

• 댓글 데이터를 JSON으로 만들어 처리하므로 별도의 화면이 필요하지 않고 데이터만을 전송함. 이런 경우에는 @RestController를 이용해서 처리하는 것이 편리함.
• 모든 메서드의 리턴 타입은 기본으로 JSON을 사용함. 메서드 반환 타입은 ResponseEntity라는 객체를 이용함. (HTTP의 상태 코드를 같이 전달할 수 있음.

실행 결과를 보면 특정 게시물 번호(100)로 조회 시 다음과 같은 결과를 확인할 수 있다.

 

5. 이제 read.html을 수정하여 화면에서 처리하도록 한다.

• 조회 화면에서는 사용자가 해당 게시물의 댓글 수를 파악하고 댓글 숫자를 클릭 시 Ajax로 데이터를 처리함.
• 댓글 숫자를 보여주는 부분, 댓글을 출력하는 리스트 부분을 아래와 같이 작성한다.

<a th:href="@{/board/list(page=${requestDTO.page}, type=${requestDTO.type}, keyword=${requestDTO.keyword})}">
            <button type="button" class="btn btn-info">List</button>
    </a>
<div>
    <div class="mt-4">
        <h5><span class="badge badge-info addReply">Add Reply</span></h5>
        <h5><span class="badge badge-secondary replyCount">Reply Count [[${dto.replyCount}]]</span></h5>
    </div>
    <div class="list-group replyList">

    </div>
</div>

 

아래와 같이 버튼이 생성된다.

6. Reply Count 버튼 클릭 시 동작하는 이벤트 처리

$(document).ready(function (){
    var bno = [[${dto.bno}]];
    var listGroup = $(".replyList");
    $(".replyCount").click(function (){
        $.getJSON('/replies/board/'+bno, function(arr){
           console.log(arr);
       })
   })
});

 

버튼 클릭 시 해당 게시물의 댓글을 jqery의 getJSON을 활용하여 가져오고 콘솔창에서 결과를 확인할 수 있다.

 

7.댓글 목록 가져오는 코드 작성

• 댓글 조회 기능은 새로운 댓글이 추가되는 상황, 댓글 수정 및 삭제 시에도 동작이 필요하기 때문에 $(document).ready(function() { }) 안애 코드를 추가함.
• loadJSONData() : Ajax를 이용해서 가져온 JSON 데이터를 이용해 화면상의 댓글 숫자를 갱신해주고 화면에 필요한 태그로 만들어서 댓글 목록을 담당하는 <div>에 내용으로 추가함.
• 화면에 표시할 날짜 부분은 formatTime()이라는 함수로 처리함.

$(document).ready(function (){
        var bno = [[${dto.bno}]];
        var listGroup = $(".replyList");
        $(".replyCount").click(function (){
            //$.getJSON('/replies/board/'+bno, function(arr){
               // console.log(arr);
            loadJSONData();
        })

        //댓글 추가 영역
        var listGroup = $(".replyList");
        //날짜 처리 함수
        function formatTime(str){
            var date = new Date(str);

            return date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate()+' '+date.getHours()+':'+date.getMinutes();
        }

        //특정 게시글의 댓글을 처리하는 함수
        function loadJSONData(){
            $.getJSON('/replies/board/'+bno,function (arr){
                console.log(arr);

                var str="";
                $('.replyCount').html(" Reply Count "+arr.length);
                $.each(arr,function (idx, reply){
                    console.log(reply);
                    str+=' <div class="card-body" data-rno="'+reply.rno+'"><b>'+reply.rno+'</b>';
                    str+='  <h5 class="card-title">'+reply.text+'</h5>';
                    str+='  <h6 class="card-subtitle mb-2 text-muted">'+reply.replyer+'</h6>';
                    str+='  <p class="card-text">'+formatTime(reply.regDate)+'</p>';
                    str+='  </div>';
                })
                listGroup.html(str);
            });
        }

화면에서 댓글의 숫자를 클릭하면 다음과 같은 모습으로 댓글이 출력되는 것을 확인할 수 있다.

 

8. 화면에서 댓글을 추가하는 작업은 버튼을 만들고 버튼 클릭 시 모달창을 띄우는 방식으로 구현한다.

 <div class="modal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <input class="form-control" type="text" name="replyText" placeholder="Reply Text...">
                        </div>
                        <div class="form-group">
                            <input class="form-control" type="text" name="replyrt" placeholder="Replyer">
                            <input type="hidden" name="rno">
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger replyRemove">Remove</button>
                        <button type="button" class="btn btn-warning replyModify">Modify</button>
                        <button type="button" class="btn btn-primary replySave">Save</button>
                        <button type="button" class="btn btn-outline-secondary replyClose" data-dismiss="modal">Close</button>

                    </div>
                </div>
            </div>

 

9. AddReply 버튼 클릭 시 모달창을 보여주고 모달창 내에서 필요한 버튼만을 보여주도록 처리함.

 //모달창
var modal = $('.modal');
$(".addReply").click(function (){
    modal.modal('show');
    //댓글 입력 부분 초기화 시키기
    $('.input[name="replyText"]').val('');
    $('.input[name="replyer"]').val('');

    $(".modal-footer .btn").hide(); //모달 내의 모든 버튼 안 보이도록
    $(".replySave, .replyClose").show();    //필요한 버튼들만 보이도록
});

 

실행 화면

 

10. Save 버튼 클릭 시 실제 댓글이 등록되도록 작성

• 새로운 댓글은 JSON 형태의 데이터를 처리할 것이므로 자바스크립트 객체를 먼저 생성 후 해당 객체를 JSON.stringfy()를 이용해서 JSON 문자열로 바꾸어 전송하도록 구현함.

 $(".replySave").click(function (){
    var reply = {
        bno:bno,
        text: $('input[name="replyText"]').val(),
        replyer: $('input[name="replyer"]').val()
    }
    console.log(reply);

    $.ajax({
        url: '/replies/',
        method: 'post',
        data: JSON.stringify(reply),
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (data){
            console.log(data);
            var newRno = parseInt(data);
            alert(newRno+"번 댓글이 등록되었습니다.");
            modal.modal('hide');
            loadJSONData();
        }
    })
});

 

11. 댓글 등록 컨트롤러 처리

 

12. 댓글 삭제 처리 read.html 코드 작성

• 댓글 삭제는 댓글의 번호만을 전송하면 된다는 점에서 간단하지만 POST 대신 DELETE 방식을 사용해야 한다는 점에 주목해야 한다.
• 삭제 작업의 시작은 특정 댓글 선택 후 모달창에서 삭제를 선택하는 방식으로 진행함.

• 하나의 댓글이 가지는 HTML 태그

 $('.replyList').on("click",".card-body",function (){
            var rno = $(this).data("rno");
            $("input[name='replyText']").val($(this).find('.card-title').html());
            $("input[name='replyer]").val($(this).find('.card-subtitle').html());
            $("input[name='rno']").val(rno);

            $(".modal-footer .btn").hide();
            $(".replyRemove, .replyModify, .replyClose").show();
            modal.modal('show');
        });

        //댓글 삭제
        $(".replyRemove").on("click",function (){
            var rno = $("input[name='rno']").val(); //모달창에 보이는 댓글 번호, hidden 처리되어있음.
            $.ajax({
                url: '/replies/'+rno,
                method: 'delete',
                success: function (result){
                    console.log("result:"+result);
                    if(result==='success'){
                        alert("댓글이 삭제되었습니다.");
                        modal.modal('hide');
                        loadJSONData();
                    }
                }
            })
        });

 

13. 댓글 삭제 컨트롤러 처리

14. 댓글 수정 처리 코드 작성

• 댓글 수정은 PUT 방식으로 구현함
• 댓글 번호, 게시물 번호, 내용, 작성자를 같이 전달해야함.
• 모든 내용을 하나의 객체로 구성해서 이를 JSON 형태로 전달하고 서버에서는 JSON 데이터를 ReplyDTO로 변환해서 처리함.

//댓글 수정
        $(".replyModify").click(function (){
            var rno = $("input[name='rno']").val();
            var reply = {
                rno: rno,
                bno: bno,
                text: $('input[name="replyText"]').val(),
                replyer: $('input[name="replyer"]').val()
            }
            console.log(reply);
            $.ajax({
                url: '/replies/'+rno,
                method: 'put',
                data: JSON.stringify(reply),
                contentType: 'application/json; charset=utf-8',
                success: function (result){
                    console.log("RESULT: "+result);
                    if (result==='success'){
                        alert("댓글이 수정되었습니다.");
                        modal.modal('hide');
                        loadJSONData();
                    }
                }
            })
        })
    });

 

15. 댓글 수정 컨트롤러 처리