点赞功能

Posted 2020-11-10 天高任我飞

1.绑定事件

1.使用jQuery，当点击点赞或者反对时，就触发设定的事件。
2.事件触发后要反对点击的点赞还是反对，使用hasClass判断具体的class是否存在，如果点赞中的diggit存在结果为真就设定为电站，结果为假就是反对，
3.获取到点赞文章的pk，在js中到的变量不能直接用{{article.pk}},原因是未定义，使用"{{ article.pk }}"

2.发送ajax请求

1.设定路由和方法，将点赞和反对，文章发送过去，同时注意csrf保护机制
data={article_id,is_up}
2.在url中添加路由

3.views中处理

1.接收到传过来的文章id和认定过的结果is_up，但is_up的类型为‘true‘，需要反序列化
2.得到用户对象 user=request.user
3.设置状态，来标识是第一次来点赞，如果不是第一次，就变换状态response={"state":True}
4.如果是第一次操作，在用户点赞表中添加用户对象，文章id和操作类型，并在文章表中将点赞数据+1
  如果不是第一次操作，将状态设置为False，并获取到操作第一次的操作类型
5.数据存在字典中，返回时需要序列化  return JsonResponse(response)

4.响应结果给ajax

1.响应结果给ajax后，首先判断是否为操作是否为第一次
2.如果操作为第一次，判断是点赞还是踩灭，获取到响应页面上的值，将值加1
3.如果不是第一次提交，判断第一次提交的操作类型，显示相应的提示语

5.在js中返回指定页面

1.location.href = "/login/"
2.在js中改变图片标签的链接： $(this)[0].src += "?";


点赞功能代码

‘‘‘
{% extends ‘base.html‘ %}  继承母板
{% block page-main %}

    <div class="article-detail">
        <h1>{{ article.title }}</h1>
        <p>{{ article.articledetail.content|safe }}</p>
    </div>
    <div id="div_digg">
        <div class="diggit action">
            <span class="diggnum" id="digg_count">{{ article.up_count }}</span>
        </div>
        <div class="buryit action">
            <span class="burynum" id="bury_count">{{ article.down_count }}</span>
        </div>
        <div class="clear"></div>
        <div class="diggword" id="digg_tips" style="color: red;"></div>
    </div>
{% endblock %}
{%  block page_js %}
    {% csrf_token %}
    <script>
        $("#div_digg .action").on("click",function () {
            //判断是点赞还是踩灭,注意不能是diggnum
            var is_up=$(this).hasClass("diggit");
            console.log(is_up);
             //获取到文章id 在js中需要加引号
            var article_id="{{ article.pk }}";
            $.ajax({
                url:"/blog/up_down/",
                type:"post",
                data:{
                    "is_up":is_up,
                    "article_id":article_id,
                    "csrfmiddlewaretoken":$("[name=‘csrfmiddlewaretoken‘]").val(),
                },
                success:function(data){
                    alert(data);
                    //如果为真，说明是第一次操作
                    //console.log(data.state); 都可以使用
                    console.log(data["state"]);
                    if(data.state){
                        if(is_up){
                            var val=$("#digg_count").text();  //点赞加1
                            val=parseInt(val)+1;
                            console.log(val);
                            $("#digg_count").text(val);
                        }else{
                             var val=$("#bury_count").text();
                            val=parseInt(val)+1;
                            $("#bury_count").text(val); //踩加1
                        }
                    }else{
                        var val=66;
                        console.log(val);
                        if(data.first_action){
                              $("#digg_tips").html("您已经推荐过");
                        }else {
                             $("#digg_tips").html("您已经反对过");

                        }
                    }



                }

                }

            )

        })
    </script>
{% endblock %}
‘‘‘

HTML

‘‘‘
from django.http import JsonResponse
import json
from django.db.models import F
def up_down(request):
    if request.method =="POST":
        rep=json.loads(request.POST.get("is_up"))  #传过来的是字符串类型,将‘true‘转换成True
        article_id=request.POST.get("article_id")
        print(article_id)
        print(rep,type(rep))
        user=request.user
        response={"state":True}
        try:
            # print("走了")
            models.ArticleUpDown.objects.create(user=user,article_id=article_id,is_up=rep)
            models.Article.objects.filter(pk=article_id).update(up_count=F("up_count")+1)
            # print("第一次")
        ###当点过赞后，再次点赞后，由于ArticleUpDown表中已经创建过这个用户，因此走except
        except Exception as e:
            response["state"]=False
            response["first_action"]=models.ArticleUpDown.objects.filter(user=user,article_id=article_id).first().is_up
            # print("第二次")
        return JsonResponse(response) #response是个字典，要序列化处理


‘‘‘

Views