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

1. ✅구현 목표

게시물이 로딩된 이후 화면에서 댓글 수를 클릭하면 해당 게시물에 속한 댓글을 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로 데이터를 처리함.
댓글 숫자를 보여주는 부분, 댓글을 출력하는 리스트 부분을 아래와 같이 작성한다.


      
      
      
    
    
      <html />
    
<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 버튼 클릭 시 동작하는 이벤트 처리


      
      
      
    
    
      <javascript />
    
$(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()이라는 함수로 처리함.


      
      
      
    
    
      <javascript />
    
$(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. 화면에서 댓글을 추가하는 작업은 버튼을 만들고 버튼 클릭 시 모달창을 띄우는 방식으로 구현한다.


      
      
      
    
    
      <html />
    
 <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 버튼 클릭 시 모달창을 보여주고 모달창 내에서 필요한 버튼만을 보여주도록 처리함.


      
      
      
    
    
      <javascript />
    
 //모달창
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 문자열로 바꾸어 전송하도록 구현함.


      
      
      
    
    
      <javascript />
    
 $(".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 태그


      
      
      
    
    
      <javascript />
    
 $('.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로 변환해서 처리함.


      
      
      
    
    
      <javascript />
    
//댓글 수정
        $(".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. 댓글 수정 컨트롤러 처리

'💻 my code archive > 🏷️JAVA & Spring(Boot)' 카테고리의 다른 글

[스프링부트 블로그 만들기] 글쓰기, 글 목록보기, 페이징 구현하기 (0)	2022.03.19
[스프링부트 블로그 만들기] 비밀번호 해쉬화(암호화), 스프링 시큐리티 로그인 구현하기 (0)	2022.03.19
스프링부트 공부기록(24) - 다대일 연관관계 데이터베이스 설계, 게시판 프로젝트, JPQLQuery (0)	2022.03.18
스프링부트 공부기록(23) - 방명록 작성:: 게시물 검색 구현 (0)	2022.03.18
스프링부트 공부기록(22) - 방명록 작성:: 게시물 조회, 수정, 삭제 구현 (0)	2022.03.18

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

1. ✅구현 목표

'💻 my code archive > 🏷️JAVA & Spring(Boot)' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

	<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>

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

	<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">×</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>

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

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

	$(".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();
	}
	})
	});

	$('.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();
	}
	}
	})
	});

	//댓글 수정
	$(".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();
	}
	}
	})
	})
	});

1. ✅구현 목표

'💻 my code archive > 🏷️JAVA & Spring(Boot)' 카테고리의 다른 글

검색 태그

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역