Django与JS实现点赞取消功能详解

本文旨在帮助开发者利用 Django 框架与 JavaScript 技术，实现一个用户体验友好的、无需刷新页面的点赞/取消点赞功能。文章将深入探讨前端如何实现图标的动态切换，以及如何避免点赞计数在多个帖子间同步更新的问题，提供一套简洁高效的解决方案。文章包含完整的前后端代码示例，前端利用 JavaScript 和 HTML，通过唯一ID标识按钮，异步发送请求，并使用 `getCookie` 函数获取 CSRF token，保证安全性；后端则通过 Django 的 views 和 models 处理请求，根据用户行为创建或删除点赞记录。通过本文，开发者可以掌握构建流畅点赞功能的关键技术和注意事项，提升网站的用户互动性。

本文旨在帮助开发者使用 Django 框架和 JavaScript 实现一个流畅、无需页面刷新的点赞/取消点赞功能。我们将探讨如何正确处理图标切换、避免点赞计数在所有帖子中同步更新的问题，并提供一个更简洁、高效的代码实现方案，包括前后端代码示例和注意事项。

前端实现：JavaScript 和 HTML

首先，我们需要在 HTML 模板中渲染帖子列表，并为每个帖子添加一个点赞/取消点赞按钮。关键在于，在页面初次加载时，根据用户是否已点赞该帖子，正确显示相应的图标。

{% 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>

关键点：

• 唯一ID： 使用 like_button_{{post.id}} 作为按钮的 ID，确保每个按钮都有唯一的标识符。这解决了点赞计数同步更新的问题。
• 初始状态： {% if post.id in user_liked_posts %} 语句根据用户是否已点赞来决定初始显示的图标。
• getCookie 函数： 用于获取 CSRF token，这是 Django 安全机制的要求，用于防止跨站请求伪造攻击。
• 异步请求： 使用 fetch API 发送异步请求，避免页面刷新。
• 错误处理: 建议在 fetch 中添加错误处理机制，例如使用 try...catch 块捕获网络错误或服务器错误。
• Content-Type: 在 fetch 的 headers 中设置 Content-Type': 'application/json'，确保后端能正确解析 JSON 数据。
• 点赞计数显示: 添加了 span 元素，用于显示每个帖子的点赞数，并使用唯一的 ID likes_count_{{post.id}}。

后端实现：Django Views 和 Models

在 Django 的 views.py 中，我们需要编写两个函数：一个用于渲染帖子列表，另一个用于处理点赞/取消点赞的请求。

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})

models.py:

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}'

urls.py:

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'),
]

关键点：

• list_posts 函数： 获取所有帖子和当前用户已点赞的帖子，并将它们传递给模板。user.likeByUser.all().values_list("post", flat=True) 使用反向关联查询用户点赞的所有帖子ID。
• like_or_unlike_fetch 函数： 接收来自前端的异步请求，根据用户是否已点赞该帖子来创建或删除 LikeOrUnlike 对象。
• JSON 处理： 使用 json.loads(request.body) 解析前端发送的 JSON 数据。
• get_user_model()： 使用 get_user_model() 获取用户模型，避免硬编码 User 模型。
• exists(): 使用 .exists() 检查是否存在点赞记录，提高效率。
• 原子性操作： 点赞和取消点赞操作应该具有原子性。如果可能，考虑使用事务来确保数据一致性。
• 异常处理： 在 like_or_unlike_fetch 函数中添加异常处理，例如处理用户或帖子不存在的情况。

总结

通过上述步骤，我们可以使用 Django 和 JavaScript 实现一个流畅、无需页面刷新的点赞/取消点赞功能。关键在于正确处理前端的图标切换、避免点赞计数同步更新的问题，并使用简洁、高效的代码实现方案。 记住，安全性是至关重要的，始终要验证用户输入并防止 CSRF 攻击。 此外，可以考虑使用缓存来提高性能，特别是在点赞数量非常大的情况下。

今天关于《Django与JS实现点赞取消功能详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！