文章点赞

前端

技术点:
1.前端发送ajax请求,一开始使用post方法,但是老是通不过csrf防护,于是直接改成了get
2.当确定点赞还是踩的时候,数字要+1,这个时候需要注意两点:
2.1.var v=$("#digg_count").text(); v=parseInt(v)+1;因为拿到的值是字符串,要转换成int类型
2.2.重复点赞或者踩的时候要设置提示语,并且要定时清空,定时用到了settimeout函数

{% extends 'base.html' %}

{% block page-main %}
    <div class="article-detail">
        <h1>{{ article.title }}</h1>
        <p>{{ article.articledetail.content | safe }}</p>
    </div>
    <div>
        <div style="margin-top: 50px;margin-left: 500px; " class="action">
            <span class="glyphicon glyphicon-thumbs-up action1" id="digg_count">({{ article.up_count }})</span>

            <span class="glyphicon glyphicon-thumbs-down less action1"
                  id="bury_count">({{ article.down_count }})</span>
        </div>
    </div>
    <div id="error" style="color: red;"></div>

    <div class="clear"></div>

    <script>
        $(".action .action1").click(function () {
            {% comment %}如果当前点击的块中有...up这个类就是true{% endcomment %}
            var is_up = $(this).hasClass("glyphicon-thumbs-up");
            var article_id = "{{ article.pk }}";
            $.ajax({
                url:"/blog/up_down/",
                type:"get",
                data:{
                    "is_up":is_up,
                    "article_id":article_id,
                    {#"csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()#}
                },
                success:function (data) {
                    if(data.status){
                        if(is_up){
                            var v=$("#digg_count").text();
                            v=parseInt(v)+1;
                            $("#digg_count").text(v);
                        }
                        else {
                            var v=$("#bury_count").text();
                            v=parseInt(v)+1;
                            $("#bury_count").text(v);
                        }
                    }
                    else{
                        if($(".action").click()){
                            $("#error").html("您已经推荐过");
                            setTimeout(function () {
                                $("#error").html("");
                            },1000)
                        }
                        else if($(".action1").click()){
                            $("#error").html("您已经反对过");
                            setTimeout(function () {
                                $("#error").html("");
                            },1000)
                        }
                    }
                }
            })
        })
    </script>

{% endblock %}

后端

后端接受处理ajax请求
技术点:
1.is_up=json.loads(is_up) # 将字符串转化成bool值前端发送的时候虽然是布尔类型,但是发送过来之后会变成字符串类型,要是想把is_up存到数据库,需要转换成布尔类型
2.点赞或者踩之后需要把文章的up_count字段加1,这里不能直接加1,需要导入模型类的F函数models.Article.objects.filter(pk=article_id).update(up_count=F("up_count")+1)

import json
from django.db.models import F
def up_down(request):
    print(11111)
    # print(request.GET)
    article_id = request.GET.get("article_id")
    is_up = request.GET.get("is_up")
    user = request.user
    is_up=json.loads(is_up) # 将字符串转化成bool值
    response = {"status":True,}
    try:
        models.ArticleUpDown.objects.create(user=user,article_id=article_id,is_up=is_up)
        models.Article.objects.filter(pk=article_id).update(up_count=F("up_count")+1)
    except Exception as e:
        response["status"] = False
        print(22222)
    data = {
        
    }
    return JsonResponse(response)