[스프링] 게시판 좋아요(추천) 구현(ID당 한 번만 좋아요하기)

좋아요(추천) 구현 모습

 

 

[원리의 이해]

 

• 게시물 상세페이지 진입 시 유저의 '좋아요' 여부가 확인되어야 함
• 화면에서 '좋아요' 부분만 업데이트 되어야 함으로 비동기식 ajax 사용 

 

 

[View][HTML]

- 로그인 유저의 '좋아요' 여부에 따라 '빈 하트(heart.svg)' 또는 '검은 하트(heart-fill.svg)'가 출력되어야 하지만, 기본적으로는 '빈 하트'가 출력되도록 설정

- 게시글의 총 '좋아요' 개수 확인하여 출력

<div>
    <label id="goodClick"><img id="heart" src="/resources/icon/heart.svg"></label>
    <span id="totalGoodId">${totalGood}</span>
</div>

 

[View][Ajax]

 

[1] 좋아요(추천) 전체 개수 출력 함수

//좋아요 전체 개수 출력
function totalChange(){
     $.ajax({
            url :'${pageContext.request.contextPath}/totalGood',
            type :'POST',
            data : {'r_no' : ${SHgoodModel.r_no}},/* 게시글번호를 매개변수로.. */
            
            success : function(data){
                if(data !== null){
                        document.getElementById("totalGoodId").innerHTML = data;
				/* 좋아요 총개수를 유저가 '좋아요' 클릭한 결과값으로 변경 */
                } else { 
                        alert("전체 개수 확인 실패");
                }
             }
             
        });
}

 

[2] 좋아요(추천) 여부 확인 & 클릭 시 업데이트하는 함수

- window 진입 시 바로 좋아요 여부 확인하도록 함수 설정

  (EL표현의 경우, Controller에서 DB에 접근하여 결과값을 가져올 수 있도록 미리 Model에 담아줌)

- 좋아요 클릭 시, 결과에 따라 하트 사진 변경하여 출력하도록 설정

$(function () {

    // 추천 여부 확인
    var userGood = ${userGood};

    // userGood이 1이면 좋아요가 이미 되있는것이므로 heart-fill.svg를 출력하는 코드
    if(userGood>0) {
	$("#heart").attr("src", "/resources/icon/heart-fill.svg");
    } else {
	$("#heart").attr("src", "/resources/icon/heart.svg");
    }

    // 좋아요 버튼을 클릭 시 실행되는 코드
    $("#goodClick").on("click", function () {
        $.ajax({
            url :'${pageContext.request.contextPath}/checkGood',
            type :'POST',
            data : {'r_no' : ${SHgoodModel.r_no}, 'id' : '${sessionScope.sessionId}'},
            
            success : function(data){
                    if(data == 1){
                        /* alert("insert 성공"); */
                        $('#heart').prop("src","/resources/icon/heart-fill.svg");
                        totalChange(); /* 총 개수 출력 함수 호출하여 업데이트 */
                    } else if (data == 2){
                        /* alert("delete 성공"); */
                        $('#heart').prop("src","/resources/icon/heart.svg");
                        totalChange(); /* 총 개수 출력 함수 호출하여 업데이트 */
                    } else {
                        alert("실패");
                    }
                }
            });
        });/* goodClick end */
});