회원가입, 로그인, 게시판 백엔드 실습( 댓글 작성 )

댓글 작성하기

 : 댓글 작성의 목표는 유저가 작성한 댓글(content) 와 댓글의 번호, session에 저장되어 있는 아이디를 댓글 table에

비동기식 함수를 사용해서 저장할 것이다.

 

1) JavaScript 작성하기

$(document).ready(function(){
	var board_noValue=$("input[name='board_no']").val();
    
    $("#add").on("click",function(){
   		var contentValue=$("#content").val();
		
		// 댓글쓰기를 하기 위한 함수 호출
		add({board_no:board_noValue,content:contentValue});
	})
}

function add(reply){	
	$.ajax({
		type:"post",
		url:"/replies/new",
		data:JSON.stringify(reply),
		contentType:"application/json; charset=utf-8",
		success:function(result){
			if(result=="success"){
				alert("댓글쓰기 성공")
				list(reply.board_no)
			}
		}
	})
}

 - 현재 상세보기 중인 게시글의 번호를 알아야 하기 때문에, jquery의 가장 윗쪽에 input 태그로부터 board_no를 가져오도록 선언하고, id가 add인 버튼에 click 이벤트를 부여하고 content를 가져와서 add 함수를 실행하도록 만들었다.

 

 - 글쓰기 버튼을 클릭하면 board_no와 content를 controller로 전달하고 결과를 기다린다.

 

2) Controller 작성

@RequestMapping(value = "/replies/new", method = RequestMethod.POST)
		public ResponseEntity<String> replywrite(@RequestBody ReplyVO reply , HttpSession session){
			reply.setId((String)session.getAttribute("login"));
			int result=rs.rewrite(reply);
			
			return result==1? new ResponseEntity<>("success",HttpStatus.OK)
					: new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
		}

 - /replies/new로 JSON형식으로 보내진 데이터를 ReplyVO 객체에 저장하고, session에 저장된 Id 값도 ReplVO 객체에 저장한 후 rs.rewrite 명령을 실행한다.

 

 - rs.rewrite 함수는 int를 반환하기 때문에, 해당 함수의 return 값이 참이면 1, 거짓이면 0을 반환한다.

return 값이 1인 경우, js내부의 succes에 "success" 문자열을 반호나하고, HttpStatus를 정상적으로 호출한다.

0인 경우, HttpStatus 에러를 발생시킨다.

 

public class ReplyVO {
	private int rno;			// 댓글번호
	private String content;		// 댓글내용
	private String id;			// 아이디
	private String replydate;	// 댓글작성일
	private int board_no;		// 게시판번호
	
    필드의 getter 및 setter
}

 - ReplyVO.java는 다음과 같이 선언했다.

 

3) Service , ServiceImpl 작성

public interface ReplyService {
	// 댓글 쓰기를 위한 설계
	public int rewrite(ReplyVO reply);
}

@Service
public class ReplyServiceImpl implements ReplyService{

	@Autowired
	ReplyMapper rm;

	// 댓글 쓰기를 위한 구현
	public int rewrite(ReplyVO reply) {
		return rm.rewrite(reply);
	}
}

 - Controller로 부터 전달받은 데이터를 ReplyVO 객체에 담아서 이동시키고, return 값으로 int 를 받는다.

 

4) Mapper, Mapper.xml

public interface ReplyMapper {
	// 댓글 쓰기를 위한 구현
	public int rewrite(ReplyVO reply);
}

<?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="hjm.portfolio.mapper.ReplyMapper">

	<insert id="rewrite">
		insert into port_reply(content,id,board_no)
		values(#{content},#{id},#{board_no})
	</insert>
    
</mapper>

 - mapper에서 insert 명령을 실행한다.

 

5) 결과

 : id가 bbb인 계정으로 로그인한 후 댓글을 작성하면 다음과 같이 나타난다

데이터베이스에 board_no와 id를 포함해 추가된 모습.

 

** 데이터 베이스 형식

 - board_no 열이 외래키로 지정됐기 때문에 board_no 가 일치하지 않는다면, 삭제/수정 명령을 수행하지 않는다.