24.11.13(댓글 리스트 불러오기)

jiiiiiiiArchive.·2024년 11월 13일

Spring 국비교육

🤯지식주머니🤯

목록 보기

53/98

commentList

commentList.aws

메서드 정의

@RequestMapping 어노테이션 : 이 메서드가 특정 URL 패턴으로 매핑
@PathVariable : URL 경로에서 bidx와 block을 받아옴

댓글 수 계산 및 더보기 설정

commentService.commentTotalCnt(bidx) 메서드로 해당 게시물(bidx)의 전체 댓글 개수 가져옴
moreView : 추가 댓글 페이지 여부 저장, nextBlock : 다음 페이지 블록 지정할 변수

댓글 리스트 조회 및 JSON 생성

commentService.commentSelectAll(bidx, block) 호출하여 현재 블록의 댓글 리스트 가져오고 clist에 저장
JSONObject 객체 js 생성, clist(댓글 리스트) 및 moreView(추가 댓글 여부) 값을 JSON 형태로 추가

JSON 반환

boardSelectAll

게시물 리스트를 조회하고 게시물의 총 개수를 계산하는 메서드
SearchCriteria 객체를 이용해 페이징 및 검색 조건 처리

HashMap에 페이징 및 검색 정보 저장

(현재 페이지 - 1) * 페이지 당 게시물 수로 시작 인덱스 계산

bm.boardSelectAll(hm)

해당 조건에 맞는 게시물 리스트 가져옴
결과는 blist에 받아 반환

boardTotalCount

전체 게시물 수 반환

두 메서드는 페이징 처리와 검색 조건을 함께 반영하여 전체 게시물 수를 구하고, 특정 페이지에 해당하는 게시물 리스트를 가져오는 역할 수행

$.boardCommentList

AJAX 요청을 통해 서버로부터 댓글 목록을 받아와 화면에 출력

초기 설정 및 block 값 확인

AJAX 요청

성공 시 처리(댓글 목록 생성 및 표시)

댓글 테이블 작성 및 출력

추가 댓글 보기 버튼 처리

block 값 업데이트

$.boardCommentList = function(){
	alert("test")
	let block = $("#block").val(); // 현재 페이지의 block 값 가져옴
    								// block값은 페이지네이션에 사용, 추가 댓글을 불러올 때 필요
	alert("block"+block);
	
	$.ajax({
		type :  "get",    //전송방식
		url : "<%=request.getContextPath()%>/comment/<%=bv.getBidx()%>/"+block+"/commentList.aws",
		dataType : "json",       // json타입은 문서에서  {"키값" : "value값","키값2":"value값2"}
		success : function(result){   //결과가 넘어와서 성공했을 받는 영역
			alert("전송성공 테스트");			
			var strTr = "";				
			$(result.clist).each(function(){ // 반복 처리하여 strTr에 댓글 데이터 저장	
				
				var btnn="";			
				 //현재로그인 사람과 댓글쓴 사람의 번호가 같을때만 나타내준다
				if (this.midx == "<%=midx%>") {
					if (this.delyn=="N"){
						btnn= "<button type='button' onclick='commentDel("+this.cidx+");'>삭제</button>";
					}			
				}
				strTr = strTr + "<tr>"
				+"<td>"+this.cidx+"</td>"
				+"<td>"+this.cwriter+"</td>"
				+"<td class='content'>"+this.ccontents+"</td>"
				+"<td>"+this.writeday+"</td>"
				+"<td>"+btnn+"</td>"
				+"</tr>";					
			});		       
			
            // 댓글 테이블 구조를 HTML 형식으로 만들고, strTr에 생성된 댓글 행 추가하여 최종 HTML 테이블 완성
			var str  = "<table class='replyTable'>"
				+"<tr>"
				+"<th>번호</th>"
				+"<th>작성자</th>"
				+"<th>내용</th>"
				+"<th>날짜</th>"
				+"<th>DEL</th>"
				+"</tr>"+strTr+"</table>";		
			
			$("#commentListView").html(str); // 댓글 목록을 표시할 DOM 요소에 테이블 삽입		
			
			if(result.moreView == "N") { // 더 이상 추가 댓글이 없음
				$("#morebtn").css("display","none"); // #morebtn 숨김
			} else {
				$("#morebtn").css("display","block"); // #morebtn 표시하여 사용자가 더 많은 댓글을 불러올 수 있도록
			}
			
			alert(result.nextBlock);
			$("#block").val(result.nextBlock); // 다음 블록 번호를 block 입력 필드의 값으로 설정

			
			},
		error : function(){  //결과가 실패했을때 받는 영역						
			alert("전송실패");
		}			
	});
}