12_spring_(ajax사용한 댓글)

1. 댓글 등록

Vo

package com.kh.spring.board.model.vo;

import java.sql.Timestamp;

public class Reply {
	private int replyNo;
	private String replyContent;
	private Timestamp replyModifyDate;
	private int boardNo;
	private int memberNo; // insert, update, delete, select용 
	private String memberId; // select용
	
	public Reply() { }

	public Reply(int replyNo, String replyContent, Timestamp replyModifyDate, int boardNo, int memberNo,
			String memberId) {
		super();
		this.replyNo = replyNo;
		this.replyContent = replyContent;
		this.replyModifyDate = replyModifyDate;
		this.boardNo = boardNo;
		this.memberNo = memberNo;
		this.memberId = memberId;
	}

	public int getReplyNo() {
		return replyNo;
	}

	public void setReplyNo(int replyNo) {
		this.replyNo = replyNo;
	}

	public String getReplyContent() {
		return replyContent;
	}

	public void setReplyContent(String replyContent) {
		this.replyContent = replyContent;
	}

	public Timestamp getReplyModifyDate() {
		return replyModifyDate;
	}

	public void setReplyModifyDate(Timestamp replyModifyDate) {
		this.replyModifyDate = replyModifyDate;
	}

	public int getBoardNo() {
		return boardNo;
	}

	public void setBoardNo(int boardNo) {
		this.boardNo = boardNo;
	}

	public int getMemberNo() {
		return memberNo;
	}

	public void setMemberNo(int memberNo) {
		this.memberNo = memberNo;
	}

	public String getMemberId() {
		return memberId;
	}

	public void setMemberId(String memberId) {
		this.memberId = memberId;
	}


	@Override
	public String toString() {
		return "Reply [replyNo=" + replyNo + ", replyContent=" + replyContent + ", replyModifyDate=" + replyModifyDate
				+ ", boardNo=" + boardNo + ", memberNo=" + memberNo + ", memberId=" + memberId + "]";
	}
}

Jsp

<script>
	$("#addReply#).on("click", function(){
    	var memberNo; // 회원 번호
        var boardNo = "${board.boardNo}"; // 글번호
        var replyContent = $("#replyContent").val(); // 댓글내용
        
        // 로그인 여부 검사
        if(${loginMember == null}) {
        	alert("로그인 후 이용해 주세요.");
        } else {
        	// Session에서 회원 번호를 얻어옴.
            // ""를 하지 않으면 변수명 처럼 인식됨
            memberNo = "${loginMember.memberNo}";
            // 자바 스크립트 객체 방식으로 작성
            
            $.ajax({
            	url : "insertReply",
                type : "POST",
                data : {"replyContent" : replyContent,
                		"boardNo" : boardNo,
                        "memberNo" : memberNo},
                success : function(result){
                	var msg;
                    
                    switch(result) {
                    case 1 :  //성공
                    	msg = "댓글 등록 성공";
                        // 내용을 작성한 textarea를 다 지워줌
                        $("#replyContent").val("");
                        selectRlist(); // selectRlist()함수 호출
                        break;
                        
                    case 0 :  //등록실패
                    	msg = "댓글 등록 실패";
                        break;
                    case -1 :
                    	msg = "댓글 등록 오류 발생";
                        break;
                    }
                    
                    alert(msg);
                },
                error : function(){
                	console.log("ajax 통신 실패");
                }
            });
        }
    });
    
    // 댓글 목록 조회 함수
    function selectRlist() {
    	var boardNo = "${board.boardNo}";
        
        $.ajax({
        	url : "selectReplyList",
            type : "POST"
            data : {"boardNo" : boardNo},
            dataType : "json", // javascriptObjectNation
            success : function(rList){
            	
                // $붙으면 이 변수를 대상으로 jquery 메소드를 사용가능
                // 없으면 그냥 변수임
                var $rArea = $("#replyListArea");
                // jQuery 변수 : 변수에 jQuery 메소드를 사용할 수 있음
                
                // console.log(rList);
                
                // javascript는 isEmpty가 없음
                // javascript 빈리스트 확인은 rList = []
                // 하지만 json은 string이므로 ""(빈문자열)로 비교
                if(rList == "") { // 조회할 댓글이 없는 경우
                	$rArea.html("<li>등록된 댓글이 없습니다</li>");
                } else {
                	$rArea.html(""); // 기존 댓글 목록 삭제
                    
                    $.each(rList : function(i){
                    	var $li = $("<li>");
                        var $rWriter = $("<span>").prop(
                        	"class","rWriter").html(rList[i].memberId);
                        // <span class="rWriter">admin</span>
                        var $rDate = $("<span>").prop(
                        	"class","wDate").html(rList[i].memberModifyDate);
                        var $rContent = $("<p>").prop("class","replyContent")
                        	.html(rList[i].replyContent)
                        var $hr = $("<hr>");
                        
                        // 메소드 체이닝
                        $li.append($rWriter).append($rDate).append("$rContent");
                        
                        $rArea.append($li).append($hr);
                    });
                }
            },
            error : function(){
            	console.log("댓글 목록 조회 ajax 통신 실패");
            }
        });
    }
    
  	$(function(){
    	selectRlist();
        
        // 10초마다 댓글 갱신
        setInterval(function(){
        	selectRlist
        }, 10000);
    });
</script>
                
                
                    
            

Controller

// 댓글 등록
// 그냥 result 하면 -1, 0, 1값이 전달되므로 페이지 이동이 아니라
// 불러온값을 response에 담기 위해 ResponseBody 어노테이션 작성
@ResponseBody
@RequestMapping("insertReply")
public int insertReply(Reply reply) {
	int result = 0;
    try {
    	result = boardService.insertReply(reply);
    } catch (Exception e) {
    	e.printStackTrace();
        result = -1;
    }
    return result;
}

// 댓글 목록 조회
// JSON : 자바스크립트 객체 모양의 String
// ajax에서는 filter에서 문자열을 잡아주지 못함
// produces : 조건에 지정한 미디어 타입과 관련된 응답을 생성하는데 사용한 실제 컨텐츠 타입을 보장한다
// --> 응답 데이터의 Content-Type 지정가능
// text/html; charset=utf-8
@ResponseBody
@RequestMapping(value="selectReplyList",
				produces="application/json; charset=utf-8)
public String selectReplyList(int boardNo){

	// ajax에서 에러를 처리해줌으로
    // try catch를 안해줘도됨(다른방법도 있음)
    List<Reply> rList = boardService.selectReplyList(boardNo);
    
    // JSON으로 담아도 되지만 편한 방법인 GSON으로 사용
    
    // yyyy-MM-dd hh:mm:ss
    Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd hh:mm:ss").create();
    
    return gson.toJson(rList);
}
    

ServiceImpl

	/** 게시글 댓글 등록용 Service
	 * @param reply 
	 * @return result
	 * @throws Exception
	 */
	@Transactional(rollbackFor = Exception.class)
	@Override
	public int insertReply(Reply reply) throws Exception {
		// <form>태그 안에 <textarea>는 \r\n으로 인식되고
		// form태그 안에 있찌않으면 \n 으로 인식됨
		reply.setReplyContent(reply.getReplyContent().replace("\n", "<br>"));
		return boardDAO.insertReply(reply);
	}
    
    /** 게시글 댓글 목록 조회용 Service
	 * @param boardNo
	 * @return rList
	 */
	@Override
	public List<Reply> selectReplyList(int boardNo) {
		return boardDAO.selectReplyList(boardNo);
	}

DAO

	/** 게시글 댓글 등록용 DAO
	 * @param reply
	 * @return result
	 * @throws Exception
	 */
	public int insertReply(Reply reply) throws Exception {
		return sqlSession.insert("boardMapper.insertReply", reply);
	}


	
	/** 게시글 댓글 목록 조회용 DAO
	 * @param boardNo
	 * @return rList
	 */
	public List<Reply> selectReplyList(int boardNo) {
		return sqlSession.selectList("boardMapper.selectReplyList", boardNo);
	}

Mapper

	<!-- 댓글 등록 -->
	<insert id="insertReply" parameterType="Reply">
		INSERT INTO REPLY VALUES(
			SEQ_RNO.NEXTVAL, #{replyContent}, DEFAULT,
			DEFAULT, DEFAULT, #{boardNo}, #{memberNo}
		)		
	</insert>
	
	<!-- 댓글 목록 조회 -->
	<select id="selectReplyList" parameterType="_int"
	resultMap="replyResultSet">
		SELECT * FROM V_REPLY 
		WHERE BOARD_NO = #{boardNo}
		ORDER BY REPLY_NO DESC
	</select>