스프링 - 현재 실습 프로젝트 진행 상황

중간중간 쉬었던 기간도 있고 앞으로도 계속 쉬고싶은 나쁜(?) 마음이 자꾸 들어서

지금까지 구현해본 기능들을 소개해보려 한다.

 

메인 페이지

 

메인 페이지이다. 지금은 단순 게시판의 CRUD 기능과 페이징 처리가 구현되어 있다.

 

 

게시글 쓰기

 

게시글 작성 후 모달창 출력

 

결과

 

 

게시글을 작성 후 조회화면에 출력시킬 수 있다.

 

게시글 상세 조회

 

게시글 수정 및 삭제

 

CRUD 모든 기능은 일단 구현이 되어있다.

 

지금은 댓글 CRUD를 REST API와 AJAX를 활용하여 구현 중이다.

 

JSON 댓글 반환

 

콘솔 로그에 댓글 목록 가져오기

 

 

자바스크립트와 jsp에서 현재 댓글 CRUD를 구현 중이다.

아래는 reply.js이다.

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

var replyService = (function(){
	
	// 댓글 작성 처리
	function add(reply, callback, error){
		console.log("add reply..............");
		
		$.ajax({
			type : 'post',
			url : '/replies/new',
			data : JSON.stringify(reply),
			contentType : "application/json; charset=utf-8",
			success : function(result, status, xhr) {
				if (callback) {
					callback(result);
				}
			},
			error : function(xhr, status, er) {
				if (error) {
					error(er);
				}
			}
		})			
	}
	
	// 댓글 목록 조회
	function getList(param, callback, error) {
		var bno = param.bno;
		var page = param.page || 1;
		
		$.getJSON("/replies/pages/" + bno + "/" + page + ".json",
			function(data){
				if (callback) {
					callback(data);
				}
			}).fail(function(xhr, status, err) {
				if (error) {
					error();
				}
			});
	}
			
	return {
		add : add,
		getList : getList
	};
})();

 

 

아래는 get.jsp의 스크립트 부분이다.

<!-- 댓글 관련 스크립트 불러오기 -->
<script type="text/javascript" src="/resources/js/reply.js"></script>

<!-- 댓글 관련 스크립트 구현 -->
<script>
	console.log("=================");
	console.log("JS TEST");
	
	var bnoValue = '<c:out value="${board.bno}"/>';
	
	// 댓글 목록 조회 테스트
	replyService.getList({bno:bnoValue, page:1}, function(list){
		for(var i = 0, len = list.length||0; i < len; i++){
			console.log(list[i]);
		}
	});
	
	// 댓글 작성 테스트
	/* 
	replyService.add(
		{reply:"JS Test", replyer:"tester", bno:bnoValue}
		,
		function(result){
			alert("RESULT : " + result);
		}
	);
	*/
</script>

 

 

앞으로 더 실습해야할 내용은 다음과 같다.

AOP, 파일 업로드 및 조회, 로그인 및 로그아웃, 스프링 시큐리티

 

끝!

 

 

P.S. 공부하는 건 좋지만 무리하지 말고 쉬엄쉬엄 하자..