오늘의 삽질_ 댓글달기

댓글 springboot 프로젝트를 혼자 해보고 있다. 

맞는건지 모르겠지만 (?) 기록용으로 남겨봄. 

 

JPA가 붙어있는곳에 controller 하나더 만들어서 - mybatis를 붙였고! 

댓글을 달아보려고하는데 

웃대처럼 그냥 depth = 1 - 기본 댓글 / depth =2 - 대댓글 까지만 달도록 해봤다. 

 

간단하게 할거니깐.. 댓글 테이블은 하나로 다 조진다..  :) 

 

CREATE TABLE `test`.`comment_tb` (
  `conum` INT NOT NULL auto_increment,
  `writer` VARCHAR(45) NOT NULL,
  `parent` INT NULL,
  `commentdate` DATETIME NULL DEFAULT CURRENT_TIMESTAMP,
  `depth` INT NULL,
  `comment` VARCHAR(100) NULL,
  `secret` VARCHAR(45) NOT NULL DEFAULT 'N',
  `depth2` INT NULL,
  PRIMARY KEY (`conum`),
  INDEX `parent_idx` (`parent` ASC) VISIBLE,
  CONSTRAINT `parent`
    FOREIGN KEY (`parent`)
    REFERENCES `test`.`alien` (`aid`)
    ON DELETE CASCADE
    ON UPDATE NO ACTION);

 

 

잘하는 친구는 primary key가 왜 필요하냐고 재귀쿼리로 하면 된다고하였지만 

나는 재귀쿼리 아직 모르겠다.! 

 

- conum : pk 임. 그냥 숫자로 auto increment했다. 

- parent : 게시글 번호 -> 게시글에 맞는 댓글만 가져와야되니까  - FK 로 지정했다. 게시판테이블 pk와 

- depth : 1번과 2번이 있다.  (1번은 댓글 , 2번은 대댓글) 

- secret : 비밀글 해보고싶어서 만듬 

- depth2 : 만들어놓고 뭐해야하나 싶었으나.. 그냥 conum을 넣었다. 그러니깐 정렬이 아주 잘된다. 단순한게 짱 ㅋㅋ

 

---

 

댓글을 쓰자! 

- showAlien.jsp

그냥 하나 만들었다. 입력칸, 모든 댓글은 다 여기서 작성한다. 

댓글이 많아지면 몹시 몹시 안좋은 구성이지만 일단 만든다.  

추가로 엄청 수정해야한다!!  아이디 구분, 비밀글 처리, 기타등등 

 

<!-- 댓글 등록하기    -->
<div class="row" style="padding-top:100px;">
	<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
		<h4>Leave a Coment:</h4> 
				
		<div id="depth2" style="margin-top:10px; margin-bottom:10px;"> ★ 이 글에 댓글달기!★
			<table>
				<tr>
					<td id="co_num"></td>  
					<td id="co_writer"></td>
					<td id="co_comment"></td>
					<td id="co_date"></td> 
				</tr>
			</table>
		</div>
				
		<form name="comentView" id="comentView" method="post" action="javascript:comment_submit();">
			<input type="text" name="comment" placeholder="댓글을 입력하세요!" style="width:60%;">
			<input type="hidden" name="parent" value="${alien.aid}" />
			<input type="hidden" name="writer" value="지나가는행인" /> 
			<!--아이디별 작성자 구분 필요 ★-->
					
			<!-- depth -- default 값은 1인데, 위에 댓글이 정해지면 depth2로 변경되고 , depth2는 co_num으로 들어간다. -->
			<input type="hidden" id="depth" name="depth" value="1" />					
			<input type="hidden" id="pe_depth" name="pe_depth" value="0"/>

			<span> 비밀글
				<input type="radio" name="secret" value="N" checked>N
				<input type="radio" name="secret" value="Y">Y
			</span>
			<button type="submit" class="btns mid bgNavy"> 등록하기  </button>
		</form>
	</div>
</div>

 

 

 

대략 요런모냥 ㅎ.ㅎ class다 어디갔쥐 ㅋㅋ 

 

 

댓글 추가는 

jpa로 했다가.. 자동으로 증가하는 conum값을 -> depth2에 넣기위해서 mybatis로 처리했다.

 

 

-AlienServiceImpl.java

 

// 코멘트 추가하기
@Transactional  // 작동하는걸까..?ㅎ
@Override
public int addComment(CommentVO comment) throws Exception{
	//CommentVO comment2 = commentRepo.save(comment);
	//System.out.println("저장된 정보 찍어보기!!" + comment2);
	int gg = 0;
	if(comment.getDepth2() != 0) {  // 대댓글일때 dpeht=2
		gg = alienMapper.makeReComment(comment);
	}else {
		gg = alienMapper.makeComment(comment); // 첫댓글 depth=1
	}
	return gg;
}

 

리턴값을 굳이 찍어보겠다고ㅋㅋ

 

 

-alien-mapper.xml

 

<!-- comment 새로 만들때 _ conum을 depth2에 넣는다./keyProperty 이거 parameterType- CommetVO에 있는거여야함 -->
<!-- commentdate 지금 일단 지웠음! default값으로 넣어보려고 -->
<insert id="makeComment" parameterType="com.ahjin.demo.model.CommentVO">
	<selectKey keyProperty="depth2" resultType="Integer" order="BEFORE">
   		SELECT IFNULL(MAX(conum),0)+1 FROM comment_tb
	</selectKey>
	insert into comment_tb (writer, parent, depth, depth2, secret, comment) 
		values(#{writer},#{parent},#{depth},#{depth2},#{secret},#{comment})
</insert>

<!-- 대댓글일때 -->
<insert id="makeReComment" parameterType="com.ahjin.demo.model.CommentVO">
	insert into comment_tb (writer, parent, depth, depth2, secret, comment) 
		values(#{writer},#{parent},#{depth},#{depth2},#{secret},#{comment})
</insert>

 

 

똑같은게 왜 두개일까

하나는 자동으로 생성된 번호를 depth2에 넣어주기 위해서다!

selectKey위에<if test="">구문이 먹지가 않았다. 왜지? ㅎㅎㅎㅎㅎㅎ

멋대로 만들었더니 insert를 두개나 만들어야하다니.. 

초벌이니깐, 다음엔 제대로 구상해서 이쁘게 만들어야지!

 

 

 

---

이제 만든 댓글 가져오자.

 

 

-alien-mapper.xml

 

<!-- COMMENT 리스트 뽑아오기 by parent -->
<select id="selectFindParentDesc" parameterType="Integer" resultType="Map">
	select a.conum, a.writer, a.parent, a.commentdate, a.comment, a.secret, a.depth, a.depth2 
		from comment_tb a , comment_tb b 
	where a.conum = b.conum  and  a.parent= #{parent}
 		order by a.depth2, a.depth, a.commentdate desc
</select>

 

이후 서비스impl -> 서비스 -> 컨트롤러 -> 앞으로 나오겠습니다. 

 

게시판 상세보기 페이지 (showAlien.jsp) 에서 commentList를 ajax로 불렀다!

다른페이지에서 한것 처럼 javascript로 할랬는데 똑같은거 해도 안되서 ㅡ.,ㅡ 

일단 jQuery로 처리함. 하하핳 

자질구레한 주석은 더럽지만 추가로 공부하기 위해 남겨두자. 

 

/* window.addEventListener('DOMContentLoaded', function(){

	alert("로드도미??");
	$.ajax({
		alert("정상적으로 로드됨?-코멘트작업중");
		type:"post",
		url:"/ajaxCommentList",
		success : function(data){
			$('div#commentBody').html(data);
		},
		error :  function(request,status,error) {
        }
	});
}) */
// 위에껀 왜 안됨?ㅠㅠㅠㅠ;;;  아래 jquery는 된다. ㅜ.ㅜ 왜죠?


$(document).ready(function(){

	$("#depth2").hide();  // comment_depth2 숨겨두기

	var aid = $("#aid").val(); // jquery는 val() 
	alert("넘어온 값 확인! " + aid);
	var alldata = {"aid" : aid}; // 배열로 넘긴다. 값이 한개인데 이렇게 꼭 넘겨야하나?^^;
	
	$.ajax({
		type:"post",
		data: alldata,
		url:"/ajaxCommentList",
		success : function(data){
			$('div#commentBody').html(data);
		},
		error :  function(request,status,error) {
        }
	});
}); 

 

 

- ajaxCommentList.jsp  (미완성)

일단 depth 1,2번 색 차이를 주려고 if로 나누었다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>


<!-- 댓글 게시판  1. 댓글 있느냐 없느냐, 2.비밀글이냐 아니냐 -->
<div>
	<c:if test="${empty comments}">
		<div>
			<h2>등록된 comments가 없습니다!</h2>				
		</div>
	</c:if>
	
	<c:if test="${not empty comments}">
		<table>
			<c:forEach var="row" items="${comments}">
				<c:if test="${row.depth == 1}">
					<tr>
						<td>확인차: ${row.conum}</td>  
						<td>${row.writer}</td>
						<td>${row.comment}</td>
						<td>날짜 :: ${row.commentdate}</td>
						<td id="depth_color">${row.depth} :: ${row.depth2}</td>
						<td><input type="button" value="답글 re::" 
						onclick="javascript:rere('${row.conum}','${row.writer}','${row.comment}','${row.commentdate}');"></td>
					</tr>
				</c:if>
				<c:if test="${row.depth == 2}">
					<tr style="background-color:pink;">
						<td>--></td>
						<td>확인차: ${row.conum}</td>  
						<td>${row.writer}</td>
						<td>${row.comment}</td>
						<td>날짜 :: ${row.commentdate}</td>
						<td id="depth_color">${row.depth} :: ${row.depth2}</td>
					</tr>
				</c:if>
			</c:forEach>
		</table>
	</c:if>
</div>


<!-- 댓글안에다가도 댓글 추가로 등록/삭제 기능이 있어야 한다!  -->

 

개판이지만 

일단 여기까지 완성!