[76일] Spring (24) - MyBatis 프로젝트 (댓글 게시판)

본문과 댓글은 다른 테이블이지만 동일한 글 번호를 가지고 있어야 한다.

 

test에는 로그인했을 때의 session 변수를 가져와 보여주면 된다.

 

---

 

참고

04_스프링부트 MyBatis Framework기반 댓글게시판_pcomment.pdf

0.58MB

 

 

테이블 생성

-- 상품 댓글 테이블
create table pcomment (
	 cno 		  number           primary key      --댓글번호
	,pno 		  number  		   not null         --부모글 번호
	,content  	  varchar2(255)    not null         --댓글내용
	,wname        varchar(100)     not null         --작성자
	,regdate      date             default sysdate  --작성일
);

-- 댓글 시퀀스
create sequence pcomment_seq;


commit;

 

 

클래스 생성

 

CommentDTO.java

package kr.co.itwill.comment;

public class CommentDTO {

	private int cno;
	private int pno;
	private String content;
	private String wname;
	private String regdate;
	
	public CommentDTO() {}

	public int getCno() {
		return cno;
	}

	public void setCno(int cno) {
		this.cno = cno;
	}

	public int getPno() {
		return pno;
	}

	public void setPno(int pno) {
		this.pno = pno;
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}

	public String getWname() {
		return wname;
	}

	public void setWname(String wname) {
		this.wname = wname;
	}

	public String getRegdate() {
		return regdate;
	}

	public void setRegdate(String regdate) {
		this.regdate = regdate;
	}

	@Override
	public String toString() {
		return "CommentDTO [cno=" + cno + ", pno=" + pno + ", content=" + content + ", wname=" + wname + ", regdate="
				+ regdate + "]";
	}
	
	
}//class end

 

 

CommentCont.java

package kr.co.itwill.comment;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/comment")
public class CommentCont {

	public CommentCont() {
		System.out.println("-----CommentCont() 객체 생성됨");
	}
	
	@Autowired
	CommentDAO commentDao;
	
}//class end

 

 

 

 

CommentDAO.java

package kr.co.itwill.comment;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

@Repository
public class CommentDAO {

	public CommentDAO() {
		System.out.println("-----CommentDAO() 객체 생성됨");
	}
	
	@Autowired
	SqlSession sqlSession;
	
}//class end

 

 

comment.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="comment">

</mapper>

 

 

 

이제 댓글이 출력되도록 해야 하는데 detail.jsp에 바로 작성해도 되고 아래와 같이 따로 페이지를 만들어서 해도 된다.

 

 

댓글 추가

detail.jsp

	<!-- 댓글 -->
	<div class="container">
		<label for="content">댓글</label>
		<form name="commentInsertForm" id="commentInsertForm">
		<div>
			<input type="hidden" name="pno" id="pno" value="${product.PRODUCT_CODE}"><!-- 부모글번호 -->
			<input type="text" name="content" id="content" placeholder="내용을 입력해 주세요">
			<button type="button" name="commentInsertBtn" id="commentInsertBtn">등록</button>
		</div>
		</form>
	</div>
	<hr>
	<div class="container">
		<div class="commentList"></div>
	</div>
	
</body>
</html>

	<!-- 댓글 관련 자바스크립트 -->
	<script>
		let pno = '${product.PRODUCT_CODE}'; //부모글번호
	
		//댓글 등록버튼 클릭했을때
		$("#commentInsertBtn").click(function(){
			//<form id="commentInsertForm">의 내용을 전부 가져옴
			let insertData = $("#commentInsertForm").serialize();
			//alert(insertData); //pno=8&content=aaa
			commentInsert(insertData);//댓글 등록 함수 호출
		});//click() end
        </script>

 

 

 

	<!-- 댓글 관련 자바스크립트 -->
	<script>
		let pno = '${product.PRODUCT_CODE}'; //부모글번호
	
		//댓글 등록버튼 클릭했을때
		$("#commentInsertBtn").click(function(){
			//<form id="commentInsertForm">의 내용을 전부 가져옴
			let insertData = $("#commentInsertForm").serialize();
			//alert(insertData); //pno=8&content=aaa
			commentInsert(insertData);//댓글 등록 함수 호출
		});//click() end
		
		function commentInsert(insertData) {
			//alert("댓글등록함수호출" + insertData);
			$.ajax({
					 url :'/comment/insert'
					,type:'post'
					,data:insertData
					,success:function(data){
						alert(data);
					}//success end
			});//ajax() end
		}//commentInsert() end
		
	</script>

 

 

CommentCont.java

	@RequestMapping("/insert")
	@ResponseBody
	private int mCommentServiceInsert(@RequestParam int pno, @RequestParam String content) throws Exception {
		CommentDTO comment = new CommentDTO();
		comment.setPno(pno);
		comment.setContent(content);
		//로그인 기능을 구현했거나 따로 댓글 작성자를 입력받는 폼이 있다면 입력 받아온 값으로 사용하면 된다. session.getAttribute()
		//따로 폼을 구현하지 않았기 때문에 임시로 "test"
		comment.setWname("test");
		return commentDao.commentInsert(comment);
	}//mCommentServiceInsert() end

 

 

 

CommentDAO.java

	public int commentInsert(CommentDTO comment) {
		return sqlSession.insert("comment.insert", comment);
	}//commentInsert() end

 

 

 

comment.xml

<mapper namespace="comment">

	<insert id="insert" parameterType="kr.co.itwill.comment.CommentDTO">
		INSERT INTO pcomment(cno, pno, content, wname)
		VALUES (pcomment_seq.nextval, #{pno}, #{content}, #{wname})
	</insert>
	
</mapper>

 

 

댓글 목록

detail.jsp

		function commentInsert(insertData) {
			//alert("댓글등록함수호출" + insertData);
			$.ajax({
					 url :'/comment/insert'
					,type:'post'
					,data:insertData
					,success:function(data){
						//alert(data);
						if(data==1){ //댓글 등록 성공
							commentList();         //댓글 작성 후 댓글 목록 함수 호출
							$('#content').val(''); //기존 댓글 내용을 빈값으로
						}//if end
					}//success end
			});//ajax() end
		}//commentInsert() end
		
		
		//댓글 목록
		function commentList() {
			$.ajax({
					 url:'/comment/list'
					,type:'get'
					,data:{'pno':pno}     //부모글번호
					,success:function(data){
						alert(data);
					}//success end
			});
		}//commentList() end
		
	</script>

 

 

CommentCont.java

	@RequestMapping("/list")
	@ResponseBody
	private List<CommentDTO> mCommentServiceList(@RequestParam int pno, Model model) throws Exception {
		return commentDao.commentlist(pno);
	}//mCommentServiceList() end

 

 

CommentDAO.java

	public List<CommentDTO> commentlist(int pno) {
		return sqlSession.selectList("comment.list", pno);
	}//commentlist() end

 

 

comment.xml

	<select id="list" resultType="kr.co.itwill.comment.CommentDTO" parameterType="int">
		SELECT cno, pno, content, wname, regdate
		FROM pcomment
		WHERE pno=#{pno}
	</select>

 

 

detail.jsp

		//댓글 목록
		function commentList() {
			$.ajax({
					 url:'/comment/list'
					,type:'get'
					,data:{'pno':pno}     //부모글번호
					,success:function(data){
						//alert(data);
						$.each(data, function(key, value){
							alert(key);   //순서 0 1 2
							alert(value); //[object object]
							alert(value.cno);
							alert(value.pno);
							alert(value.content);
							alert(value.wname);
							alert(value.regdate);
						});//each() end
					}//success end
			});
		}//commentList() end