Django 博客文章详情页面 点赞功能案例

使用技术

• 利用Ajax点赞 并 局部刷新页面
• 绑定事件 点赞和绑定 灵活处理
• 利用F 页面局部刷新 点赞数
• 反序列json获取布尔值

---

视图

• 布尔值，必须用Json反序列化才能使用
• F的妙用 点赞数自加1

def digg(request):

    # ajax 是json格式，特殊情况下需要反序列
    import json
    from django.db.models import F  # 利用F来做自加1操作

    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()

    # 返回json
    response = {'state': True, 'msg': None}

    if not obj:
        ard = models.ArticleUpDown.objects.create(user_id=user_id, article_id=article_id, is_up=True)
        # 生成了赞记录， 然后再来更新页面
        if is_up:  # 如果是赞就更新赞
            models.Article.objects.filter(pk=article_id).update(up_count=F('up_count')+1)
        else:
            # 踩的时候
            models.Article.objects.filter(pk=article_id).update(down_count=F('down_count')+1)
    else:
        response['state'] = False
        response['handled'] = obj.is_up  # 将已经做过的操作提示

    return JsonResponse(response)  # 必须用json返回

---

点赞板块HTML

Ajax局部刷新功能

{% extends 'base.html' %}

{# 继承公共部分 #}

{% block content %}
    {% csrf_token %}
    <h3 class="text-center">{{ article_obj.title }}</h3>
    <div class="cont">
        {{ article_obj.content|safe }}
    </div>
    <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" style="color: red;">
            {#            您已经推荐过#}
        </div>

        <script>
            {# 点赞和踩 ，两个标签加上action  is_up为布尔值 #}
            $('#div_digg .action').click(function () {
                var is_up = $(this).hasClass('diggit')
                {# ajax来操作点赞功能 #}
                $.ajax({
                    url: '/digg/',
                    type: 'post',
                    data: {
                        'csrfmiddlewaretoken': $("[name='csrfmiddlewaretoken']").val(),  //token值
                        'is_up': is_up,
                        'article_id': '{{ article_obj.pk }}',
                    },
                    success: function (data) {
                        if (data.state) {
                            // Ajax 局部刷新!!!

                            // 判断是否是点赞
                            if(is_up){
                                var val = parseInt($('#digg_count').text());
                                $('#digg_count').text(val+1)
                            }else{
                                var val = parseInt($('#bury_count').text());
                                $('#bury_count').text(val+1)
                            }

                        }
                        else {
                            if (data.handled) {
                                $('#digg_tips').html('你已经推荐过')
                            } else {
                                $('#digg_tips').html('你已经反对过')
                            }
                            setTimeout(function () {  // 设置时钟函数，一秒钟后消失
                                $('#digg_tips').html('')  //清空
                            }, 1000)

                        }
                    }
                })
            })

        </script>

    </div>
{% endblock %}