스프링 댓글 구현하기 feat ajax

이번 시간에는 이전에 프로젝트 때 작업 했던 

위 와같은 댓글이 달리도록 한번 작성해보자 

 

그럼 Let's GO 

 

---

1.  댓글 테이블 제작 및 vo 클래스 제작

 

데이터 베이스 같은경우 오라클을 사용하였다. 

 

import java.sql.Timestamp;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class CommentVO {
	
	private int com_no;
	private String com_writer;
	private String com_content;
	private int com_like;
	private int com_hate;
	private String re_com;
	private int com_type;
	private Timestamp com_regdate;
	private int com_bno;
}

 

위 와같이 코드가 작성되고 컬럼명은 VO와 동일하게 제작했댜.

 

---

서비스와 매퍼 객체를 만들어보자 

 

public interface ICommentService {
	
	
	void CommentRegist(CommentVO vo); //댓글 등록
	List<CommentVO> getList(int com_bno); //목록 요청
	int getTotal(int com_bno); //댓글 개수
	List<CommentVO> myRecord(String writer);
	void commentDelete(CommentVO vo);
	
	List<CommentVO> getComList(String com_wrtier); //어드민용 회원 댓글 불러오긔

}

인터페이스 서비스와 매퍼객체 똑같이 만들어준다. 

 

그 뒤 서비스를 포함한 클래스를 만들어준다. 

 

package com.community.shy.board.JobComment.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.community.shy.board.JobComment.mapper.ICommentMapper;
import com.community.shy.board.command.CommentVO;
@Service
public class CommentService implements ICommentService {

	@Autowired
	private ICommentMapper mapper;
	
	@Override
	public void CommentRegist(CommentVO vo) {
		mapper.CommentRegist(vo);

	}

	@Override
	public List<CommentVO> getList(int com_bno) {
		return mapper.getList(com_bno);
	}

	@Override
	public int getTotal(int com_bno) {
		// TODO Auto-generated method stub
		return mapper.getTotal(com_bno);
	}

	@Override
	public List<CommentVO> myRecord(String writer) {
		return mapper.myRecord(writer);
	}

	@Override
	public void commentDelete(CommentVO vo) {
		mapper.commentDelete(vo);
		
	}
	
	@Override
	public List<CommentVO> getComList(String com_wrtier) {
		return mapper.getComList(com_wrtier);
	}

}

오늘 필요한 메소드는 CommentRegist 와 getList , getTotal 까지 이다. 

 

 

---

컨트롤러 및 마이바티스에 들어가는 매퍼를 제작해보자 

 

매퍼 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.community.shy.board.JobComment.mapper.ICommentMapper">
  	
  	<insert id="CommentRegist">
  		insert into job_comment(com_no,com_writer,com_content,com_like,com_hate,re_com,com_type,com_bno)
		values (COMMENT_SEQ.nextval ,#{com_writer},#{com_content},0,0,1,1,#{com_bno})
  	</insert>
  	
  	<select id="getTotal" resultType="int">
  		select count(*) from job_comment where com_bno = #{com_bno}
  	</select>
  	
  	<select id="getList" resultType="com.community.shy.board.command.CommentVO">
  		select * from job_comment where com_bno = #{com_bno}
  	</select>
  	
  	<select id="myRecord" resultType="com.community.shy.board.command.CommentVO">
		SELECT * FROM job_comment
		WHERE com_writer = #{writer}
	</select>
	
	<delete id="commentDelete">
		DELETE FROM job_comment
		WHERE com_writer = #{com_writer} AND com_content = #{com_content}
	</delete>
	
	<select id="getComList" resultType="com.community.shy.board.command.CommentVO">
        select * from job_comment where com_writer = #{com_writer}
     </select>
	
  </mapper>

@RestController
@RequestMapping("/Comment")
public class CommentController {
	
	@Autowired
	private ICommentService service;
	
	@PostMapping("/InsertComment")
	public String InsertComment(@RequestBody CommentVO vo,HttpSession session) {
		System.out.println("댓글 등록 통신 성공");
		if(session.getAttribute("login") == null) {
			return "fail";
		} else {
			System.out.println("로긘함. 스크랩 진행");
			
			service.CommentRegist(vo);
			System.out.println("댓글 등록 서비스 성공");
			return "InsertSuccess";
		}
	}

	@GetMapping("/CommentList/{com_bno}")
	public Map<String, Object> getList(@PathVariable int com_bno, Model model) {
		System.out.println("댓글 목록 컨트롤러 동작");
		List<CommentVO> list = service.getList(com_bno);
		int total = service.getTotal(com_bno);
		
		ModelAndView view = new ModelAndView();
		System.out.println("댓글 갯수 " + service.getTotal(com_bno));
		view.setViewName("/board/JBoardList");
		Map<String, Object> map = new HashMap<>();
		map.put("list", list);
		map.put("total", total);
		
		return map;
	}

컨트롤러 같은경우에 ajax로 동작시키려고 한다.

그렇기 떄문에 RestControolaer를 활용하자 

 

그 후 세션 객체를 활용 하여 로그인 검증 한번 해주고

댓글 등록에 대한 로직이 돌아가 도록 서비스 객체에서 댓글 등록 인서트문 을 돌려준다. 

 

이제 jsp를 보자! :) 

 

 

                <div class="comment-box">
                    
   		                 <div class="comment-count">댓글 <span id="count">0</span></div>

   		                 	   <!-- <span class="c-icon"><i class="fa-solid fa-user"></i>  -->
   		                 <div class="comment-name">
	                        <span class="anonym">작성자 : 
	                    	    <input type="text" class="form-control" id="com_writer" placeholder="이름" name ="com_writer" value='${login.userId}' readonly  style="width: 100px; border:none;">
	                        </span>
	                      </div>   
	                        	
	                        <!-- </span> -->
                     <!--<img src="/익명.jpg" width ="50px" alt="My Image"><!-->
                    <div class="comment-sbox">
                        <textarea class="comment-input" id="com_content" cols="80" rows="2" name="com_content" ></textarea>
                        <!-- <span class="com-function-btn" type="hidden">
                            
                            <a href="#"><i class="fa-solid fa-pen-to-square"></i></a>
                            <a href="#"><i class="fa-solid fa-trash-can"></i></a>
                         </span> -->
                    </div>
                    	<div class="regBtn">
                    		<button id="Comment_regist"> 댓글등록</button>
                    	 </div>

작성하면 대략 

이런 화면을 가진 창이 나타내게 된다. 

 

그 후 댓글 등록을 누르게 되면  다른 div 박스 안에 계속 list가 채워 지는 형식으로 진행 할 것이다. 

 

<div class="comment_Box" style="border:1px solid gray;"> <!-- 댓글이 들어갈 박스 -->

	                </div>

이제 ajax 를 작성해보자 

 

$('#Comment_regist').click(function() {
			
   			//Json으로 전달할 파라미터 변수선언
   			const com_bno = ${board_no};
   			const com_writer = $('#com_writer').val();
   			const com_content = $('#com_content').val();
   			
   			console.log(com_bno);
   			console.log(com_writer);
   			console.log(com_content);
   		
   			if(com_writer == ''){
   				alert('로그인 후 이용해주세요');
   				return;
   			}else if(com_content == '') {
   				alert('내용을 입력하세요');
   			}
   			
   			$.ajax({
   				type:'post',
   				url:'<c:url value="/Comment/InsertComment"/>',
   				data: JSON.stringify(
   					{
   						"com_bno":com_bno,
   						"com_writer":com_writer,
   						"com_content":com_content
   					}		
   				),
   				contentType: 'application/json',
   				success:function(data){
   					console.log('통신성공' + data);
   					if(data === 'InsertSuccess') {
   						alert('댓글 등록이 완료되었습니다.');
   						console.log('댓글 등록 완료');
   						$('#com_writer').val(com_writer);
   	   					$('#com_content').val('');
   	   					getList();
   					} else {
   						alert('로그인 이후 이용해주시기 바랍니다.');
   						console.log('댓글 등록 실패');
   					}
   				},
   				error:function(){
   					alert('통신실패');
   				}
   			});// 댓글 비동기 끝
   			
		});// 댓글등록 이벤트 끝
		
		getList();

우선 Json으로 전달할 파라미터를 const로 변수 선언을 해준다. 

이것이 이제 컨트롤러로 들어가 매퍼를 거쳐 디비에 저장될 값이다. 

 

그후 검증을 통해 빈값 체크 및 로그인을 하지 않았을 경우 등을 걸러준다. 

그 후 ajax를 통해 입력 받은 데이터를 컨트롤러로 넘겨준다. 

 

이때 ajax를 통해 getList라는 메소드가 ㄴ발동 되게 되는데 이것은 리스트를 불러오는 것이다 

작성된 글을 실시간으로 비동기 식으로 보여주어  페이지 로딩없이 바로 보여준다. 

 

getList는 getJson으로 해보자

 

ajax와 getJson의 차이점은 

async 옵션은 기본적으로 true 가 default 인데, false 로 하면 백그라운드로 진행하는게 아니라 순차적으로 진행되어  제대로된 .ajax 를 사용하는게 아닐지 모르지만 화면을 보는 관점에서는 더자연스럽게 느껴진다.

 

     또한, 백그라운드로 진행하면 안되는 작업을 할 때는 async옵션을 false로 주어야 한다.

 

 

		function getList() {
			
			const com_bno = ${board_no};
			const com_writer = $('#com_writer').val();
   			const com_content = $('#com_content').val();
   			/* const com_no = ${com}; */
			$.getJSON(
				"<c:url value='/Comment/CommentList/'/>"+com_bno,
				function(data) {
					if(data.total > 0){
						var list = data.list;
						
						var comment_html = "<div>";
						
						$('#count').html(data.total);
						for(i = 0;i < list.length;i++){
							var content = list[i].com_content;
							var writer = list[i].com_writer;
							comment_html += "<div><span id='com_writer'><strong>" + writer + "</strong></span><br/>";
							comment_html += "<span id='com-content'>" + content + "</span><br>";
							if(writer === $("#com_writer").val()){
								 comment_html += "<span id='delete' style='cursor:pointer;' data-id ="+content+">[삭제]</span><br></div><hr>";
								 
							}
							else{
								comment_html += "</div><hr>";
							}
						}
						
						$(".comment_Box").html(comment_html);
						
						
					}
					else{
						var comment_html = "<div>등록된 댓글이 없습니다.</div>";
						$(".comment_Box").html(comment_html);
					}
			
				
				}
				);//getJson

getJson도 우선 글을 불러오기 위해 글 번호를 받는다. 

그 뒤에 컨트롤러에 접근하기위해 글 번호를 묻혀 보낸다. 

이떄 데이터 크기가 0코다 클경우로 설정하여 

 

댓글이 0개 일시 등록된 댓글이 없다고 표기해준다. 

 

그 후 컨트롤러에서 뿌려진 정보를 data 반복문을 통해 

이 글 번호에 등록된 댓글을 계속 뿌려주고 

이때 계속 += div asdasd .</div>

이렇게 계속 html 코드가 이어지도록 반복문을 작성한뒤 

 

제이쿼리 html() 로 붙여 넣어주면 댓글 작성이 끝나게 된다. 

 

https://github.com/MoonSeokHyun/JobJob_community

GitHub - MoonSeokHyun/JobJob_community