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 %}

{{ article_obj.title }}

{{ article_obj.content|safe }}

{{ article_obj.up_count }}{# 动态获取点赞数 #}

{{ article_obj.down_count }}

{# 您已经推荐过#}

    <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 %}