쌍용교육 -JSP수업 100일차 ch15SpringPage(11)

댓글,답글 목록 만들기

BoardMapper.xml

<!-- 댓글 목록 -->

*대신해서 변경 => 기존은 모두 select함

수정부분

 re_num,
			  		  <!-- ex: re_content가 <div>내용</div> 이거라면 &lt;div&gt;내용&lt;/div&gt; 이렇게 바뀐다. 즉 HTML 문서에서 태그로 인식되지 않고 문자 그대로 출력 되도록한다.  -->
			  		  <![CDATA[
			  		  REPLACE(REPLACE(re_content,'<','&lt;'),'>','&gt;') re_content, 
			  		  ]]>
			  		  re_date,
			  		  re_mdate,
			  		  board_num,
			  		  mem_num,
			  		  id,
			  		  nick_name,
			  		  click_num,
			  		  refav_cnt,
			  		  resp_cnt

전체 부분 코드

<!-- 댓글 목록 -->
	<select id="selectListReply" parameterType="map" resultType="boardReplyVO">
		SELECT
			*
		FROM (SELECT
				a.*,
				rownum rnum
			  FROM (SELECT
			  		  re_num,
			  		  <!-- ex: re_content가 <div>내용</div> 이거라면 &lt;div&gt;내용&lt;/div&gt; 이렇게 바뀐다. 즉 HTML 문서에서 태그로 인식되지 않고 문자 그대로 출력 되도록한다.  -->
			  		  <![CDATA[
			  		  REPLACE(REPLACE(re_content,'<','&lt;'),'>','&gt;') re_content, 
			  		  ]]>
			  		  re_date,
			  		  re_mdate,
			  		  board_num,
			  		  mem_num,
			  		  id,
			  		  nick_name,
			  		  click_num,
			  		  refav_cnt,
			  		  resp_cnt
			  		FROM spboard_reply
			  		JOIN spmember USING(mem_num)
			  		/*로그인한 상태에서 클릭한 사람의 정보읽기, 로그인하지 않으면 0 전달*/
			  		LEFT OUTER JOIN (SELECT re_num, mem_num click_num <!-- 클릭한 사람의 num과 mem_num을 비교 -->
			  			FROM spreply_fav 
			  			WHERE mem_num=#{mem_num}) 
			  			USING(re_num) 
			  		LEFT OUTER JOIN (SELECT re_num, COUNT(*) refav_cnt 
			  						 FROM spreply_fav GROUP BY re_num)
			  						 USING(re_num)
			  		LEFT OUTER JOIN (SELECT re_num,COUNT(*) resp_cnt
			  						 FROM spboard_response GROUP BY re_num)
			  						 USING(re_num)
			  		WHERE board_num=#{board_num}
			  		ORDER BY re_num DESC)a)
		<![CDATA[
		WHERE rnum >=#{start} AND rnum <=#{end}
		]]>
	</select>

<h2>를써도 태그를 먹지않게 했다.

답글 시스템을 구현

<!-- 답글 목록 -->
	<select id="selectListResponse" parameterType="long" resultType="boardResponseVO">
		SELECT
			r.te_num,
			r.te_content,
			r.mem_num,
			a.id,
			a.nick_name,
			r.te_date,
			r.te_ip,
			r.re_num,
			r.te_depth,
			r.te_parent_num,
			m.id parent_id, <!-- 알리아스를 줌 -->
			m.nick_name pnick_name <!-- 알리아스 -->
		FROM spboard_response r
		JOIN spmember a ON r.mem_num = a.mem_num
		LEFT OUTER JOIN spboard_response s ON r.te_parent_num=s.te_num
		LEFT OUTER JOIN spmember m ON s.mem_num=m.mem_num
		WHERE r.re_num=#{re_num}
		START WITH r.te_depth=0 CONNECT BY PRIOR r.te_num=r.te_parent_num ORDER SIBLINGS BY r.te_num DESC
	</select>

BoardMapper.java오타수정

//답글(대댓글)
	public List<BoardResponseVO> selectListResponse(Long re_num);

BoardService 오타수정

//답글(대댓글)
	public List<BoardResponseVO> selectListResponse(Long re_num);

BoardServiceImpl

@Override
	public List<BoardResponseVO> selectListResponse(Long re_num) {
		return boardMapper.selectListResponse(re_num);
	}

BoardAjaxController

/*===================
	 답글 목록
	===================*/
	@GetMapping("/board/getListResp")
	@ResponseBody
	public Map<String,Object> getListResp(long re_num,
										  HttpSession session){
		log.debug("<<답글 목록 - re_num>> : " + re_num);
		
		List<BoardResponseVO> list = boardService.selectListResponse(re_num);
		MemberVO  user = (MemberVO)session.getAttribute("user");
		
		Map<String,Object> mapJson = new HashMap<String, Object>();
		mapJson.put("list",list);
		if(user!=null) {
			mapJson.put("user_num",user.getMem_num());
		}
		
		return mapJson;
	}

board.reply.js

/*===================
		답글 목록
	===================*/
	function getListResponse(re_num,responseUI){
		
	}

위에 주석처리 해놨던 답글 목록 호출. 주석을 해제한다.

답글목록 부분 작성

/*===================
		답글 목록
	===================*/
	function getListResponse(re_num,responseUI){
		//서버와 통신
		$.ajax({
			url:'getListResp',
			type:'get',
			data:{re_num:re_num}, /*key:value로 위에 re_num(467라인,getListResponse 옆에 있는 re_num)은 value값이다.*/
			dataType:'json',
			success:function(param){
				//respitem 아이디가 존재하면 답글을 모두 지운 후 다시 처리함
				responseUI.find('.respitem').remove();
				
				let output = ''
				$(param.list).each(function(index,item){
					output += '<div class="respitem">';
					output += '<ul class="detail-info">';
					output += '<li>';
					if(item.te_parent_num>0){
						if(item.pnick_name){
							output += '<b> ▶'+item.pnick_name + '</b>';
						}else{
							output += '<b> ▶'+item.parent_id+ '</b>';
						}
					}
					output +='<img src="../member/viewProfile?mem_num='+item.mem_num+'" width="30" height="30" class="my-photo">';
					output +='</li>';
					output +='<li>';
					
					if(item.nick_name){
						output += item.nick_name + '<br>';
						
					}else{
						output += item.id + '<br>';
					}
					if(item.te_mdate){
						output+='<span class="modify-date">최근 수정일 : '+ item.te_mdate + '</span>';
					}else{
						output+='<span class="modify-date">등록일 : '+ item.te_date + '</span>';
					}
					output +='</li>';
					output +='</ul>';
					output +='<div class="resp-sub-item">';
					output +='<p>' +item.te_content.replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</p>';
					
					if(param.user_num == item.mem_num){
						output +='<input type="button" data-num="'+item.te_num+'" data-mem="'+item.mem_num+'" value="수정" class="resp-modify-btn">';
						output +='<input type="button" data-num="'+item.te_num+'data-rnum="'+item.re_num+'" data-mem="'+item.mem_num+'" value="삭제" class="resp-delete-btn">';
						
					}
					if(param.user_num){
						output +='<input type="button" data-num="'+item.re_num+'data-parent="'+item.te_num+'" data-depth="'+(item.te_depth+1)+'" value="답글작성" class="response2-btn">';
					}
					output +='</div>';
					output +='</div>';
				});
				//문서 객체에 추가
				responseUI.append(output);
			},
			error:function(){
				alert('네트워크 오류 발생');
			}
		})
	};

답글목록 위에 버튼 이벤트 처리 

// 답글 노출/숨김 버튼 이벤트 처리
	$(document).on('click','.rescontent-btn',function(){
		//data-status의 값이 0이면 답글 미표시 상태 1이면 답글 표시 상태
		if($(this).attr('data-status')==0){
			//0이면 답글 미표시 상태이므로 상태 답글이 있으면 답글을 표시
			//댓글 번호
			let re_num = $(this).attr('data-num');
			
			getListResponse(re_num,$(this).parents(',item'));
			//현재 선택한 내용의 답글 표시 아이콘 토글 처리
			$(this).val($(this).val().replace('▲','▼'));
			// data-status 속성을 1로 변경하여 답글이 표시된 상태로 설정
			$(this).attr('data-status',1);
		}else{ //1일 경우 닫아야됨(0일경우 열었음)
			//현재 선택한 내용의 답글 표시 아이콘 토글 처리
			$(this).val($(this).val().replace('▲','▼'));
			// data-status 속성을 0로 변경
			$(this).attr('data-status',0);
			//현재 선택한 내용 삭제
			$(this).parents('.item').find('.respitem').remove();
		}
	});

83라인 오타 수정

//답글 시작
					if(param.user_num){
						output +=' <input type="button" data-num='+item.re_num+'" data-parent="0" data-depth="0" value="답글 작성" class="response-btn">';
					}
					if(item.resp_cnt > 0){
						output += '<div><input type="button" data-status="0" data-num="' + item.re_num + '" value="▼ 답글 ' + item.resp_cnt + '" class="rescontent-btn"></div>';

board.css

0.00MB

board.reply.js

0.02MB

답글의 답글을 달면 이름의 화살표도 생김