实现个人站点详情页的点赞功能

逻辑：

1. 做出样式（从博客园复制的）
2. 用js判断点击的是赞还是反对按钮
3. ajax发送数据，数据包括csrf_token、点击的是赞还是反对（布尔值）、文章id。注：不用发送用户id，评论人就是用户id，可以在后台获取用户id
4. 判断用户是否已经点过赞或反对，如果没有点过：
   1. 点赞表创建数据，判断用户是点的赞还是点的反对，增加相应的数据。
   2. 文章表的赞或反对加1
5. 如果点过：
   1. 返回错误状态
   2. 返回布尔值(true代表用用户点的赞，false代表用户点的反对）
6. ajax接收数据，如果是第一次点赞或反对，用js给响应按钮+1
7. 如果已经点过，提示相应信息。

html

<div class="clearfix">
            <div id="div_digg">
                <div class="diggit action">
                    <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
                </div>
                <div class="buryit action">
                    <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
                </div>
                <div class="clear"></div>
                <div class="diggword" id="digg_tips"></div>
            </div>
        </div>
    </div>

 

css

#div_digg {
    float: right;
    margin-bottom: 10px;
    margin-right: 30px;
    font-size: 12px;
    width: 125px;
    text-align: center;
    margin-top: 10px;
}

.diggit {
    float: left;
    width: 46px;
    height: 52px;
    background: url(/static/blog/img/upup.gif) no-repeat;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
}

.diggnum {
    font-size: 14px;
    color: #075db3;
    font-family: Verdana;
}

#div_digg .diggnum {
    line-height: 1.5em !important;
}

.buryit {
    float: right;
    margin-left: 20px;
    width: 46px;
    height: 52px;
    background: url(/static/blog/img/downdown.gif) no-repeat;
    text-align: center;
    cursor: pointer;
    margin-top: 2px;
    padding-top: 5px;
}

.clear {
    clear: both;
}

.diggword {
    margin-top: 5px;
    margin-left: 0;
    font-size: 12px;
    color: red;
}

 

js

 // 点赞请求
        $('#div_digg .action').click(function () {
            let is_up = $(this).hasClass('diggit');

            $obj = $(this).children('span');

            $.ajax({
                url: '/digg/',
                type: 'post',
                data: {
                    'csrfmiddlewaretoken': $("[name='csrfmiddlewaretoken']").val(),
                    'is_up': is_up,
                    'article_id': "{{ article_obj.pk }}",
                },
                success: function (data) {
                    if (data.status) {
                        let val = parseInt($obj.text());
                        $obj.text(val + 1);
                    } else {
                        let val = data.handled ? '您已经推荐过！' : '您已经反对过！';
                        $('#digg_tips').html(val);

                        setTimeout(function () {
                            $('#digg_tips').html("");
                        }, 1000)
                    }
                }
            })
        });

 

py

# urls.py

# 点赞
 path('digg/', views.digg),

views.py
# 点赞
def digg(request):
    article_id = request.POST.get('article_id')
    is_up = json.loads(request.POST.get('is_up'))
    user_id = request.user.pk

    obj = models.ArticleUpDown.objects.filter(user_id=user_id, article_id=article_id).first()

    response = {'status': True}
    if not obj:

        models.ArticleUpDown.objects.create(
            user_id=user_id,
            article_id=article_id,
            is_up=is_up,
        )

        article_obj = models.Article.objects.filter(pk=article_id)
        if is_up:
            article_obj.update(up_count=F('up_count') + 1)
        else:
            article_obj.update(down_count=F('down_count') + 1)
    else:
        response['status'] = False
        response['handled'] = obj.is_up

    return JsonResponse(response)