[BEWITHME/SPRING] 댓글 기능 - 수정/삭제

 

게시글 하단에 댓글 기능 추가 : 댓글 리스트 수정/ 출력

 

---

 

 

1. com_comment.js 작성

1. method : 수정은 put / 삭제는 delete
2. 해당 버튼의 가장 가까운 div를 찾아서
   1. 수정 : div의 내용, 댓글 번호를 담아 controller에 전달
   2. 삭제: 댓글의 번호를 담아 controller에 전달
3. 수정/삭제가 완료되면
   1. alert '댓글 수정/삭제되었습니다' 화면에 출력설정
   2. getCommentList(com_num);으로 해당 게시글 list 재출력 function 실행

// -- 댓글 수정, 삭제 --
// 댓글 수정
async function updateCommentFromServer(cmtDataMod){
	try{
		const url = "/com_comment/"+ cmtDataMod.com_com_num;
		const config={
			method: "put",
			headers: {
				'Content-Type' : 'application/json; charset=utf-8'
			},
			body: JSON.stringify(cmtDataMod)
		}
		const resp = await fetch(url, config);
		const result = await resp.text();  
		return result;
		
	}catch(error){
		console.log(error);
	}
}

//댓글 삭제
async function deleteCommentFromServer(com_com_num){
	try {
		const url = "/com_comment/"+ com_com_num;
		const config={
			method: "delete",
			headers: {
				'Content-Type' : 'application/json; charset=utf-8'
			}
		}
		const resp = await fetch(url, config);
		const result = await resp.text();  
		return result;
	} catch (error) {
		console.log(error);
	}
}

//수정, 삭제 버튼 이벤트
document.addEventListener('click', (e)=>{ 
	if(e.target.classList.contains('modBtn')){
	//수정작업
		console.log("수정버튼 클릭");

		let div = e.target.closest('.comment_content');  
		let com_com_num = div.querySelector('[data-num]').dataset.num;
		let cmtText = div.querySelector('#cmtTextMod').value;
		console.log("com_com_num =" + com_com_num);
		console.log("cmtText =" + cmtText);

		let cmtDataMod = {
			com_com_num : com_com_num,
			com_com_content : cmtText
		};

		updateCommentFromServer(cmtDataMod).then(result=>{
			if(result > 0){
				alert("댓글 수정되었습니다");
				getCommentList(com_num);
			}
		})
	
	}else if(e.target.classList.contains("delBtn")){
		console.log("삭제버튼 클릭");

		let div = e.target.closest('.comment_content');  
		let com_com_num = div.querySelector('[data-num]').dataset.num;
		console.log("com_com_num =" + com_com_num);

		deleteCommentFromServer(com_com_num).then(result=>{
			if(result > 0){
				alert("댓글 삭제되었습니다");
				getCommentList(com_num);
			}
		})

	}
})

 

 

2. Com_CommentController 작성

1. 수정 : com_comment.js에서 받아온 com_com_num, com_com_content이 담긴   ccvo 이용                                 (com_com_num은 ccvo에 담긴 것과 넘겨 받은 것 둘 다 사용 가능 = 동일한 값!)
2. 삭제: com_comment.js에서 받아온 com_com_num이용

//댓글 수정
	@PutMapping(value="/{com_com_num}", consumes="application/json", produces = {MediaType.TEXT_PLAIN_VALUE})
	private ResponseEntity<String> modify(@PathVariable("com_com_num") int com_com_num, @RequestBody Com_CommentVO ccvo){
		log.info(">>> modify com_com_num : "+ com_com_num);
		log.info(">>> modify ccvo : "+ ccvo);
		
		int isOk = ccsv.modifyCom_Comment(ccvo);
		return isOk > 0? new ResponseEntity<String>("1",HttpStatus.OK)
				: new ResponseEntity<String>("0",HttpStatus.INTERNAL_SERVER_ERROR);
	
	}
	
	
	//댓글 삭제
	@DeleteMapping(value="/{com_com_num}", consumes="application/json", produces = {MediaType.TEXT_PLAIN_VALUE})
	private ResponseEntity<String> delete(@PathVariable("com_com_num")int com_com_num){
		log.info(">>> delete com_com_num : "+ com_com_num);
	
		
		int isOk = ccsv.deleteCom_Comment(com_com_num);
		return isOk > 0? new ResponseEntity<String>("1",HttpStatus.OK)
				: new ResponseEntity<String>("0",HttpStatus.INTERNAL_SERVER_ERROR);
	
	}

 

3. Com_CommentService 작성

package com.bewithme.www.service;

import java.util.List;

import com.bewithme.www.domain.Com_CommentVO;

public interface Com_CommentService {

	int modifyCom_Comment(Com_CommentVO ccvo);

	int deleteCom_Comment(int com_com_num);
}

 

4. Com_CommentServiceImpl 작성

@Override
	public int modifyCom_Comment(Com_CommentVO ccvo) {
		//댓글 수정
		log.info("com_comment ServiceImpl modify in!");
		return ccdao.update(ccvo);
	}

	@Override
	public int deleteCom_Comment(int com_com_num) {
		//댓글 삭제
		log.info("com_comment ServiceImpl delete in!");
		return ccdao.delete(com_com_num);
	}

 

5. Com_CommentDAO작성

package com.bewithme.www.repository;

import java.util.List;

import com.bewithme.www.domain.Com_CommentVO;

public interface Com_CommentDAO {

	int update(Com_CommentVO ccvo);

	int delete(int com_com_num);
}

 

6. Com_CommentMapper 작성

<update id="update">
  	update com_comment set com_com_content=#{com_com_content}, com_com_mod_date=now(), com_com_isMod='Y' 
  	where com_com_num=#{com_com_num}
</update>

<delete id="delete">
	delete from com_comment where com_com_num=#{com_com_num}
</delete>

 

 

---

 

수정 완료시

 

삭제 완료시

---

확인버튼을 누르면 해당 댓글이 사라진 리스트가 출력