使用 Django 和 JavaScript 实现流畅的点赞/取消点赞功能

{% for post in posts %}
<p>{{post.title}}</p>
<p>{{post.body}}</p>

<button id="like_button_{{post.id}}" onclick="LikeOrUnlike('{{post.id}}')">
    {% if post.id in user_liked_posts %}
    <i class="fa-solid fa-thumbs-down"></i>
    {% else %}
    <i class="fa-solid fa-thumbs-up"></i>
    {% endif %}
</button>
<span id="likes_count_{{post.id}}">{{ post.postLiked.count }}</span> Likes
{% endfor %}

<script>
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    const LikeOrUnlike = async (id) => {
        const thumbs_up = '<i class="fa-solid fa-thumbs-up"></i>';
        const thumbs_down = '<i class="fa-solid fa-thumbs-down"></i>';

        const csrftoken = getCookie("csrftoken");
        const user = "{{request.user.id}}";

        const response = await fetch("/post/like/", {
            method: "POST",
            headers: {
                "X-CSRFToken": csrftoken,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ user_id: user, post_id: id }),
        });

        const data = await response.json();

        const like_button_element = document.getElementById(
            `like_button_${id}`
        );
        const likes_count_element = document.getElementById(
            `likes_count_${id}`
        );

        let num_likes = parseInt(likes_count_element.innerHTML);

        if (data.liked) {
            like_button_element.innerHTML = thumbs_down;
            likes_count_element.innerHTML = num_likes + 1;
        } else {
            like_button_element.innerHTML = thumbs_up;
            likes_count_element.innerHTML = num_likes - 1;
        }
    };
</script>

from django.shortcuts import render
from django.contrib.auth import get_user_model
from django.http import JsonResponse
from .models import Post, LikeOrUnlike
import json

def list_posts(request):
    posts = Post.objects.all()
    user_liked_posts = request.user.likeByUser.all().values_list("post", flat=True)

    context = {"posts": posts, "user_liked_posts": user_liked_posts}

    return render(request, "posts/list.html", context)


def like_or_unlike_fetch(request):
    data = json.loads(request.body)
    user_id = data.pop("user_id")
    post_id = data.pop("post_id")

    user = get_user_model().objects.get(pk=user_id)
    post = Post.objects.get(pk=post_id)
    data.update({"user": user, "post": post})

    like_object = LikeOrUnlike.objects.filter(**data)
    if not like_object.exists():
        LikeOrUnlike.objects.create(**data)
        liked = True
    else:
        like_object.delete()
        liked = False

    return JsonResponse({"liked": liked})

from django.db import models
from django.contrib.auth.models import User

class Post(models.Model):
    title = models.CharField(max_length=200)
    body = models.TextField()

    def __str__(self):
        return self.title

class LikeOrUnlike(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='likeByUser')
    post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name='postLiked')

    def __str__(self):
        return f'{self.user} liked this {self.post}'

from django.urls import path
from . import views

urlpatterns = [
    path('posts/', views.list_posts, name='list_posts'),
    path('post/like/', views.like_or_unlike_fetch, name='like_or_unlike_fetch'),
]