django) 좋아요 버튼 구현하기

1. models.py의 게시물 클래스 안에 like 속성 추가하기

like = models.ManyToManyField(User, related_name='likes', blank=True)

 

따로 테이블이 생성되고, 속성은 board_id, user_id가 있다.

 

 

 

2. views.py에 다음 코드를 적는다. 

 

좋아요가 눌려 있으면, 좋아요를 취소할 수 있게하고, 이 때 취소하면 del like 메시지 저장.

안 눌려 있으면, 좋아요로 변경할 수 있게한다. 좋아요로 변경하면 add like 메시지 저장.

def like(request,bid):
    board = Board.objects.get(id=bid)
    user = User.objects.get(user_id=request.session['user_id'])

    if board.like.filter(id=user.id).exists():
        board.like.remove(user)
        message = "del like"
    else:
        board.like.add(user)
        message = "add like"
    
    return JsonResponse({
        "message" : message
    })

 

 

 

3. urls.py에 좋아요 눌렀을 때 페이지 경로 설정

path('like/<int:bid>', board.views.like),

 

 

 

4. html 문서에 비동기식 자바스크립트 및 XML인 AJAX 사용

 

*좋아요 버튼 누르는 것을 비동기 방식으로 이루어지게 한다.

*XMLHttpRequest를 사용한다.

*서버로부터 응답이 왔을 때 코드 실행(콜백)

 

 

4-1. 일단 좋아요 버튼의 초기화 상태인 빈 하트를 출력한다. 

(아래의 코드는 마우스 오버했을 때 손가락으로 변하는 기능이 추가가 안되어 있는 거라, 그냥 커서 모드로 눌림)

<div onclick="likeAjax({{ post.id }}, this)">♡</div>

 

 

4-2. 밑에 스크립트를 추가한다.

<script>
	function likeAjax(bid,event) {
		var httpRequest = new XMLHttpRequest();
		httpRequest.onreadystatechange = function() {
			if (httpRequest.readyState == XMLHttpRequest.DONE
				&& httpRequest.status == 200) {
				var json = JSON.parse(httpRequest.responseText);
				if (json['message']=='add like'){
					event.innerText = "♥";
            	}
           		else if (json['message']=='del like'){
					event.innerText = "♡";
            	}
			}
	};
	httpRequest.open("GET","/like/" + bid,true);
	httpRequest.send();
}
</script>

 

 

 

5. 동작 화면을 확인한다.

 

좋아요 취소까지 잘 동작하는 것을 확인할 수 있다.

좋아요 안 눌렀을 때

좋아요 눌렀을 때

 

DB에서 확인해보면 좋아요가 눌러있을 때 다음과 같이 추가되어 있는 것을 확인할 수 있다.

db의 like 테이블에 추가된 모습