一、點贊功能

 先看下前端的程式碼，如下這段程式碼是我直接從部落格園上爬下來的

        <div class="poll clearfix">
            <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>
            </div>
        </div>

這裡需要注意，同時也要把css檔案也扒下來，然後放在的我們的css的block塊中

{% block css %}
    <link rel="stylesheet" href="/static/css/article.css">
{% endblock %}

然後我們看下js的程式碼，我們這裡是用ajax的方式實現點贊和踩的功能，這裡我們把點贊和踩的js程式碼單獨放在了一個js檔案中，然後在script標籤中引入

<script src="/static/js/for_artic_desc.js"></script>

下面我們重點看下js的程式碼

 $("#div_digg .action").click(function () {
            if ($(".info").attr("username")){
                 var is_up = $(this).hasClass("diggit");
            // {#            如果有diggit這個class，則為true，如果沒有diggit，則為false，如果為true，則為贊，如果為false則為踩#}
            //
            // {#            var article_id = {{ article_obj.nid }};#}
            // {##}
            // {#            var article_title = {{ article_obj.title }};#}
            // {#            如果在js中使用模板渲染的話，如果直接按照上面的方式渲染#}
            // {#            #}
            // {#            則如果渲染出來的值是字串，則js會把他當做變數，會報錯#}
            // {#            則如果渲染出來的值是數字，則js會把他當做一個數字，不會報錯#}
            // {#            #}
            // {#            #}
            // {#            為了解決這個問題，如果我們在js要使用模板語言，則對大括號外面加一個引號就可以了#}

            // var article_id = "{{ article_obj.nid }}";
            var article_id = $(".info").attr("artic_id");


            var article_title = "{{ article_obj.title }}";

            $.ajax(
                {
                    url: "/app1/up_down/",
                    type: "post",
                    data: {
                        "article_id": article_id,
                        "article_title": article_title,
                        "is_up": is_up,
                        "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),

                    },
                    success: function (data) {
                        data = JSON.parse(data);
                        if (data.state) {
                            if (is_up) {
                                var val = $("#digg_count").text();
                                val = parseInt(val) + 1;
                                $("#digg_count").text(val)
                            } else {
                                var val = $("#bury_count").text();
                                val = parseInt(val) + 1;
                                $("#bury_count").text(val);
                            }
                        } else {
                            $("#digg-tips").text(data.error_code);
                            setTimeout(function () {
                                $("#digg_tips").text("aaaaaaaa");
                                console.log("123")
                            },1000)
                        }
                    }
                }
            )

        }else {
                location.href = "/app1/login/"
            }
 })

上面的程式碼比較簡單，就是獲取需要的值，然後通過ajax通過post方式傳送給後端

首先判斷有沒有登陸

　　如果沒有登陸則跳轉到登陸頁面

　　如果有登陸，則首先拿到is_up這個變數的值，這裡我們通過判斷我們點選的標籤是否有某個class屬性來判斷，如果有則is_up為true，如果沒有，則is_up為false

　　這裡還需要注意，在js程式碼也可以拿到大括號裡的值，但是必須要用引號括起來，不然js會把大括號中的值當做一個變數來處理

這裡還有一個小技巧，我們可以寫一個標籤，然後這個為這個標籤加上自定義的屬性，而這些屬性的值就是我們要發給後端的值，我們就可以直接找到這個標籤，然後通過attr方法獲取到相應的屬性，然後就可以傳送給後端就可以了

比如我們這裡就用這個標籤通過自定義的方式儲存我們要往後端傳送的資料

<div class="info" artic_id="{{ article_obj.nid }}" username="{{ request.user.username }}"></div>

這裡還要注意，ajax傳送資料，需要在data中新增下面的程式碼，才可以解決crsf問題

"csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),

success中的函式就很簡單了

success: function (data) {
                        data = JSON.parse(data);
                        if (data.state) {
                            if (is_up) {
                                var val = $("#digg_count").text();
                                val = parseInt(val) + 1;
                                $("#digg_count").text(val)
                            } else {
                                var val = $("#bury_count").text();
                                val = parseInt(val) + 1;
                                $("#bury_count").text(val);
                            }
                        } else {
                            $("#digg-tips").text(data.error_code);
                            setTimeout(function () {
                                $("#digg_tips").text("aaaaaaaa");
                                console.log("123")
                            },1000)
                        }
                    }

最後我們看下後端的程式碼

from django.views.decorators.csrf import csrf_exempt
from django.db.models import F
# @csrf_exempt
import json
def up_down(request):
    ret = {"state":True,"error_code":""}
    print(request.POST.get("article_id"))
    print(request.POST.get("article_title"))
    is_up = request.POST.get("is_up")

    user_obj = models.Userinfo.objects.get(username=request.user)
    try:
        models.ArticleUpDown.objects.create(
            user = user_obj,
            article = models.Article.objects.get(nid=request.POST.get("article_id")),
            is_up = json.loads(is_up)
        )
    except Exception as e:
        flag = models.ArticleUpDown.objects.filter(user=user_obj,article=models.Article.objects.get(nid=request.POST.get("article_id")))[0].is_up
        if flag:
            if json.loads(is_up):
                ret = {"state": False, "error_code": "你已經頂過該部落格，不能在頂了"}
            else:
                ret = {"state": False, "error_code": "你已經頂過該部落格，不能在踩了"}
        else:
            if json.loads(is_up):
                ret = {"state": False, "error_code": "你已經踩過該部落格，不能在頂了"}
            else:
                ret = {"state": False, "error_code": "你已經踩過該部落格，不能在踩了"}
    else:
        if json.loads(is_up):
            models.Article.objects.filter(nid=request.POST.get("article_id")).update(
                up_count = F("up_count") + 1
            )
        else:
            models.Article.objects.filter(nid=request.POST.get("article_id")).update(
                down_count = F("down_count") + 1
            )
    return HttpResponse(json.dumps(ret))

後端的python程式碼就非常熟悉了，這裡就不做講解了

二、評論功能