[django 블로그] Post 게시물 좋아요 버튼 로직 ( views.py, @required_POST, post_like, like_section)

  ● 게시물 좋아요 버튼  

 

 

post/views.py

- 좋아요 버튼에 대한 로직.

- 로그인한 사용자인 경우와 POST method인 경우에만 post_like 로직에 접근할 수 있다.

- POST 요청된 페이지의 post_id 를 갖는 게시물 페이지를 확인하고 게시물 객체를 post에 저장

- 현재 게시글의 좋아요 필드에 사용자의 id 가 존재하는지 확인하여 Boolean 값으로 저장한다.

- reverse 는 주소를 만들어준다. post_detail 에 post_id 를 추가해 'post_detail/post_id/' 경로를 만들어 현재 게시물로 이동하도록 한다. 

@login_required
@require_POST
def post_like(request):
    post = get_object_or_404(Post, id=request.POST.get('post_id'))
    is_liked = post.likes.filter(id = request.user.id).exists()

    if is_liked :
        post.likes.remove(request.user)
    else:
        post.likes.add(request.user)
    
    return HttpResponseRedirect(reverse('post_detail', kwargs = {'post_id':post.id}))

 

- if else 구문과 왜 if 문에서는 remove를 하고 else 문에서는 add를 할까? 좋아요를 눌렀으면 (is_liked == True) add 가 진행되는 것 아닌지.. 정말 너무 헷갈렸다.

그래서 모든 정보를 출력하면서 값이 어떻게 변하는지 확인했다.

def post_like(request):
    post = get_object_or_404(Post, id=request.POST.get('post_id'))
    is_liked = post.likes.filter(id = request.user.id).exists()
    print("현재 사용자 : ", request.user)
    print("게시물 정보 : ", post)
    print("post.likes.filter(Before) :", post.likes.filter(id = request.user.id))
    print("is_liked :",is_liked)

    if is_liked :
        print("좋아요 취소했습니다.")
        post.likes.remove(request.user)
        print("post.likes.filter(After) : ", post.likes.filter(id = request.user.id))
    else:
        print("좋아요를 눌렀습니다.")
        post.likes.add(request.user)
        print("post.likes.filter(After) : ", post.likes.filter(id = request.user.id))

    return HttpResponseRedirect(reverse('post_detail', kwargs = {'post_id':post.id}))

 

(1) "좋아요" 누른 경우

 

[02/Feb/2020 18:37:42] "GET /blogs/post_detail/1 HTTP/1.1" 200 6818

 

현재 사용자 :  <1 admin@gmail.com>

게시물 정보 :  1 - 스타벅스

post.likes.filter(Before) :  <QuerySet []>

# 사용자가 아직 좋아요를 안눌렀기 때문에 QuerySet 값이 비어있다.

 

is_liked : False

# 현재 사용자가 좋아요가 안눌린 상태 False 값 가지므로 else문 진입

좋아요를 눌렀습니다.

post.likes.filter(After) :  < QuerySet [<User : <1 admin@gmail.com>>] >

# 좋아요 버튼 눌렀기 때문에 QuerySet에 현재 사용자 정보가 추가됨

 

[02/Feb/2020 18:37:45] "POST /blogs/post_like/ HTTP/1.1" 302 0

 

 

 

(2) "좋아요 취소" 누른 경우

[02/Feb/2020 18:37:45] "GET /blogs/post_detail/1 HTTP/1.1" 200 6825

 

현재 사용자 :  <1 admin@gmail.com>

게시물 정보 :  1 - 스타벅스

post.likes.filter(Before) :  < QuerySet [<User : <1 admin@gmail.com>>] >

# 위에서 좋아요를 눌러놨기 때문에 QuerySet에 현재 사용자가 저장됨

is_liked : True

# 현재 사용자가 좋아요를 누른 상태 True 값 갖는다. if문 진입

좋아요 취소했습니다.

post.likes.filter(After) :   <QuerySet []>

# 좋아요 취소 버튼을 눌렀기 때문에 QuerySet에서 현재 사용자 삭제

[02/Feb/2020 18:37:48] "POST /blogs/post_like/ HTTP/1.1" 302 0

 

 

 

 

 

 

templates/post_detail.html

- 게시글 출력 코드와 소셜공유 코드 사이에 추가한다. 

- 좋아요 버튼이 눌리면 'post_like' 의 경로로 전달된다. 

{% extends 'base_.html' %}
{% load social_share %}
{% block content %}
    <div class = "container">
        <div class = "row">
        	<!--게시글 상세보기-->
        </div>
        <div id = '#like_section'>
            {{total_likes}}
            {% if user.is_authenticated %}
            <form action = "{% url 'post_like'%}" method = "POST">
                {% csrf_token %}
                {% if is_liked %}
                    <button type = "submit" class = "btn btn-primary" id = "like" name = "post_id" value = "{{post.id}}">좋아요 취소</button>
                {% else %}
                    <button type = "submit" class = "btn btn-primary" id = "like" name = "post_id" value = "{{post.id}}">좋아요</button>
                {% endif %}
            </form>
            {% endif %}
        </div>
        <div class = "row">
        	<!--소셜 공유-->
        </div>
    </div>
{% endblock %}

 

 

 

 

실행결과

- 좋아요를 누르면 좋아요 총 갯수가 증가하면서 좋아요 취소 버튼으로 바뀐다. 반대의 상황에서도 총 갯수가 감소하면서 좋아요 버튼으로 바뀌는 것을 알 수 있다.

 

 

 

 

- 그러나 버튼을 누를 때마다 새로고침 된다.

- ajax, jQuery 를 사용한 좋아요 로직으로 변경하면 데이터 처리가 쉽게 되면서 새로고침 이라는 단점을 보완할 수 있다.  아래의 블로그가 굉장히 잘 나와있다.

- 저도 계속 도전중이나 자꾸 오류가 나는 관계로.. ㅠ 추후에 추가해보겠습니다.

 

https://wayhome25.github.io/django/2017/06/25/django-ajax-like-button/

Django - Ajax / jQuery를 활용하여 새로고침 없이 좋아요 기능 구현하기 · 초보몽키의 개발공부로그