[Spring]Ajax를 이용한 좋아요 기능 구현

DB테이블

• ID 와 BNO는 회원 테이블과 게시판 테이블의 pk 컬럽을 외래키(fk)로 참조함.
• like_type는 좋아요를 눌렀는지 안눌렀는지 확인하기위해 

Controller

좋아요 기능 또한 @RestController로 하여 새로운 클래스를 생성하여 만들었다.

	//좋아요
	@RequestMapping(value="/likeUp.do", method = RequestMethod.POST)
	public void likeup(@RequestBody LikeVO like) {
			System.out.println("컨트롤러 연결 성공..좋아요 성공!");
			likeService.likeUp(like.getBno(),like.getId(),like.getLike_type());

	}
	
    //좋아요 취소
	@RequestMapping(value="/likeDown.do", method = RequestMethod.POST)
	public void likeDown(@RequestBody LikeVO like) {
			System.out.println("컨트롤러 연결 성공..좋아요 취소!");
			likeService.likeDown(like.getBno(),like.getId(),like.getLike_type());

	}

- 게시판 상세보기 메서드에서 회원이 어떤 게시물에 좋아요를 눌렀는지 확인하기 위해

mav.addObject("like", likeService.findLike(bno,id));  선언 하였으며,

게시글에 좋아요가 몇개가 달렸는지 표시하기위해

mav.addObject("getLike",likeService.getLike(bno,1)); 선언함.

	@RequestMapping(value = "detail.do" , method = RequestMethod.GET)
	public ModelAndView detail(@RequestParam("bno")int bno, String id,
			@ModelAttribute("board") BoardVO board, 
			@ModelAttribute("replyVO")ReplyVO replyVO,
			HttpServletRequest request)throws Exception{	
		
		String viewName = (String)request.getAttribute("viewName");
		ModelAndView mav = new ModelAndView();
		

		//게시글 번호 및 아이디에 대한 정보를 가져온다. 좋아요를 눌렀는지 안눌렀는지 확인하기 위해
		LikeVO like = new LikeVO();
		
		like.setBno(bno);
		like.setId(id);
		like.setLike_type(1);
		
		mav.setViewName(viewName);
		mav.addObject("detail", boardService.detail(bno));
		
		mav.addObject("like", likeService.findLike(bno,id));
		mav.addObject("getLike",likeService.getLike(bno,1));
		return mav;
	}

Service

	//좋아요
    @Override
	public void likeUp(int bno, String id , int like_type) {
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("bno", bno);
		map.put("id", id);
		map.put("like_type", like_type);
		System.out.println("좋아요....." + map);
		likeDAO.likeUp(map);
	}
	
    //좋아요 취소
	@Override
	public void likeDown(int bno, String id, int like_type) {
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("bno", bno);
		map.put("id", id);
		map.put("like_type", like_type);
		likeDAO.likeDown(map);
	}
	
    //좋아요를 눌렀는지
	@Override
	public int findLike(int bno, String id){
		Map<String, Object> map = new HashMap<String,Object>();
		map.put("bno", bno);
		map.put("id", id);
		return likeDAO.findLike(map);
	}
	
    //좋아요 갯수
	@Override
	public int getLike(int bno,int like_type){
		Map<String, Object> map = new HashMap<String,Object>();
		map.put("bno", bno);
		map.put("like_type", like_type);
		return likeDAO.getLike(map);
	}

DAO

	@Override
	public void likeUp(Map<String, Object> data) {
		session.insert("mapper.like.likeUp", data);
	};
	
	@Override
	public void likeDown(Map<String, Object> data) {
		session.delete("mapper.like.likeDown", data);
	};
	
	@Override
	public int findLike(Map<String, Object>data)throws DataAccessException{
		 return  session.selectOne("mapper.like.findLike",data);
	}
	
	@Override
	public int getLike(Map<String, Object>data)throws DataAccessException{
		 return  session.selectOne("mapper.like.getLike",data);
	}

Mapper(Oracle)

<insert id="likeUp">
	<![CDATA[
		insert into board_like (lno ,bno , id, like_type)
		values((select nvl(max(lno)+1,0) from board_like), #{bno}, #{id}, #{like_type})		
	]]>
</insert>

<delete id="likeDown" >
	<![CDATA[
		delete from board_like 
		where bno = #{bno} and id = #{id} and like_type = #{like_type}
	]]>
</delete>

<!-- 좋아요 체크 -->
<select id="findLike" resultType="int">
	<![CDATA[
		select count(*) from board_like 
		where bno = #{bno} and id = #{id}
	]]>
</select>

<!-- 좋아요 불러오기 -->  
<select id="getLike" resultType="int">
	<![CDATA[
		select count(*) from board_like 
		where bno = #{bno} and like_type = #{like_type}
	]]>		
</select>

JSP

<a href='<c:url value='/board/detail.do?bno=${list.bno }&id=${memberVO.id }'/>'>${list.title}

- 게시판 List.jsp 부분에서 id값도 같이 파라미터로 넘기게 넣어준다. 좋아요를 눌렀는지 안눌렀는지 체크를 하기위해 추가함.

<button type="button" class="btn btn-primary CancleBtn LikeBtn">좋아요(${getLike})</button>

-좋아요 누르는 버튼 부분

 

Script

var likeval = ${like};


	let bno = ${board.bno};
	let id = '${memberVO.id}';
	let like_type = 1;

	if(likeval > 0){
		console.log(likeval + "......좋아요 누름");

		$('.LikeBtn').html("좋아요 취소");
		$('.LikeBtn').click(function(){
			$.ajax({
				type : 'post'
			   ,url : '${Path}/like/likeDown.do'
			   ,contentType: 'application/json'
			   ,data : JSON.stringify({
				   "bno" : bno,
				   "id" :id,
				   "like_type" : like_type
			   }),
			 success : function(data){
				 alert('취소 성공');
				 location.reload();
			 	}
			});//end ajax
		})
	}else{
		console.log(likeval + ".....좋아요 안누름")
		$('.LikeBtn').click(function() {
			$.ajax({
				type :'post',
				url : '${Path}/like/likeUp.do',
				contentType: 'application/json',
				data : JSON.stringify(
						{
							   "bno" : bno,
							   "id" :id,
							   "like_type" : like_type
						}		
					),
				success : function(data) {
					alert('성공염');
					location.reload();
				}
			})//end ajax
		})	
}

- var likeval 변수 선언한 부분에서 값을 ${like} 이부분은 아까 mav.addObject("like", likeService.findLike(bno,id));

 이 부분에서 변수를 가져온것이다.

 그렇게 해서 회원의 like_type 이 1 이면 '좋아요 취소' 로 되며, 0이면 '좋아요'로 된다.