本文旨在帮助开发者使用 Django 框架和 JavaScript 实现一个流畅、无需页面刷新的点赞/取消点赞功能。我们将探讨如何正确处理图标切换、避免点赞计数在所有帖子中同步更新的问题，并提供一个更简洁、高效的代码实现方案，包括前后端代码示例和注意事项。
前端实现：JavaScript 和 HTML
首先，我们需要在 HTML 模板中渲染帖子列表，并为每个帖子添加一个点赞/取消点赞按钮。关键在于，在页面初次加载时，根据用户是否已点赞该帖子，正确显示相应的图标。
{% for post in posts %}{{post.title}}
{{post.body}}
立即学习“Java免费学习笔记（深入）”；
{{ post.postLiked.count }} Likes{% endfor %} function getCookie(name) { let cookieValue = null; if (document.cookie && document.cookie !== '') { const cookies = document.cookie.split(';'); for (let i = 0; i { const thumbs_up = ''; const thumbs_down = ''; 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; } };
关键点：
唯一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 renderfrom django.contrib.auth import get_user_modelfrom django.http import JsonResponsefrom .models import Post, LikeOrUnlikeimport jsondef 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 modelsfrom django.contrib.auth.models import Userclass Post(models.Model): title = models.CharField(max_length=200) body = models.TextField() def __str__(self): return self.titleclass 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 pathfrom . import viewsurlpatterns = [ 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 和 JavaScript 实现流畅的点赞/取消点赞功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523458.html
微信扫一扫 
支付宝扫一扫 
