[Spring] 스프링 댓글 수정, 삭제 기능 구현하기 (java, oracle)

 

내가 작성한 댓글 옆에는 수정, 삭제가 뜨고 다른사람의 댓글 옆에는 신고버튼이 있다.

이 글에서는 우선 수정,삭제 기능만 써본다!

 

 

 

---

댓글 수정

 

 

<jsp>

<table class="table table-review" style="padding: 3em;  height: 300px; ">
	<tbody>
			<tr style="text-align:center;">
				<th width="0%"></th>
				<th  width="15%" >닉네임</th>
				<th  width="50%">리뷰내용</th>
				<th width="15%">작성일</th>
				<th width="10%">추천</th>
			</tr>
			<c:forEach items="${rList }" var="review" varStatus="i">
				<tr>
					<td ><input type="hidden" id="reviewIdx" value="${review.idx }"></td>
					<td >${review.name}</td>
					<td ><input class="review_content"  type="text" value="${review.content}"  autofocus disabled></td>
					<td  >
						<c:if test="${info.name eq review.name }">
								<input data-idx="${review.idx }" src="<%=request.getContextPath()%>/resources/garoestate/assets/img/icon/edit.png" style="float:left;  width:50%; " type="image" class="edit" value="수정">
								<input data-idx="${review.idx }" src="<%=request.getContextPath()%>/resources/garoestate/assets/img/icon/delete.png"  style=" float:left;  width:50%; " type="image" class="delete" value="삭제" >
						</c:if>
						<br><label >${review.createdate}</label>
					</td>
					<td align="center"><input data-idx="${review.idx}" data-recommend="${review.recommend}"  src="<%=request.getContextPath()%>/resources/garoestate/assets/img/icon/like.png" class="likebtn" type="image"  style="float:left;">
					${review.recommend}</td>
			    	<td >
				    	<c:if test="${info.name ne review.name }">
				    		<button type="button" class="btn btn-secondary" style="display:inline-block" 
							    onclick='window.open("<%=request.getContextPath()%>/reportReview", "리뷰 신고", "width=500, height=auto")'>신고</button>
				    	</c:if>
			    	</td>
				</tr>
			</c:forEach>
	</tbody>
</table>

 수정, 삭제 버튼을 아이콘 형식으로 만들기 위해 <input type="image">를 쓰고 안에 data-idx로 해당 댓글의 idx를 js로 보낸다.

처음에 아무 생각없이 id를 설정하고 val값으로 가져오려고 했는데 foreach로 반복되는 형태라 그렇게하면 첫번째 댓글이 선택되니 그렇게 하면 안된다.

 

댓글 idx는 보이면 안되니 input hidden으로 넣어준다.

 

 

<js>

$('.edit').on('click', function(){
		$('.review_content').attr('disabled', true); //기본적으로 댓글은 disabled상태로 설정한다
		$(this).parent().prev().children().attr('disabled', false);
		$(this).attr('hidden', true);
		$(this).next().attr('hidden', true); //수정,삭제 버튼은 숨기고
		$(this).next().next().next().attr('hidden', true);
		$(this).parent().append('<button type="button" class="btn btn-default" id="btnUpdate" style="margin:0">등록</button>') //등록버튼이 나타난다
	});
	
		$(document).on('click','#btnUpdate', function() {
			 var reviewidx = $(this).parent().prev().prev().prev().children().val(); //수정 버튼(this)을 기준으로 hidden으로 숨겨둔 idx값을 가져온다
			 var content = $(this).parent().prev().children().val(); //댓글을 선택
			 
					$.ajax({
						url:'<%=request.getContextPath()%>/updateReview',
				         type: 'post',
					     data: {
					 		"idx" : reviewidx,
							"content" :content
						},
				         success: function(result) {
				        	 location.reload();
				          },
				          error: function() {
				          	alert('리뷰 수정 실패');
				          }
					});	
		})

 

 

수정버튼을 클릭하면 jquery 이동 메서드를 사용하여 idx와 댓글을 선택한다.

화면에서 idx가 hidden으로 숨겨둬서 보이지 않지만 닉네임 앞에 리뷰idx가 있기 때문에 가능하다. 

수정버튼을 클릭하면 수정,삭제 요소는 숨기고 등록버튼을 append로 마지막 위치에 추가한다.

 

난 hidden으로 숨기고 append로 버튼을 추가하는 방식으로 했지만  ajax로 화면을 따로 구성해서 바꾸는 방법도 가능하다.

이건 본인의 선택~

 

 

+원래 js를 이렇게 짰었다.

    	      var before = $(this).closest('tr').find('td');
		var leng = before.length;
		
		//수정 버튼을 누르면 리뷰칸에 리뷰내용이 들어간 input박스를 넣고 등록버튼 나타내기
		var reviewidx = $(this).data("idx");
 		var idx = "<input type='hidden'  value='"+reviewidx+"' id='reviewNum'   '/>";
 		var editform = "<input type='text'  value='"+before[2].innerText+"'  id='editContent' style='font-style: oblique' size='10'  '/>";
		var editbtn = "<input  type='button' value='등록' class='btn btn-default' id='updateReview' onclick='updateReview()'>";
		var el = $(before[2]).find('input').val();
			
			$(before[1]).html(idx);
			$(before[2]).html(editform);
			 $(before[3]).html(editbtn);
			//수정 버튼 클릭시 리뷰 텍스트 마지막에 커서 깜빡임 넣기 
			var len = $('#editContent').val().length;
			 $('#editContent').focus();
			 $('#editContent')[0].setSelectionRange(len, len);

변수에 수정할 내용을 입력하는 input을 따로 만들고 수정 버튼을 누르면 띄우는 형식으로 만들었는데 코드가 너무 복잡해져서 변경했다.

 

 

 

 

수정을 누르면 등록버튼이 나타난다

 

등록버튼을 누르면 ajax통신을 이용하여 PostMapping을 이용해 컨트롤러에 데이터를 전달한다.

나는 작성일자는 그대로 두지만 만약에 작성날짜가 수정한 날짜로 되게 하려면 날짜도 추가하면 된다. 

 

	
  //컨트롤러
  // dto와 db 이름을 같게 설정해놔서 dto 형식으로 받아왔다
    @PostMapping("/updateReview") 
	public int updateReview(ReviewDto data) {
		int result = rService.updateReview(data);
		return result;
	}
    
    //서비스
    	public int updateReview(ReviewDto dto);
        
    //서비스impl
    	@Override
	public int updateReview(ReviewDto dto) {
		return dao.updateReview(dto);
	}
    
    //dao
    	public int updateReview(ReviewDto dto) {
		return sqlSession.insert("review.updateReview", dto);
	}
    
    //dto는 생략...db와 동일하게 설정함

여기선 생략했지만

1. mybatis-config에서 dto의 typeAlias를 설정하고
2. serviceimpl은 interface로 생성하고 서비스를 implements하고,
3. mapper의 namespace를 설정하고
4. 컨트롤러,서비스impl,dao에서는 각각  service, dao, sqlSession을 autowired 어노테이션을 사용해  DI주입했다.

 

 

코드는..생략

 

 

 

<mapper>

	<update id="updateReview">
	UPDATE REVIEW SET CONTENT=#{content} WHERE IDX =#{idx}
	</update>

 

등록하면 reload되면서 수정한 리뷰가 잘 보인다.

 

 

---

댓글 삭제

 

삭제기능은 더 쉽다.

 

//리뷰 삭제
	$('.delete').on('click', function(){
			var reviewidx = $(this).data("idx");
				$.ajax({
					url:'<%=request.getContextPath()%>/deleteReview',
			         type: 'delete',
				     data: {
				 		"idx" : reviewidx
					},
			         success: function(result) {
			        	 alert("리뷰가 삭제되었습니다");
			        	 location.reload();
			          },
			          error: function() {
			          	alert('리뷰 수정 실패');
			          }
				});	
				
	});

수정기능과 거의 동일하다.

나는 바로 삭제되게 했지만 중요한 정보라면 ajax 연결 전에 확인창을 띄운다거나 비밀번호 입력등을 설정해도 된다.

@DeleteMapping을 사용해 컨트롤러로 연결한다.

 

 

 

중간 코드는..수정과 비슷하니 생략!

 

<mapper>

	<delete id="deleteReview">
	DELETE FROM REVIEW WHERE IDX =#{idx}
	</delete>

 

alert가 뜨고 잘 삭제가 되었다.