• 拷贝代码
• 拷贝样式
• 实现功能完整代码
  • 路由’
  • html
  • 视图函数

拷贝代码

{#    点赞点踩开始#}
    <div id="div_digg">
    <div class="diggit" onclick="votePost(17391141,'Digg')">
        <span class="diggnum" id="digg_count">1</span>
    </div>
    <div class="buryit" onclick="votePost(17391141,'Bury')">
        <span class="burynum" id="bury_count">0</span>
    </div>
    <div class="clear"></div>
    <div class="diggword" id="digg_tips">
    </div>
</div>
{#    点赞点踩结束#}

拷贝样式

{% block css %}
    <style>
        #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/img/upup.png') no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url('/static/img/downdown.png') 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: #808080;
        }
    </style>
{% endblock %}

拷贝图片

实现功能完整代码

路由’

# 点赞点踩
    path('up_and_down/', views.up_and_down),

html

{#    点赞点踩开始#}
    <div id="div_digg">
    <div class="diggit action">
        <span class="diggnum" id="digg_count">{{ article_detail.up_num }}</span>
    </div>
    <div class="buryit action">
        <span class="burynum" id="bury_count">{{ article_detail.down_num }}</span>
    </div>
    <div class="clear"></div>
    <div class="diggword" id="digg_tips" style="color: red"></div>
</div>
{#    点赞点踩结束#}
{% endblock %}

{% block js %}
    <script>
        $(".action").click(function () {
            var _this = $(this);
            // 区分开到底点的是赞还是踩
            // 如果返回是True ,说明是赞 否则是踩
            var is_up = $(this).hasClass('diggit')

            // 文章id
            var article_id = '{{ article_detail.pk }}'

            // 用户id， 后端从session；里获取

            // 发起Ajax请求，把数据提交到Django的后端
            $.ajax({
                url: '/up_and_down/',
                type: 'post',
                data: {
                    is_up: is_up, article_id: article_id, csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (res) {
                    if (res.code == 200){
                        $("#digg_tips").html(res.msg);
                        // 要先拿到原来的数量，然后＋1， 再写进去
                        // 1.要拿到原来的值
                        var old_num = _this.children().text(); //string
                        _this.children().text(parseInt(old_num) + 1);
                } else{
                        $("#digg_tips").html(res.msg);
                    }
                }
            })
        })
    </script>
{% endblock %}

视图函数

def up_and_down(request):
    if request.method == 'POST':
        # 1.定义返回给前端的数据格式
        back_dic = {'code': 200, 'msg': '点赞成功'}

        # 2.接收参数
        is_up = request.POST.get('is_up')
        article_id = request.POST.get('article_id')
        print(is_up, type(is_up))  # true <class 'str'>

        # 3.验证参数
        if not request.session.get('username'):
            back_dic['code'] = 1006
            back_dic['msg'] = '<a href="/login/" style="color:red">请先登录</a>'

        # 自己的文章自己不能点
        # 先通过当前文章去查询谁写的，然后与当前登录用户比较
        article_obj = models.Article.objects.filter(pk=article_id).first()
        print(article_obj)
        if article_obj.blog.userinfo.username == request.session.get(('username')):
            back_dic['code'] = 1007
            back_dic['msg'] = '宝贝啊，不能给自己支持'
            return JsonResponse(back_dic)

        # 验证一篇文章一个人只能点一次
        # 根据文章id和用户id两个条件，去表里面查询，如果查到了，说明已经点过了，不能再点了
        is_click = models.UpAndDown.objects.filter(article_id=article_id, user_id=request.session.get('id')).first()
        if is_click:
            back_dic['code'] = 1008
            back_dic['msg'] = '你已经点过了'
            return JsonResponse(back_dic)


        # 4.入库
        # 操作哪些表？
        # 1、点赞点踩表 2.文章表： 点赞数 点赞数

        # 这里需要要对is_up做反序列化
        # jason.dumps json.loads
        is_up = json.loads(is_up)

        if is_up:
            # 说明是点赞了
            models.Article.objects.filter(pk=article_id).update(up_num=F('up_num') + 1)
        else:
            # 点踩了
            models.Article.objects.filter(pk=article_id).update(down_num=F('down_num') + 1)
            back_dic['msg'] = '我们努力'

        # 操作点赞点踩表
        models.UpAndDown.objects.create(is_up=is_up, article=article_obj, user_id=request.session.get('id'))
        # models.UpAndDown.objects.create(is_up=is_up, article=article_obj)
        return JsonResponse(back_dic)