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

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

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

前端实现：JavaScript 和 HTML

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

{% for post in posts %}
{{post.title}}
{{post.body}}


    {% if post.id in user_liked_posts %}
    
    {% else %}
    
    {% endif %}

{{ post.postLiked.count }} Likes
{% endfor %}

关键点：

• 唯一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学习网公众号！