50) REST 방식 댓글 구현 - 4

22.6.29

 - 댓글 구현 4번째 포스팅

 - 언제까지 해야하나 의문이지만 시작했으니 끝까지 달려봄

 

---

 

1) 댓글의 목록처리

 - reply.js 에서 Ajax 호출을 담당하기에, jQuery의 jetJSON()을 이용해서 처리함

 

reply.js

	// 댓글목록
	function getList(param, callback, error) {
		let bno = param.bno;
		let page = param.page || 1;
		// 이크마 스크립트 ES6/ 만약 page가 null이면 1을 넣으라는 의미.
		
		let url = contextPath + '/replies/pages/'+bno+ '/'+page;
		let success = function(data){
			if(callback){callback(data)};
		}
		
		$.getJSON(url, success).fail(function(xhr, status, err){
			if(error) {error(err)};
		});
	}

 - getList 메서드는 param 객체를 통해 파라미터를 전달 받아서 JSON 목록을 호출

 - url에서는 반드시 contextPath( 위에서 변수로 선언해줌 - pageContext.request.contextPath로 설정)

 - callback으로 받고, java script는 선언한 변수를 설정안해도 실행에 문제 없음.

 - 이어서 get.jsp에서 댓글을 가져오는 코드 작성

 

get.jsp

	$(function () {
	let bnoValue = $('input[name="bno"]').val();
	
	replyService.getList({bno:bnoValue, page:1}, function(list) {
			for(let reply of list){
				console.log(list);
			}
	})
	});

  - reply.js 에서 설정한대로 bno(댓글번호), page(댓글페이지)로 목록을 불러온다.

 

결과

 - 댓글이 잘 불러와진다는 것을 확인!

 - 자세한 HTML 코드는 다음 포스팅에!

 

2) 댓글 삭제, 수정, 조회

 - 댓글 삭제 - 

 - 댓글의 삭제는 Delete 방식으로 url을 호출만하면 바로 처리된다.

 - reply.js에 remove() 함수를 추가!

 

reply.js

	// 댓글 삭제
	function remove(rno, callback,error){
		
		$.ajax({
			type : 'delete',
			url : contextPath+'/replies/' + rno,
			success : function(result, status, xhr){
				if(callback){
					callback(result);
				}
			},
			error : function(xhr, status, err){
				if(error){
					error(err);
				}
			}
		});
	}

 - reply.js에서는 delete타입 설정 및 url을 설정해준다

 

get.jsp

	function deleteTest() {
		replyService.remove(7, function(result) {
		 alert(result);	
		}), function () {
			alert('실패')
		}
	}
})

 - 실제 테스트를 해보면 7번 댓글이 삭제가 됨을 확인 할 수 있다.

 

 - 댓글 수정 -

 - 댓글 수정은 수정 내용 및 번호를 전송

 - JSON 형태로 전송하기에 ADD 메서드와 거의 흡사한 형태 / 타입만 PUT 타입으로 변경할 것!

 

reply.js

	// 댓글 수정
	
	function update(reply, callback, error){
		
		$.ajax({
			type : 'put',
			url : contextPath+'/replies/' + reply.rno ,
			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);
				}
			}
		});
} //update end

 - get.jsp 에서는 replyService로 메서드를 불러와서 사용!

 

get.jsp

$(function () {
	// 수정테스트
	function updateTest(){
		replyService.update({
			rno : 5,
			bno : 1,
			reply : "댓글 수정 테스트트트트"
		}), function (result) {
			alert("결과 : " + result);
		}
	}

 - 이렇게 하면 1번 게시글의 5번째 댓글의 내용을 수정하는 테스트

 

 - 댓글 조회 처리 -

 - 특정번호의 댓글 조회는 get 방식으로 처리

 

reply.js

	// 댓글 번호 가져오는 메서드
	function get(rno, callback, error) { //파라미터 이름 rno
		
		$.get(contextPath+'/replies/' + rno, function(result) { //contextPath 추가
			if(callback) callback(result);
			}).fail(function(xhr, status, err) {
				if(error) error(er);
			})
	}
		return {
		add : add,
		getList : getList,
		remove : remove,
		update : update,
		displayTime : displayTime,
		get : get
	};

 - 단순히 댓글 번호만 호출하면 바로 댓글 내용을 확인 할 수 있다.

 

get.jsp

replyService.get(14, function(data){
	console.log(data);
});

 - 14번 호출해서 댓글 확인

 

---

 - 다음에는 댓글 목록 처리를 화면단에 처리하는 포스팅!