MyWeb

댓글 등록 구현..

자꾸 댓글 할 때마다 복잡해져서 어디다 댓글 달지 말아야지.. 생각하게 된다..

 

public interface IReplyService {

 

void replyRegist(ReplyVO vo); 

List<ReplyVO> getList(PageVO vo, int bno); 

int getTotal(int bno); 

 

int pwCheck(ReplyVO vo); 

void update(ReplyVO vo); 

void delete(int rno); 

 

댓글은 상세 페이지를 클릭했을 때 달 수 있는 거기 때문에..~ Detail로 와서 script를 작성해 줍니다.

 

<script>

 

$(document).ready(function() {

 

$('#replyRegist').click(function() {

 

const bno = '${article.bno}'; //컨트롤러에서 넘어온 게시글번호

const reply = $('#reply').val(); //댓글 내용

const replyId = $('#replyId').val(); //작성자

const replyPw = $('#replyPw').val(); //비밀번호

 

if(reply === '' || replyId === '' || replyPw === '') {

alert('이름, 비밀번호, 내용을 입력하세요!');

return;

}

 

$.ajax({

type: 'post',

url: '<c:url value="/reply/replyRegist" />',

data: JSON.stringify(

{

"bno":bno,

"reply":reply,

"replyId":replyId,

"replyPw":replyPw

}

),

dataType: 'text', //서버로부터 어떤 형식으로 받을지(생략 가능)

contentType: 'application/json',

success: function(data) {

console.log('통신 성공! ' + data);

$('#reply').val('');

$('#replyId').val('');

$('#replyPw').val('');

getList(1, true); //등록 성공 후 댓글 목록 함수를 호출해서 비동기식으로 목록 표현.

},

error: function() {

alert('등록에 실패했습니다. 관리자에게 문의하세요!');

}

}); 

}); 

 

//목록 요청

let page = 1;

let strAdd = ''; 

 

getList(1, true); 

 

 

function getList(pageNum, reset) {

 

const bno = '${article.bno}'; //게시글 번호

 

 

$.getJSON(

"<c:url value='/reply/getList/' />" + bno + '/' + pageNum,

function(data) {

console.log(data);

 

let total = data.total; //총 댓글수

console.log('총 댓글수: ' + total);

let replyList = data.list; //댓글 리스트

 

 

if(reset === true) {

strAdd = '';

page = 1;

}

 

console.log('현재 페이지: ' + page);

if(total <= page * 5) {

$('#moreList').css('display', 'none');

} else {

$('#moreList').css('display', 'block');

}

 

 

 

if(replyList.length <= 0) {

return; 

}

 

for(let i=0; i<replyList.length; i++) {

 

strAdd += "<div class='reply-wrap' style='display:none;'>";

...(더 많은데 생략)

 

}

$('#replyList').html(strAdd);

$('.reply-wrap').fadeIn(500);

 

}

); //end getJSON

 

} // end getList()

 

 

controller로 와서 명령 보낼 것을 작성해 줍니다

 

@Autowired

private IReplyService service;

 

//댓글 등록

@PostMapping("/replyRegist")

public String replyRegist(@RequestBody ReplyVO vo) {

System.out.println("댓글 등록 요청이 들어옵니다.");

service.replyRegist(vo);

 

return "regSuccess";

}

 

//페이징이 추가된 댓글 목록

@GetMapping("/getList/{bno}/{pageNum}")

public Map<String, Object> getList(@PathVariable int bno, @PathVariable int pageNum){

 

PageVO vo = new PageVO();

vo.setPageNum(pageNum); 

vo.setCountPerPage(5); 

 

List<ReplyVO> list = service.getList(vo, bno); 

int total = service.getTotal(bno);

 

Map<String, Object> map = new HashMap<String, Object>();

map.put("list", list);

map.put("total", total);

 

return map;

 

}

 

mapper로 가서 sql문을 작성해 줍니다

<mapper namespace="com.spring.myweb.reply.mapper.IReplyMapper">

<resultMap type="com.spring.myweb.command.ReplyVO" id="replyMap">

<result property="replyId" column="reply_id" />

<result property="replyPw" column="reply_pw" />

<result property="replyDate" column="reply_date" />

<result property="updateDate" column="update_date" />

</resultMap>

<insert id="replyRegist">

INSERT INTO freereply(rno, bno, reply, reply_id, reply_pw)

VALUES(freereply_seq.NEXTVAL, #{bno}, #{reply}, #{replyId}, #{replyPw})

</insert>

 

<select id="getList" resultMap="replyMap">

SELECT * FROM

(

SELECT ROWNUM AS rn, tbl.* FROM

(

SELECT * FROM freereply

WHERE bno = #{bno}

ORDER BY rno DESC

) tbl

)

<![CDATA[

WHERE rn > (#{paging.pageNum} - 1) * #{paging.countPerPage}

AND rn <= #{paging.pageNum} * #{paging.countPerPage}

]]>

</select>

 

<select id="getTotal" resultType="int">

SELECT COUNT(*)

FROM freereply

WHERE bno = #{bno}

</select>

 

댓글 페이징까지 했습니다!

 

댓글 수정, 삭제

//수정, 삭제

 

 

$('#replyList').on('click', 'a', function(e) {

e.preventDefault(); //태그의 고유 기능을 중지.

//1. a태그가 두 개(수정, 삭제)이므로 버튼부터 확인.

//수정, 삭제가 발생하는 댓글 번호가 몇 번인지의 여부도 확인.

 

const rno = $(this).attr('href');

$('#modalRno').val(rno);

 

//2. 모달 창 하나를 이용해서 상황에 따라 수정 / 삭제 모달을 구분하기 위해

 

//hasClass()는 클래스 이름에 매개값이 포함되어 있다면 true, 없으면 false.

if($(this).hasClass('replyModify')) {

//수정 버튼을 눌렀으므로 수정 모달 형식으로 변경.

$('.modal-title').html('댓글 수정');

$('#modalReply').css('display', 'inline');

$('#modalModBtn').css('display', 'inline');

$('#modalDelBtn').css('display', 'none'); //수정이므로 삭제버튼은 숨기자.

 

$('#replyModal').modal('show');

} else {

$('.modal-title').html('댓글 삭제');

$('#modalReply').css('display', 'none');

$('#modalModBtn').css('display', 'none');

$('#modalDelBtn').css('display', 'inline');

$('#replyModal').modal('show');

}

 

}); //수정 or 삭제 버튼 클릭 이벤트 처리 끝.

 

 

//수정 처리 함수 (수정 모달을 열어서 수정 내용을 작성 후 수정 버튼을 클릭했을 시)

$('#modalModBtn').click(function() {

 

const reply = $('#modalReply').val();

const rno = $('#modalRno').val();

const replyPw = $('#modalPw').val();

 

if(reply === '' || replyPw === '') {

alert('내용, 비밀번호를 확인하세요!');

return;

}

 

$.ajax({

type : "post",

url : "<c:url value='/reply/update' />",

contentType : 'application/json',

data : JSON.stringify({

'reply' : reply,

'rno' : rno,

'replyPw' : replyPw

}),

success : function(data) {

if(data === 'modSuccess') {

alert('정상 수정되었습니다.');

$('#modalReply').val('');

$('#modalPw').val('');

$('#replyModal').modal('hide');

getList(1, true);

} else {

alert('비밀번호를 확인하세요.');

$('#modalPw').val('');

}

},

error : function() {

alert('수정에 실패했습니다. 관리자에게 문의하세요.');

}

 

}); //end ajax(수정)

 

}); //수정 처리 이벤트 끝.

 

 

//삭제함수

$('#modalDelBtn').click(function() {

const rno = $('#modalRno').val();

const replyPw = $('#modalPw').val();

 

if(replyPw === '') {

alert('비밀번호를 확인하세요.');

return;

}

 

$.ajax({

type: 'post',

url: "<c:url value='/reply/delete' />",

data: JSON.stringify({

'rno' : rno,

'replyPw' : replyPw

}),

headers : {

'Content-type' : 'application/json'

},

success : function(data) {

if(data === 'delSuccess') {

alert('댓글이 삭제되었습니다.');

$('#modalPw').val(''); //비밀번호 초기화

$('#replyModal').modal('hide'); //모달 내리기

getList(1, true);

} else {

alert('비밀번호가 틀렸습니다.');

}

},

error : function() {

alert('삭제에 실패했습니다. 관리자에게 문의하세요.');

}

}); //삭제 비동기 통신 끝.

 

}); //삭제 이벤트 끝.

 

controller로 이동해서 명령을 작성합니다.

유저의 비밀번호가 일치해야 댓글을 수정할 수 있게!

 

@PostMapping("/update")

public String update(@RequestBody ReplyVO vo) {

//비밀번호 확인

int result = service.pwCheck(vo);

 

if(result == 1) { //비밀번호가 맞는 경우

service.update(vo);

return "modSuccess";

} else {

return "pwFail";

}

}

 

@PostMapping("/delete")

public String delete(@RequestBody ReplyVO vo) {

 

int result = service.pwCheck(vo);

 

if(result == 1) {

service.delete(vo.getRno());

return "delSuccess";

} else {

return "pwFail";

}

 

}

 

 

}

 

 

mapper 작성을 해 줍니다

<select id="pwCheck" resultType="int">

SELECT COUNT(*) FROM freereply

WHERE rno = #{rno} AND reply_pw = #{replyPw}

</select>

 

<update id="update">

UPDATE freereply

SET reply = #{reply}, update_date = sysdate

WHERE rno = #{rno}

</update>

 

<delete id="delete">

DELETE FROM freereply

WHERE rno = #{rno}

</delete>

 

service도 수정해 주면 댓글 완료!