스프링 게시판 만들기 좋아요(2)

좋아요 버튼을 만들고 난 뒤,

다른 사용자들이 해당 게시물의 좋아요 숫자를 볼 수 있다면

더 편하지 않을까? 하고 생각해서

전 글에 이어서 

포스팅하겠습니다.

 

먼저 기본적으로 구현할 것들은

 

아래의 사진에서는 좋아요 버튼 옆의 숫자입니다.

 

먼저 

mapper

	<select id="readboard" parameterType="Integer" resultType="kr.co.korea.beans.BoardBean">
		select bid,btitle,bcontent,to_char(bdate,'YYYY-MM-DD') as bdate ,bwriter,guideMa, guideLa,
		(select count(ltlike) from liketable where ltbid=#{bid} and ltlike=1)as blike
		from board	
		where bid=#{bid}	
	</select>
	
	<select id="getboardlist" resultType="kr.co.korea.beans.BoardBean" parameterType="kr.co.korea.beans.Criteria">
		select bid,btitle,bcontent,to_char(bdate,'YYYY-MM-DD') as bdate ,bwriter,
        (select count(ltlike) from liketable where ltbid=bid and ltlike=1)as blike   
		from (select ROW_NUMBER() over(order by bid desc) as RNUM, board.* from board)board
		where RNUM between #{rowStart} and #{rowEnd}
	</select>

위는 상세보기

아래는 게시물 전체 리스트에서

blike라는 부분을 추가해줍니다.

 

그 후 기존의 view에

					<tbody id="tbody">
 						<c:forEach var="board" items="${list }">
 							<tr>
 							<td>${board.bid }</td>
 							<td><a href='<c:url value="/boards/${board.bid}?page=${cri.page}&perPageNum=${cri.perPageNum}" />'>${board.btitle}</a></td>
 							<td>${board.bwriter}</td>
 							<td>${board.blike }</td>
 							<td>${board.bdate}</td>
 							</tr>
 						</c:forEach>
 					</tbody>

<span id="likecount">${board.blike }</span>		

위는 리스트, 아래는 상세보기로

본인이 원하는 위치에 추가해 줍니다.

 

이다음으로 할 것은

좋아요 버튼을 누르고 취소를 했을 때

좋아요 숫자가 계속 바뀌는 것을 사용자는 

아는 편이 더 좋다?라고 생각해서 한 것인데

먼저 mapper의 update를 바꿔줍니다.

(상세보기에 들어갈 때 기존의 정보는 boardcontroller에서 정보를 불러내므로 update만)

 

likemapper

<update id="likeupdate" parameterType="kr.co.korea.beans.LikeBean">
		update liketable
		set <include refid="cal"></include>
		where ltmid=#{ltmid} and ltbid=#{ltbid}
		
		<selectKey keyProperty="allltlike" order="AFTER" resultType="Integer">
			select count(ltlike) from liketable where ltbid=#{ltbid} and ltlike=1
		</selectKey>
	</update>
	
	<sql id="cal">
		<if test="count == 1">
			ltlike = 0
		</if> 
		
		<if test="count == 0">
			ltlike = ltlike + 1 
		</if>
	</sql>

기존의 updatemapper에서 selectkey를 추가해줍니다.

order의 after로 update후에 

select으로 bid에서 ltlike=1(좋아요를 누른) 것을 count해준 값을 조회한 후

 

dao와 service에서

	// dao
    public int likeupdate(LikeBean likebean) {
		sqltemp.update("like.likeupdate",likebean);
		return likebean.getAllltlike();
	}
    
    //service 
    
    public int likeupdate(LikeBean likebean) {
		likedao.likeupdate(likebean);
		return likebean.getAllltlike();
	}
    
    

return 해줍니다.

 

그 후 controller에서

	@PutMapping("/likeupdate")
	public Map<String,Object> likeupdate(@RequestBody LikeBean likebean){
		logger.info("likeupdate");
		
		Map<String,Object> map = new HashMap<String, Object>();
		
		try {
			likeservice.likeupdate(likebean);
			int like = likebean.getAllltlike();
			
			map.put("result", "success");
			map.put("like", like);
			
		}catch(Exception e) {
			e.printStackTrace();
			map.put("result", "fail");
		}
		
		return map;
	}

like라는 변수에 조회한 값을 정해주고

map에 put 해줍니다.

 

그리고 ajax에서

 

	function likeupdate(){
		var root = getContextPath(),
		likeurl = "/like/likeupdate",
		mid = $('#mid').val(),
		bid = $('#bid').val(),
		count = $('#likecheck').val(),
		data = {"ltmid" : mid,
				"ltbid" : bid,
				"count" : count};
		
	$.ajax({
		url : root + likeurl,
		type : 'PUT',
		contentType: 'application/json',
		data : JSON.stringify(data),
		success : function(result){
			console.log("수정" + result.like);
			if(count == 1){
				console.log("좋아요 취소");
				 $('#likecheck').val(0);
				 $('#likebtn').attr('class','btn btn-light');
				 $('#likecount').html(result.like);
			}else if(count == 0){
				console.log("좋아요!");
				$('#likecheck').val(1);
				$('#likebtn').attr('class','btn btn-danger');
				$('#likecount').html(result.like);
			}
		}, error : function(result){
			console.log("에러" + result.result)
		}
		
		});
	};

view단에서 본 span에 result.like를 주면 끝입니다.

 

그 후,

기존의 아이디와 다른 아이디로 접속하여 확인해주면

이렇게 바뀐 것을 알 수 있습니다.