文章的点赞点踩制作

文章的添加

博客园打开需要拷贝的文章，右键检查--》选择cnblogs_post_body这一个div，然后复制outer HTML到admin后台文章表里面

最后需要在文章详情页的文章内容那一行添加一个|safe

点赞点踩制作

前端样式：

不会写，直接拷贝博客园的点赞点踩html和css样式

    {#    点赞点踩样式开始：复制博客园的点赞点踩样式，拷贝其对应的out HTML和css到下面就行#}
    <div class=\"clearfix\">
        <div id=\"div_digg\">
            <div class=\"diggit action\">
                <span class=\"diggnum\" id=\"digg_count\">{{ article_obj.up_num }}</span>
            </div>
            <div class=\"buryit action\">
                <span class=\"burynum\" id=\"bury_count\">{{ article_obj.down_num }}</span>
            </div>
            <div class=\"clear\"></div>
            <div class=\"diggword\" id=\"digg_tips\" style=\"color: red\">
            </div>
        </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.gif) 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.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: #808080;
        }
    </style>
{% endblock %}

向后端提交点赞点踩数据：

        // 思考然后判断用户是点了赞还是点了踩？？
        // 法1：给点赞和点踩的div分别绑定一个事件，以此来判断用户点赞点踩；法2：给div绑定同一个类属性action，在内部判断是否有diggit或者buryit来判断点赞还是点踩、
        $(\'.action\').click(function () {
            // 保存一下用户是否点赞还是点踩
            let isUp = $(this).hasClass(\'diggit\');
            // 向后端发送ajajx提交用户是否点赞点踩数据
            let div = $(this);
            $.ajax({
                type: \'post\',
                url: \'/up_or_down/\',
                // 提交数据：哪个用户为那篇文章点赞了还是点踩了，用户后端有了不用提交了
                data: {
                    \'article_id\': \'{{ article_obj.pk }}\',
                    \'is_up\': isUp,
                    \'csrfmiddlewaretoken\': \'{{ csrf_token }}\',
                },
                success: function (args) {
                    if (args.code == 1000) {
                        $(\'#digg_tips\').text(args.msg)
                        let oldNum = div.children().text();
                        div.children().text(Number(oldNum) + 1)
                    } else {
                        $(\'#digg_tips\').html(args.msg)
                    }
                }
            })
        })

后端逻辑代码：

# 八、点赞点踩视图函数
def up_or_down(request):
    \"\"\"
    逻辑：
    1.判断是否登录（未登录需要先登录）
    2.判断用户点赞是否是自己的文章（自己不能给自己文章点赞）
    3.判断用户是否已经给该文章点过了（点过就不能点了）
    4.操作数据库存储数据
    :param request:
    :return:
    \"\"\"
    # 1.判断是否为ajax请求
    if request.method == \'POST\':
        # 2.定义一个回调字典
        back_dic = {\'code\':1000,\'msg\':\'\'}
        # 3.获取提交的数据
        article_id = request.POST.get(\'article_id\')
        is_up = request.POST.get(\'is_up\') # 注意结束的是字符串形式需要转为布尔值形式
        is_up = json.loads(is_up)
        # 4.判断是否登录（未登录需要先登录）
        if request.user.is_authenticated:
            # 5.判断用户点赞是否是自己的文章（自己不能给自己文章点赞）根据当前文章主键查出该文章的用户与request.user比对
            article_obj = models.Article.objects.filter(pk=article_id).first()
            user_obj = article_obj.blog.userinfo
            if not request.user == user_obj:
                # 6.判断用户是否已经给该文章点过了（点过就不能点了）查点赞点踩表是否有对应数据
                is_click = models.UpAndDown.objects.filter(article=article_obj,user=request.user)
                if not is_click:
                    # 7.操作数据库存储数据,注意article表里的数据也要同步
                    # 8.判断是点赞了还是点踩了
                    if is_up:
                        models.Article.objects.filter(pk=article_id).update(up_num=F(\'up_num\') + 1)
                        back_dic[\'msg\'] = \'点赞成功\'
                    else:
                        models.Article.objects.filter(pk=article_id).update(down_num=F(\'down_num\')+1)
                        back_dic[\'msg\'] = \'点踩成功\'
                    models.UpAndDown.objects.create(user=request.user,article=article_obj,is_up=is_up)
                else:
                    back_dic[\'code\'] = 1001
                    back_dic[\'msg\'] = \'您已经支持过了\'
            else:
                back_dic[\'code\'] = 1002
                back_dic[\'msg\'] = \'您不能给自己文章点赞点踩\'
        else:
            back_dic[\'code\'] = 1003
            back_dic[\'msg\'] = \'<a href=\"/login/\">请先登录</a>\'
        return JsonResponse(back_dic)

来源：https://www.cnblogs.com/suncolor/p/16775154.html
本站部分图文来源于网络，如有侵权请联系删除。