Spring - 11 (댓글 기능 - 2 View구현)

모든 기능이 정상적으로 작동하는것을 테스트 하였으니 

이제 view단계로 구현할 차례이다.

 

아래 사진에 해당하는 경로에 reply.js 파일을 만들어준다.

reply.js가 get.jsp에서 동작은 하는지 간단한 확인을 해본다.

reply.js에 아래 코드를 추가

 console.log("Reply module.....");
 var replyService = {};

get.jsp에 스크립트를 추가해주고

<script type="text/javascript" src="/resources/js/reply.js"></script>

실행해보면

동작하는것을 알 수 있다.

 

 

이제 reply.js를 수정하여 댓글 등록 메소드를 구현한다.

/**
 * 
 */

console.log("Reply module.....");

var replyService = (function() {
	function add(reply, callback, error) {
		// reply : 덧글 객체
		// callback : 덧글 등록 후 수행할 메소드. 비동기
		// 주문과 동시에 처리할 내용도 전달. 페이지 이동없이 새로운 내용 갱신.
		console.log("add reply.....");

		$.ajax({
			type: 'post',
			url: '/replies/new',
			data: JSON.stringify(reply),
			// 전달 받은 객체를 json으로 변환.
			contentType: "application/json; charset=utf-8",
			success: function(result) {
				if (callback) {
					callback(result);
				}
			},
			error: function(er) {
				if (error) {
					error(er);
				}
			}
		});
	}
	return {
		add: add // 변수명.호출명 예) replyService.add
	};
})(); // 즉시 실행 함수: 명시하는 것과 동시에 메모리에 등록.

타입은 post , 실행 url은 /replies/new , data형식은 JSON  성공하면 result 실행 아니라면 에러발생.

 

확인을 위해 get.jsp에 스크립트를 수정한다.

		var bnoValue = '<c:out value="${board.bno}"/>';
		
		replyService.add({
			reply : "js test",
			replyer : "tester",
			bno : bnoValue
		}, function(result){
			alert("result: " + result);
		});
		 // 게시글을 읽을때 자동으로 댓글 1개 등록.

list.jsp에서 게시물을 읽으면 자동으로 스크립트가 실행되어 댓글이 한 개 등록된다.

 

이제 읽기화면에서 목록과 버튼이 보이도록 만들어준다.

get.jsp - 스크립트 태그 바깥쪽에 바로 만들어준다.

<!-- 덧글 목록 시작 -->
<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading">
				<i class="fa fa-comments fa-fw"></i>덧글
				<button id="addReplyBtn" class="btn btn-primary btn-xs float-right">새 덧글</button> 
			</div>
			<br>
			<div class="panel-body">
				<ul class="chat">
					<li>good</li>
				</ul>
			</div>
			<div class="panel-footer"></div>
		</div>
	</div>
</div>
<!-- 덧글 목록 끝 -->

<!-- 덧글 작성용 모달 시작 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLabel">덧글창</h5>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label>덧글</label><input class="form-control" name="reply" value="새 덧글">
				</div>
				<div class="form-group">
					<label>작성자</label><input class="form-control" name="replyer" value="replyer">
				</div>
				<div class="form-group">
					<label>덧글 작성일</label><input class="form-control" name="replyDate" value="">
				</div>
			</div>
			<div class="modal-footer">
				<button id="modalModBtn" type="button" class="btn btnwarning">수정</button>
				<button id="modalRemoveBtn" type="button" class="btn btndanger">삭제</button>
				<button id="modalRegisterBtn" type="button" class="btn btnprimary">등록</button>
				<button id="modalCloseBtn" type="button" class="btn btndefault">닫기</button>
			</div>
		</div>
	</div>
</div>
<!-- 덧글 작성 모달 끝 -->

 

이제 외관은 만들었으니 기능을 구현할 차례이다. get.jsp 스크립트부분에 추가해준다.

var bnoValue = '<c:out value="${board.bno}"/>';
		
		/* 기존에 테스트하던 코드는 주석처리 */
		/* replyService.add({
			reply : "js test",
			replyer : "tester",
			bno : bnoValue
		}, function(result){
			alert("result: " + result);
		}); */
		 // 게시글을 읽을때 자동으로 댓글 1개 등록.
		 
		var modal = $("#myModal");
		// 덧글 용 모달.
		var modalInputReplydate = modal.find("input[name='replyDate']");
		// 덧글 작성일 항목.
		var modalRegisterBtn = $("#modalRegisterBtn");
		// 모달에서 표시되는 덧글쓰기 버튼.
		var modalInputReply = modal.find("input[name='reply']");
		// 덧글 내용
		var modalInputReplyer = modal.find("input[name='replyer']"); 
		// 덧글작성자
		
		// 덧글 입력 모달창 보이기
		$("#addReplyBtn").on("click", function(e){
			// 덧글 쓰기 버튼을 클릭한다면,
			modal.find("input").val("");
			// 모달의 모든 입력창을 초기화
			modalInputReplydate.closest("div").hide();
			// closest : 선택 요소와 가장 가까운 요소를 지정.
			// 즉, modalInputReplyDate 요소의 가장 가까운 div를 찾아서 숨김.(날짜창 숨김)
			modal.find("button[id != 'modalCloseBtn']").hide();
			// 모달창에 버튼이 4개 인데, 닫기 버튼을 제외하고 숨기기.
			modalRegisterBtn.show(); // 등록 버튼은 보여라.
			$("#myModal").modal("show"); // 모달 표시.
		});
		
		// 모달창 닫기
		$("#modalCloseBtn").on("click", function(e){
			modal.modal("hide");
			// 모달 닫기 라는 버튼을 클릭한다면 모달창을 숨김.
		});
		
		// 덧글 쓰기
		modalRegisterBtn.on("click", function(e){
			// 덧글 등록 버튼을 눌렀다면,
			var reply = {
					reply : modalInputReply.val(),
					replyer : modalInputReplyer.val(),
					bno : bnoValue
			}; // ajax로 전달할 reply 객체 선언 및 할당.
			replyService.add(reply, function(result){
				alert(result);
				// ajax 처리후 결과 리턴.
				modal.find("input").val("");
				// 모달창 초기화
				modal.modal("hide"); // 모달창 숨기기
			});
		});
		
		// 덧글 목록 보이기.
		replyService.getList({
			bno : bnoValue,
			page : 1
		}, function(list){
			for(var i=0, len = list.length || 0; i<len; i++){
				console.log(list[i]);
			}
		});

덧글 쓰기 부분 해석

ajax로 전달할 reply 객체 변수를 선언을 하면서 그 안의 정보를 할당한다.

reply, replyaer 각각 input태그에서 입력한 값이 들어가며,

bno에는  var bnoValue = '<c:out value="${board.bno}"/>';  즉, 게시물 번호가 들어간다.

 

reply.js 에서 작성한 함수

여기서 add가 실행되며, 해당 url을 실행하며 컨트롤러로 넘어간다.

/replies/new 로 경로가 일치하는것을 확인, 컨트롤러가 service.register 함수를 실행하고 

service는 매퍼에서 마이바티스 쿼리로 작성한 내용을 실행한다. 

return으로 제대로 등록했으면 insertCount가 1일것이다. 그럼 ResponseEntity로 "success" 결과를 보내줌으로서

result값에 success가 들어가 alert(reuslt)로 sucess 문장이 출력된다.

 

데이터가 잘 들어감

 

이제 임시로 댓글목록이 콘솔에 찍히도록 만들어본다.

reply.js

console.log("Reply module.....");

var replyService = (function() {
	function add(reply, callback, error) {
		// reply : 덧글 객체
		// callback : 덧글 등록 후 수행할 메소드. 비동기
		// 주문과 동시에 처리할 내용도 전달. 페이지 이동없이 새로운 내용 갱신.
		console.log("add reply.....");

		$.ajax({
			type: 'post',
			url: '/replies/new',
			data: JSON.stringify(reply),
			// 전달 받은 객체를 json으로 변환.
			contentType: "application/json; charset=utf-8",
			success: function(result) {
				if (callback) {
					callback(result);
				}
			},
			error: function(er) {
				if (error) {
					error(er);
				}
			}
		});
	}
	
	function getList(param, callback, error){
		console.log("getList.....");
		var bno = param.bno;
		var page = param.page || 1;
		// 페이지 번호가 있으면 페이지 번호 전달 없으면 1전달.
		$.getJSON("/replies/pages/" + bno + "/" + page,
				function(data){
					if(callback){
						callback(data);
					}
				}).fail(function(xhr, status, err){
					// xhr : xml  htpp request의 약자.
					// 현재는 사용되지않고 형식만 맞춰줌
					if (error){
						error(er);
					}
				});
	}
	return {
		add: add, // 변수명.호출명 예) replyService.add
		getList: getList
	};
})(); // 즉시 실행 함수: 명시하는 것과 동시에 메모리에 등록.

getList도 실행방식은 같다. $.getJSON으로 json 데이터를 가져오며

자동으로 컨트롤러에서 GetMapping으로 잡히게되어 컨트롤러가 실행된 후 서비스 -> 매퍼 -> 데이터베이스로 실행

fail은 요청 호출 실패시 실행되는 구문

콘솔에 해당 게시물의 댓글이 잘 찍히고 있다.