Django NBA Web开发 - Step 9 添加Ajax

断断续续了点时间，下班乱七八糟事情太多，今天总算继续做点赞的功能，并把原来创建在测试区域的功能移植到项目中去了。
前几天还单独写了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：实际效果

点赞前

然后来看下点赞后

点赞后

至此，点赞功能已经完毕，小细节等之后再优化。