Django点赞的实现示例

1.前期准备

用户models.py

class User(models.Model):
    username = models.CharField("用户名",max_length=10)

点赞models.py
LikeNum的作用在于当有人点赞时可以把它记录下来，包括点赞者和点赞的内容

# 喜欢数
class LikeNum(models.Model):
    user = models.ForeignKey(UserInfos,null=True,on_delete=models.SET_NULL)
    discussion = models.ForeignKey(Discussion,null=True,on_delete=models.SET_NULL)
    class Meta:
        verbose_name_plural = 'user'

发布models.py
Discusssion的作用在于渲染前端页面，里边包括动态发布人和被点赞数量

# 我的讨论
class Discussion(models.Model):
    user = models.ForeignKey(UserInfos,null=True,on_delete=models.SET_NULL)
    likes = models.PositiveIntegerField("喜欢",default=0,editable=False)
    class Meta:
        verbose_name_plural = 'Discussion'

views.py

# 讨论点赞
def addLikes(request,id):
    # 识别出该登陆者用户信息
    if request.session.get('username') and request.session.get('uid'):
        username = request.session.get('username')
        user = UserInfos.objects.get(username=username)
    else:
        # error 是自己写的出错页面
        return HttpResponseRedirect('/error')
        
    # 判别点赞的该Discussion是否存在，有可能在你点赞的时候该用户已经删除，注意不能简单的使用if，else当找不到discussion时会出错
    try:
        if Discussion.objects.get(id=id):
            # 如果Discussion存在
            d = Discussion.objects.get(id=id)
            # 如果User存在
            if user:
                # 判断当前用户是否已经给该Discussion点过赞
                # record 为该记录，不存在时则自动创建
                # flag 为当前是否操作
                record,flag = LikeNum.objects.get_or_create(user=user,discussion=d)
                # 如果刚刚创建
                if flag:
                    d.likes+=1
                    d.save()
                # 如果没操作，说明之前点过赞，此时再次点赞说明是要取消点赞
                else:
                    d.likes -= 1
                    d.save()
                    # 并且删除掉点赞记录
                    LikeNum.objects.get(user=user,discussion=d).delete()
                # 跳转到发布页面
                return render(request,'page.html',{'page':Discusssion.objects.all(),'ln':LikeNum.objects.fitter(user=user)})
            else:
                # 如果session中没有用户信息，则跳转到登陆页面
                return redirect('/login')  
    except Exception as e:
        # 否则跳转到失败页面
        return HttpResponseRedirect('/error')

2.html实现

{％ for item in page ％}
<div>
    用户名:{{item.user.username}}
  <a id="id{{item.id}}">
       <svg class="icon" aria-hidden="true">
               <use xlink:href="#icon-like-fill" rel="external nofollow" ></use>
           </svg>
       <span id="nlikes">{{item.likes}}</span>
   </a>
</div>
<!-- 请把我写在这里 3.js实现 --!>
{％ endfor ％}

3.js实现【！！！注意这段代码写在for循环之内】

//ln指likenum【点赞数】,因为点赞记录是QuerySet，需要从里边遍历
 {％ if ln ％} 
 // 遍历
 {％ for l in ln ％} 
 // 当当前的discussion在LikeNum记录里时，为a标签添加一个class
 {％ if l.discussion == item ％}
    <script>
        obj = document.getElementById('id{{item.id}}');
        obj.className = 'success';
    </script>
{％ endif ％} 
{％endfor％} 
{％endif％}

4.css实现

.success {
    color: #fc5531;
    text-decoration: none;
}

a {
    text-decoration: none;
    color: #848B96;
}

a:hover {
    color: #fc5531;
}

这只是一个大概流程，具体的美化还需要自己实现，不懂得话可以留言来交流！

示意图【我自己做出来的效果】

来源：https://blog.csdn.net/qq_44833392/article/details/123234145