使用 Django 和 JavaScript 实现平滑的点赞/取消点赞功能-js教程-PHP中文网

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

心靈之曲

发布： 2025-09-26 19:35:00

原创

499人浏览过

使用 django 和 javascript 实现平滑的点赞/取消点赞功能

本文旨在提供一个清晰、高效的教程，指导开发者如何使用 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()})

登录后复制

说明:

MindShow

MindShow官网 | AI生成PPT，快速演示你的想法

1492

查看详情

立即学习“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 模板负责展示帖子列表和点赞/取消点赞按钮。

{% 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免费学习笔记（深入）”；