断断续续了点时间，下班乱七八糟事情太多，今天总算继续做点赞的功能，并把原来创建在测试区域的功能移植到项目中去了。
前几天还单独写了Django和Ajax点赞功能的文章
https://www.jianshu.com/p/1e583fc73d27
进入正题
1：模型的建立及相关urls
class Likes(models.Model):
like_by = models.ForeignKey(User,on_delete=models.CASCADE,related_name='like_bywhom')
content_type = models.ForeignKey(ContentType,on_delete=models.CASCADE,related_name='likes_connect',null=True,blank=True)
object_id = models.PositiveIntegerField()
content_object = GenericForeignKey()
app_name='likes'
urlpatterns=[
path('vote_like/<int:article_id>',vote_like,name='vote_like'),
]
在vote_like的后面加上文章的id号，用于针对每篇文章进行点赞
2：视图函数
既然用了ajax功能，好就好在根本就不用去修改原本页面的视图函数，逻辑判断和响应都做在单独的app里完成就可以。
def vote_like(request,article_id):
article_liked = Article.objects.filter(article_id=article_id).first()
like_query = Likes.objects.filter(articlelikes__article_id=article_id,like_by=request.user.id).first()
if like_query is None:
like = Likes(content_object=article_liked,like_by=request.user)
like.save()
total_like_query = len(article_liked.like_info.all())
return JsonResponse({'status':'success','total_like_query':total_like_query})
else:
return JsonResponse({'status':'error','notice':'You have voted'})
3：前端页面的渲染
{% block content %}
<h2>{{article.article_title}}<br></h2>
作者：{{article.user}}<br>
发布时间：{{article.article_create_time}}<br>
<h3>{{article.article_content}}</h3>
<input id="test" type="submit" value="点赞">
<ul>
{%for c in comments%}
<li>{{c.comment_content}}</li>
{%endfor%}
</ul>
{% if user.is_authenticated %}
<form method="post">
{% csrf_token %}
{{commentform.media}}
{{commentform.as_p}}
<button type="submit">提交</button>
</form>
{% endif %}
<script>
var created = '{{ like_created|safe }}';
if (created != 'None'){
$('#test').css('background','gray')
}
</script>
<script>
$(document).ready(function(){
$('#test').click(function(){
$.ajax({
url:"{% url 'likes:vote_like' article.article_id%}",
type:"post",
dataType:"json",
data:{
csrfmiddlewaretoken:'{{ csrf_token }}',
},
success:function(result){
$('#test1').html(result.total_like_query);
if(result['status'] == 'success'){
$('#test').css('background','gray')
}
else{
alert(result.notice)
}
}
})
})
})
</script>
{% endblock %}
我们通过vote_like里面返回的json信息，如果status的值是sucess，则表示创建这个“赞”的实例成功，并且将上方id=test的按钮的背景颜色置为灰色.
同时，在正常访问这个页面的时候，通过在页面views函数里面增加判断功能，看是否该用户已经点过赞了，来决定“点赞”按钮的底色。
def article_detail(request,article_id):
article = Article.objects.get(article_id=article_id)
comments = Comment.objects.filter(article_id=article_id)
like_created = Likes.objects.filter(articlelikes__article_id=article_id,like_by=request.user.id).first()
if request.method == "GET":
commentform = CommentForm()
elif request.method == "POST":
commentform = CommentForm(request.POST)
c = commentform.save(commit=False)
c.article_id = article_id
c.save()
return redirect('team:article_detail',article_id=article_id)
return render(request,'article_detail.html',locals())
4：实际效果
点赞前
然后来看下点赞后
点赞后
至此，点赞功能已经完毕，小细节等之后再优化。
