Django如何简单实现点赞功能

题目

Django如何简单实现点赞功能

后端实现 请查看文章 Django如何实现点赞、收藏以及浏览量增减

步骤

1.前期准备

用户models.py

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

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

# 喜欢数
class LikeNum(models.Model):
    user = models.ForeignKey(User,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(User,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 = User.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"></use>
           </svg>
       <span id="nlikes">{{item.likes}}</span>
   </a>
</div>
<!-- 请把我写在这里 3.js实现 --!>
{% endfor %}

3.js实现

【！！！注意这段代码写在for循环之内】for循环指的是2.html实现处的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;
}

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

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