스프링 웹프로젝트 연습_9

지난 포스트에 이어서, 오늘은

 

#스프링4.x 버전에 내장된 @RestController(@ResponseBody없이 사용)을 이용해서 Ajax로 Rest API방식의 댓글 쓰기를 작업해 보았습니다.

관리자단 부분만 적용함. 그리고, AOP기능으로 게시판과 댓글에 사용된 파라미터와 매서드 실행 시간을 확인 하는 방법도 확인해 보았습니다. 실제 개발할때, Post,Get,Ajax등의 데이터 전송값 확인과 제작한 메서드함수의 실행 시간 확인은 중요한 내용이 됩니다.

- 작업확인/크롬 Talend API Tester 이용 AOP 테스트: 파라미터값과 매서드명 + 매서드 실행 시간 확인 가능(아래)

 

- 위에서는 크롬 Talend API Tester 이용 해서 Ajax테스트를 했으나, 좀더 편한 Rest Client 크롬도구인

  부메랑(Boomerang)을 사용해 보았다. 앞으로는 부메랑으로...(아래 작업화면)

 

 

- 작업확인/jsp: Ajax댓글-AOP매서드확인(아래)

 

- 추가한 댓글 테이블 생성 쿼리

create table TBL_REPLY
(
 rno int not null auto_increment
 ,bno int not null default 0
    ,replytext varchar(1000) not null
    ,replyer varchar(50) not null
    ,regdate timestamp not null default now()
    ,update_date TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP on UPDATE CURRENT_TIMESTAMP
    ,primary key(rno)
);
alter table tbl_reply add constraint fk_board
foreign key (bno) references tbl_board(bno);

- 수정한 게시판 쿼리

alter table tbl_board add column reply_count int default 0;

 

#추가로 어제 작업하기로 한 공통 예외 처리 부분 추가도 실행해 보았습니다.

- 아래 왼쪽 화면이 에러 예외처리 전 화면이라면, 아래 오른쪽 화면이 예외처리 한 화면 입니다.

 

지금까지 작업한 소스

20191016_backup.zip

 

Ps.

앞으로 작업은 아래와 같습니다.

- Ajax댓글기능을 사용자 화면에 추가.

- 이전 포스트에서 건너 띄었던 페이징화면, 검색화면(Mybatis동적쿼리)처리 및 파일 업로드 구현.

 

REST API 서버+서비스(REST FULL)댓글 처리
댓글 리스트
<!-- 댓글 목록 반복처리 : 핸들러 플러그인 사용 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.js"></script>
<script id="template" type="text/x-handlebars-template">
{{#each .}}
<div class="replyLi" data-rno={{rno}}>
	<i class="fa fa-comments bg-blue"></i>
	<div class="timeline-item" >
		<span class="time">
			<i class="fa fa-clock-o"></i>{{regdate}}
		</span>
		<h3 class="timeline-header">
			<strong>{{rno}}</strong> -{{replyer}}
		</h3>
		<div class="timeline-body">{{replytext}}</div>
		<div class="timeline-footer">
			<a class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modifyModal">
			Modify
			</a>
		</div>
	</div>
</div>
{{/each}}
</script>
<script>
//댓글 변수 초기화
var bno = ${boardVO.bno};
var printData = function(replyArr, target, templateObject) {
	var template = Handlebars.compile(templateObject.html());
	var html = template(replyArr);
	$(".replyLi").remove();
	target.after(html);
}
function getPage(pageInfo) {
	$.getJSON(pageInfo, function(data) {
		//console.log(data);//디버그
		printData(data, $("#repliesDiv"), $('#template'));
		$("#modifyModal").modal('hide');
	});
}
//댓글 리스트 실행
$(document).ready(function(){
	getPage("/reply/select/"+bno);
});
</script>
댓글 입력
<script>
$(document).ready(function(){
	//댓글 입력
	$("#replyAddBtn").on("click",function(){
		 var replyerObj = $("#newReplyWriter");
		 var replytextObj = $("#newReplyText");
		 var replyer = replyerObj.val();
		 var replytext = replytextObj.val();
		  $.ajax({
				type:'post',
				url:'/reply/insert',
				headers: { 
				      "Content-Type": "application/json",
				      "X-HTTP-Method-Override": "POST" },
				dataType:'text',
				data: JSON.stringify({bno:bno, 
									  replyer:replyer, 
									  replytext:replytext}),
				success:function(result){
					if(result == 'SUCCESS'){
						alert("등록 되었습니다.");
						getPage("/reply/select/"+bno);
						replyerObj.val("");
						replytextObj.val("");
					}
			}});
	});
});
</script>
댓글 수정/삭제용 모달창 + 변수값 바인딩 및 이벤트
<div id="modifyModal" class="modal modal-primary fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header" style="display:block;">
	<button type="button" class="close" data-dismiss="modal">&times;</button>
	<h4 class="modal-title"></h4>
      </div>
      <div class="modal-body" data-rno>
	<p><input type="text" id="replytext" class="form-control"></p>
      </div>
      <div class="modal-footer">
	<button type="button" class="btn btn-info" id="replyModBtn">Modify</button>
	<button type="button" class="btn btn-danger" id="replyDelBtn">DELETE</button>
	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script>
$(document).ready(function() {
	//선택한 댓글 모달찯에 바인딩
	$(".timeline").on("click", ".replyLi", function(event){
		var reply = $(this);
		$("#replytext").val(reply.find('.timeline-body').text());
		$(".modal-title").html(reply.attr("data-rno"));
	});
	//...댓글 수정 버튼 이벤트.
	$("#replyModBtn").on("click",function(){
		  var rno = $(".modal-title").html();
		  var replytext = $("#replytext").val();
		  $.ajax({
				type:'put',
				url:'/reply/update/'+rno,
				headers: { 
				      "Content-Type": "application/json",
				      "X-HTTP-Method-Override": "PUT" },
				data:JSON.stringify({replytext:replytext}), 
				dataType:'text', 
				success:function(result){
					console.log("댓글 수정 result: " + result);
					if(result == 'SUCCESS'){
						alert("수정 되었습니다.");
						getPage("/reply/select/"+bno);
					}
			}});
	});
	//...댓글 삭제 버튼 이벤트.
	$("#replyDelBtn").on("click",function(){
		  var rno = $(".modal-title").html();
		  var replytext = $("#replytext").val();
		  $.ajax({
				type:'delete',
				url:'/reply/delete/'+rno,
				headers: { 
				      "Content-Type": "application/json",
				      "X-HTTP-Method-Override": "DELETE" },
				dataType:'text', 
				success:function(result){
					console.log("댓글 삭제 result: " + result);
					if(result == 'SUCCESS'){
						alert("삭제 되었습니다.");
						getPage("/reply/select/"+bno);
					}
			}});
	});	
});
</script>