[JavaScript] Django 👉 Axios 좋아요 구현

HTML 수정

<form class="like-form" data-article-id="{{ article.pk }}">
    {% if user in article.like_users.all %}
    	<i id="like-{{ article.pk }}" class="fa-solid fa-heart" style='color:red;'></i>
    {% else %}
    	<i id="like-{{ article.pk }}" class="fa-solid fa-heart"></i>
    {% endif %}
</form>
<p>
    <span id="like-count-{{ article.pk }}">
    {{ article.like_users.all|length }}
    </span>
	명이 이 글을 좋아합니다.
</p>

Script

<script>
    // CODE HERE
    axios.defaults.xsrfCookieName = 'csrftoken';
    axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
    const URL = 'http://127.0.0.1:8000/articles/'
    const forms = document.querySelectorAll('.like-form')
    forms.forEach(form => {
      const articlePK = form.getAttribute('data-article-id')
      const icon = document.querySelector(`#like-${articlePK}`)
      const count = document.querySelector(`#like-count-${articlePK}`)
      
      icon.addEventListener('click', function (event){
        axios.post(URL+`${articlePK}/likes/`)
        .then(response => {
          count.innerText = response.data.count
          if (response.data.like){
            event.target.style.color = 'red'
          } else{
            event.target.style.color = 'black'
          }
        })
      })
    })
  </script>

• form을 통해 넘겨주던 POST 요청을 axios를 이용해 넘겨주었다.
• addEventListener로 i태그의 하트를 클릭하면 POST 요청이 갈 수 있게 해주었고, 요청이 성공하면 좋아요 수, 하트 색상 등을 조정해주었다.

View

@require_POST
def likes(request, article_pk):
    # CODE HERE
    if request.user.is_authenticated:
        article = get_object_or_404(Article, pk=article_pk)
        # 누른 적 있으면 좋아요 취소
        if article.like_users.filter(pk=request.user.pk).exists():
            article.like_users.remove(request.user)
            like = False
        # 처음 누르면 좋아요
        else:
            article.like_users.add(request.user)
            like = True
        context = {
            'like':like,
            'count':article.like_users.count()
        }
        return JsonResponse(context)
    return redirect('accounts:login')

• 좋아요 상태(T/F)와 좋아요 수를 Json 형태로 넘겨주었다.

 

✏️ 메모

• axios 개념이 아직 제대로 잡히지 않아서인지, 많이 헤매었다.
• 그래도 해보면서 어떤 식으로 작동하는지 파악할 수 있었다!