文章的點贊點踩製作

文章的添加

博客園打開需要拷貝的文章，右鍵檢查--》選擇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)