使用 Django 和 JavaScript 实现平滑的点赞/取消点赞功能

36次阅读

本文旨在提供一个清晰、高效的教程，指导开发者如何使用 Django 框架和 JavaScript 实现点赞和取消点赞功能，并解决常见问题，例如图标切换不正确和点赞计数错误。我们将优化数据处理方式，采用更简洁的 JavaScript 代码，并提供完整的示例，确保功能的流畅性和用户体验。

优化模型关系

虽然问题重点不在模型，但优化模型关系可以提高效率。使用 ManyToManyField 可以简化点赞/取消点赞的处理。

from django.db import models from django.contrib.auth.models import User  class Post(models.Model):     # 其他字段     likes = models.ManyToManyField(User, related_name='liked_posts', blank=True)      def __str__(self):         return self.title      def number_of_likes(self):         return self.likes.count()

视图函数改进

视图函数负责处理用户请求和数据交互。以下是优化后的视图函数：

from django.shortcuts import render, get_object_or_404 from django.http import JsonResponse from .models import Post from django.contrib.auth.decorators import login_required  @login_required def post_list(request):     posts = Post.objects.all()     return render(request, 'network/index.html', {'posts': posts})  @login_required def like_unlike_post(request, post_id):     post = get_object_or_404(Post, id=post_id)     user = request.user      if user in post.likes.all():         post.likes.remove(user)         liked = False     else:         post.likes.add(user)         liked = True      return JsonResponse({'liked': liked, 'likes_count': post.number_of_likes()})

说明:

立即学习“Java免费学习笔记（深入）”；

get_object_or_404 简化了获取帖子的逻辑，如果帖子不存在，会返回 404 错误。
login_required 装饰器确保只有登录用户才能点赞/取消点赞。
通过检查用户是否在 post.likes.all() 中来判断用户是否已点赞。
返回 JsonResponse，包含 liked 状态和点赞总数，方便前端更新。

URL 配置

配置 URL 映射到对应的视图函数：

from django.urls import path from . import views  urlpatterns = [     path('', views.post_list, name='post_list'),     path('like_unlike/<int:post_id>/', views.like_unlike_post, name='like_unlike_post'), ]

前端 HTML 模板

HTML 模板负责展示帖子列表和点赞/取消点赞按钮。

京点点

京东AIGC内容生成平台

26

查看详情

{% for post in posts %}     <div>         <h3>{{ post.title }}</h3>         <p>{{ post.content }}</p>         <button class="like-button" data-post-id="{{ post.id }}">             {% if user in post.likes.all %}                 <i class="fa fa-thumbs-down"></i> Unlike             {% else %}                 <i class="fa fa-thumbs-up"></i> Like             {% endif %}         </button>         <span class="like-count">Likes: {{ post.number_of_likes }}</span>     </div> {% endfor %}

说明:

立即学习“Java免费学习笔记（深入）”；

data-post-id 属性用于存储帖子 ID，方便 JavaScript 获取。
根据用户是否已点赞，显示不同的图标和文字。
like-count 类用于标识点赞计数元素，方便 JavaScript 更新。

JavaScript 代码优化

JavaScript 代码负责处理点赞/取消点赞的异步请求和页面更新。

document.addEventListener('DOMContentLoaded', function() {     document.querySelectorAll('.like-button').forEach(button => {         button.onclick = function() {             const postId = this.dataset.postId;             fetch(`/like_unlike/${postId}/`)             .then(response => response.json())             .then(data => {                 const likeCountSpan = this.parentNode.querySelector('.like-count');                 likeCountSpan.textContent = `Likes: ${data.likes_count}`;                  if (data.liked) {                     this.innerHTML = '<i class="fa fa-thumbs-down"></i> Unlike';                 } else {                     this.innerHTML = '<i class="fa fa-thumbs-up"></i> Like';                 }             });         }     }); });

说明:

立即学习“Java免费学习笔记（深入）”；