스프링부트(SpringBoot) 게시판 만들기14 - 댓글 기능 구현(ajax)

댓글 기능 구현

게시판에서 댓글기능이 빠질수는 없겠죠~ 댓글을 작성할때마다 페이지 이동이 되지 않고, 댓글 목록만 바로바로 바뀔 수 있도록 ajax를 사용해서 비동기 방식으로 구현해보겠습니다.

1. 댓글용 테이블 생성

create table comment(
  cno int not null auto_increment primary key, //댓글 seq
  bno int not null,    //댓글이 달릴 게시글 seq
  content text not null, //댓글 내용
  writer varchar(20) not null, //댓글 작성자
  reg_date datetime not null); // 댓글 작성 시간

2. com.example.demo.board.domain에 commentVO 생성 후 작성

package com.example.demo.board.domain;
 
import java.util.Date;
 
public class CommentVO {
 
    private int cno;
    private int bno;
    private String content;
    private String writer;
    private Date reg_date;
 
    public int getCno() {
        return cno;
    }
 
    public void setCno(int cno) {
        this.cno = cno;
    }
 
    public int getBno() {
        return bno;
    }
 
    public void setBno(int bno) {
        this.bno = bno;
    }
 
    public String getContent() {
        return content;
    }
 
    public void setContent(String content) {
        this.content = content;
    }
 
    public String getWriter() {
        return writer;
    }
 
    public void setWriter(String writer) {
        this.writer = writer;
    }
 
    public Date getReg_date() {
        return reg_date;
    }
 
    public void setReg_date(Date reg_date) {
        this.reg_date = reg_date;
    }
 
}
 

3. com.example.demo.board.mapper 에 CommentMapper.java, CommentMapper.xml 생성 후 작성

CommentMapper.java

package com.example.demo.board.mapper;
 
import java.util.List;
 
import org.springframework.stereotype.Repository;
 
import com.example.demo.board.domain.CommentVO;
 
@Repository("com.example.demo.comment.mapper.CommentMapper")
public interface CommentMapper {
    // 댓글 개수
    public int commentCount() throws Exception;
 
    // 댓글 목록
    public List<CommentVO> commentList() throws Exception;
 
    // 댓글 작성
    public int commentInsert(CommentVO comment) throws Exception;
    
    // 댓글 수정
    public int commentUpdate(CommentVO comment) throws Exception;
 
    // 댓글 삭제
    public int commentDelete(int cno) throws Exception;
 
}
 
 

CommentMapper.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.example.demo.board.mapper.CommentMapper">
 
    <select id="commentCount" resultType="int">
        SELECT
            COUNT(*)
        FROM COMMENT
    </select>
    
    <select id="commentList" resultType="com.example.demo.board.domain.CommentVO">
        SELECT
            *
        FROM COMMENT
    </select>
    
    
    <insert id="commentInsert" parameterType="com.example.demo.board.domain.CommentVO">
        INSERT INTO
        COMMENT (CNO, BNO, CONTENT, WRITER, REG_DATE)
        VALUES(#{cno},#{bno},#{content},#{writer},now()) 
    </insert>
    
    <update id="commentUpdate" parameterType="com.example.demo.board.domain.CommentVO">
        UPDATE COMMENT
            SET
            CONTENT = #{content}
        WHERE CNO = #{cno}
    </update>
    
    <delete id="commentDelete" parameterType="int">
        DELETE FROM COMMENT WHERE CNO = #{cno}
    </delete>
</mapper>
 

4. com.example.demo.board.controller 에 CommentController.java 생성 후 작성

package com.example.demo.board.controller;
 
import java.util.List;
 
import javax.annotation.Resource;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
 
import com.example.demo.board.domain.CommentVO;
import com.example.demo.board.service.CommentService;
 
@Controller
@RequestMapping("/comment")
public class CommentController {
 
    @Resource(name="com.example.demo.board.service.CommentService")
    CommentService mCommentService;
    
    
    @RequestMapping("/list") //댓글 리스트
    @ResponseBody
    private List<CommentVO> mCommentServiceList(Model model) throws Exception{
        
        return mCommentService.commentListService();
    }
    
    @RequestMapping("/insert") //댓글 작성 
    @ResponseBody
    private int mCommentServiceInsert(@RequestParam int bno, @RequestParam String content) throws Exception{
        
        CommentVO comment = new CommentVO();
        comment.setBno(bno);
        comment.setContent(content);
        //로그인 기능을 구현했거나 따로 댓글 작성자를 입력받는 폼이 있다면 입력 받아온 값으로 사용하면 됩니다. 저는 따로 폼을 구현하지 않았기때문에 임시로 "test"라는 값을 입력해놨습니다.
        comment.setWriter("test");  
        
        return mCommentService.commentInsertService(comment);
    }
    
    @RequestMapping("/update") //댓글 수정  
    @ResponseBody
    private int mCommentServiceUpdateProc(@RequestParam int cno, @RequestParam String content) throws Exception{
        
        CommentVO comment = new CommentVO();
        comment.setCno(cno);
        comment.setContent(content);
        
        return mCommentService.commentUpdateService(comment);
    }
    
    @RequestMapping("/delete/{cno}") //댓글 삭제  
    @ResponseBody
    private int mCommentServiceDelete(@PathVariable int cno) throws Exception{
        
        return mCommentService.commentDeleteService(cno);
    }
    
}
 

5. com.example.demo.board.service 에 CommentService.java 생성 후 작성

package com.example.demo.board.service;
 
import java.util.List;
 
import javax.annotation.Resource;
 
import org.springframework.stereotype.Service;
 
import com.example.demo.board.domain.CommentVO;
import com.example.demo.board.mapper.CommentMapper;
 
@Service("com.example.demo.board.service.CommentService")
public class CommentService {
 
    @Resource(name="com.example.demo.board.mapper.CommentMapper")
    CommentMapper mCommentMapper;
    
    public List<CommentVO> commentListService() throws Exception{
        
        return mCommentMapper.commentList();
    }
    
    public int commentInsertService(CommentVO comment) throws Exception{
        
        return mCommentMapper.commentInsert(comment);
    }
    
    public int commentUpdateService(CommentVO comment) throws Exception{
        
        return mCommentMapper.commentUpdate(comment);
    }
    
    public int commentDeleteService(int cno) throws Exception{
        
        return mCommentMapper.commentDelete(cno);
    }
}
 

6. webapp - WEB-INF - views 에 commentS.jsp 생성 후 detail.jsp 수정

<%@ 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"%>
<%@ taglib prefix="layoutTag" tagdir="/WEB-INF/tags"%>
<layoutTag:layout>
 
<div class="container">
    <div class="col-xs-12" style="margin:15px auto;">
        <label style="font-size:20px;"><span class="glyphicon glyphicon-list-alt"></span>게시글 상세</label>
    </div>
 
    <div class="col-xs-12">
        <form action="/insertProc" method="post">
            <dl class="dl-horizontal">
              <dt>제목</dt>
              <dd>${detail.subject}</dd>
              
              <dt>작성자</dt>
              <dd>${detail.writer}</dd>
              
              <dt>작성날짜</dt>
              <dd>
                  <fmt:formatDate value="${detail.reg_date}" pattern="yyyy.MM.dd HH:mm:ss"/>
              </dd>
              
              <dt>첨부파일</dt>
              <dd><a href="/fileDown/${files.bno}">${files.fileOriName}</a></dd>
              
              <dt>내용</dt>
              <dd>${detail.content}</dd>
            </dl>
        </form>
        <div class="btn-group btn-group-sm" role="group" style="float:right;">
          <button type="button" class="btn btn-default" onclick="location.href='/delete/${detail.bno}'">삭제</button>
          <button type="button" class="btn btn-default" onclick="location.href='/update/${detail.bno}'">수정</button>
          <button type="button" class="btn btn-default" onclick="location.href='/list'"> 목록 </button>
        </div>
    </div>
    
    <!--                     추가                         -->
    <!--  댓글  -->
    <div class="container">
        <label for="content">comment</label>
        <form name="commentInsertForm">
            <div class="input-group">
               <input type="hidden" name="bno" value="${detail.bno}"/>
               <input type="text" class="form-control" id="content" name="content" placeholder="내용을 입력하세요.">
               <span class="input-group-btn">
                    <button class="btn btn-default" type="button" name="commentInsertBtn">등록</button>
               </span>
              </div>
        </form>
    </div>
    
    <div class="container">
        <div class="commentList"></div>
    </div>
</div>
 
<!--                     추가                         -->
<%@ include file="commentS.jsp" %>
</layoutTag:layout>

7. commentS.jsp 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<script>
var bno = '${detail.bno}'; //게시글 번호
 
$('[name=commentInsertBtn]').click(function(){ //댓글 등록 버튼 클릭시 
    var insertData = $('[name=commentInsertForm]').serialize(); //commentInsertForm의 내용을 가져옴
    commentInsert(insertData); //Insert 함수호출(아래)
});
 
 
 
//댓글 목록 
function commentList(){
    $.ajax({
        url : '/comment/list',
        type : 'get',
        data : {'bno':bno},
        success : function(data){
            var a =''; 
            $.each(data, function(key, value){ 
                a += '<div class="commentArea" style="border-bottom:1px solid darkgray; margin-bottom: 15px;">';
                a += '<div class="commentInfo'+value.cno+'">'+'댓글번호 : '+value.cno+' / 작성자 : '+value.writer;
                a += '<a onclick="commentUpdate('+value.cno+',\''+value.content+'\');"> 수정 </a>';
                a += '<a onclick="commentDelete('+value.cno+');"> 삭제 </a> </div>';
                a += '<div class="commentContent'+value.cno+'"> <p> 내용 : '+value.content +'</p>';
                a += '</div></div>';
            });
            
            $(".commentList").html(a);
        }
    });
}
 
//댓글 등록
function commentInsert(insertData){
    $.ajax({
        url : '/comment/insert',
        type : 'post',
        data : insertData,
        success : function(data){
            if(data == 1) {
                commentList(); //댓글 작성 후 댓글 목록 reload
                $('[name=content]').val('');
            }
        }
    });
}
 
//댓글 수정 - 댓글 내용 출력을 input 폼으로 변경 
function commentUpdate(cno, content){
    var a ='';
    
    a += '<div class="input-group">';
    a += '<input type="text" class="form-control" name="content_'+cno+'" value="'+content+'"/>';
    a += '<span class="input-group-btn"><button class="btn btn-default" type="button" onclick="commentUpdateProc('+cno+');">수정</button> </span>';
    a += '</div>';
    
    $('.commentContent'+cno).html(a);
    
}
 
//댓글 수정
function commentUpdateProc(cno){
    var updateContent = $('[name=content_'+cno+']').val();
    
    $.ajax({
        url : '/comment/update',
        type : 'post',
        data : {'content' : updateContent, 'cno' : cno},
        success : function(data){
            if(data == 1) commentList(bno); //댓글 수정후 목록 출력 
        }
    });
}
 
//댓글 삭제 
function commentDelete(cno){
    $.ajax({
        url : '/comment/delete/'+cno,
        type : 'post',
        success : function(data){
            if(data == 1) commentList(bno); //댓글 삭제후 목록 출력 
        }
    });
}
 
 
 
 
$(document).ready(function(){
    commentList(); //페이지 로딩시 댓글 목록 출력 
});
 
 
 
</script>

8. 프로젝트 재실행후 확인~

**

댓글 작성, 수정, 삭제 시에 페이지 전환없이 바로바로 데이터만 변경되어 보여지니 훨씬 깔끔하고 좋네요~! 댓글뿐만 아니라 게시글 자체도 가능하니 도전해보시길 바랍니다! 그럼 20000!