22.06.20 댓글 기능 구현

댓글 구현

댓글 테이블 생성

-- 댓글
CREATE TABLE freereply(
    rno NUMBER(10, 0) PRIMARY KEY, -- 댓글번호(PK)
    bno NUMBER(10, 0), --글 번호(FK)
    reply VARCHAR2(1000), --내용
    reply_id VARCHAR2(50), --글쓴이
    reply_pw VARCHAR2(50), --비밀번호
    reply_date DATE DEFAULT sysdate, --등록일
    update_date DATE DEFAULT NULL
);

CREATE SEQUENCE freereply_seq
    START WITH 1
    INCREMENT BY 1
    MAXVALUE 1000
    NOCYCLE
    NOCACHE;

ReplyVO 생성

package com.spring.myweb.command;

@Getter
@Setter
@ToString
public class ReplyVO {
	
	private int rno;
	private int bno;
	
	private String reply;
	private String replyId;
	private String replyPw;
	private Timestamp replyDate;
	private Timestamp updateDate;
}

IReplyMapper 생성

package com.spring.myweb.reply.mapper;

public interface IReplyMapper {
		
	void replyRegist(ReplyVO vo);//댓글 등록	
	List<ReplyVO> getList(Map<String, Object> data);//목록 요청	
	int getTotal(int bno);//댓글 개수	
	
	int pwCheck(ReplyVO vo);//비밀번호 확인
	void update(ReplyVO vo);//댓글 수정
	void delete(int rno);//댓글 삭제	
}

ReplyMapper.xml 생성

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

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

</mapper>

IReplyService 생성

package com.spring.myweb.reply.service;

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);//댓글 삭제
}

ReplyService 생성

package com.spring.myweb.reply.service;
@Service
public class ReplyService implements IReplyService {
	
	@Autowired
	private IReplyMapper mapper;
	
	@Override
	public void replyRegist(PageVO vo, int bno) {
	}

	@Override
	public List<ReplyVO> getList(Map<String, Object> data) {
		return null;
	}

	@Override
	public int getTotal(int bno) {
		return 0;
	}

	@Override
	public int pwCheck(ReplyVO vo) {
		return 0;
	}

	@Override
	public void update(ReplyVO vo) {

	}

	@Override
	public void delete(int rno) {

	}
}

db-config.xml

IReplyMapper 위치 스캔할수 있도록 설정 추가.
Beans Graph 확인.

<mybatis-spring:scan
		base-package="com.spring.myweb.freeboard.mapper" />
<mybatis-spring:scan
		base-package="com.spring.myweb.reply.mapper" />

ReplyController 생성

비동기 방식으로 처리할 것이 때문에 @RestController로 생성.

package com.spring.myweb.controller;

@RestController
@RequestMapping("/reply")
public class ReplyController {
	
	@Autowired
	private IReplyService service;
}

댓글 작성

freeDetail.jsp

사용자가 댓글에 작성할 내용,아이디,비밀번호 input 태그에 id를 작성.

<!--form-control은 부트스트랩의 클래스입니다-->
<div class="reply-content">
	<textarea class="form-control" rows="3" id="reply"></textarea>
<div class="reply-group">
<div class="reply-input">
	<input type="text" class="form-control" id="replyId" placeholder="이름">
	<input type="password" class="form-control" id="replyPw" placeholder="비밀번호">
</div>

비동기 처리로 진행.
freeDetail.jsp에서 자바스크립트로 댓글 작성등록

<script>
	//수정 됐을때 메세지 띄우기
	const msg = '${msg}';
	if(msg != ''){
		alert(msg);
	}	

	$(document).ready(function() {
		
		$('#replyRegist').click(function() {
			
			/*
			댓글을 등록하려면 게시글 번호도 보내 주셔야 합니다.
			댓글 내용, 작성자, 댓글 비밀번호, 게시글 번호를 
			json 표기 방법으로 하나로 모아서 전달해 주시면 됩니다.
			비동기 통신으로 댓글 삽입을 처리해 주시고,
			console.log를 통해 '댓글 등록 완료!'를 확인하시고
			실제 DB에 댓글이 추가되는지도 확인해 주세요.
			전송방식: POST, url: /reply/replyRegist
			*/
			
			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
					}),
				dateType: 'text', //서버로부터 어떤 형식으로 받을지(text는 생략 가능)
				contentType: 'application/json',
				success: function(data) {
					console.log('댓글 등록 완료!' + data);
                    //다음등록을 위해 값을 비워준다.
					$('#reply').val('');
					$('#replyId').val('');
					$('#replyPw').val('');
					//등록 완료 후 댓글 목록 함수를 호출해서 비동기식으로 목록 표현.
				},
				error: function() {
					alert('등록에 실패했습니다. 관리자에게 문의하세요!');
				}			
				
			}); //end ajax 댓글 등록 비동기 통신 끝.
			
		}); //댓글 등록 이벤트 끝.
	});//end jQuery
</script>

ReplyController("/replyRegist")

freeDetail.jsp에서 /reply/replyRegist요청.
비동기 방식이기 때문에 @RequestBody이용해서 객체 받아옴.

//댓글 등록
@PostMapping("/replyRegist")
public String replyRegist(@RequestBody ReplyVO vo) {
	System.out.println("댓글 등록 요청이 들어옴!");
	service.replyRegist(vo);
	return "regSuccess";
}

ReplyService

@Override
public void replyRegist(ReplyVO vo) {
	mapper.replyRegist(vo);
}

ReplyMapper.xml

<insert id="replyRegist">
	INSERT INTO freereply
	(rno, bno, reply, reply_id, reply_pw)
	VALUES(freereply_seq.NEXTVAL,#{bno},#{reply},#{replyId},#{replyPw})
</insert>