六、BBS只点赞点踩如何是实现

郑统京

点赞点踩思路构建前端如何区分用户是点赞还是点踩了，笨方法:直接写两个事件绑定，这样代码冗余
进阶方法:1、给各点赞和点踩的标签各绑定一个事件
    两个标签对应的代码一模一样，仅仅是否点赞点踩这一个参数不一样而已<script>
    //给所有的action类绑定事件
    $('.action').click(function (){
        alert($(this).hasClass('diggit'))
    })
</script>
前端代码HTML部分{#    点赞点踩样式开始#}
<div class="clearfix">
    <div id="div_digg" >
        <div class="diggit action" >  # 加action类
            <span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
        </div>
        <div class="buryit action" > 加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"> # ajax添加报错信息
        </div>
    </div>
</div>
{#    点赞点踩样式结束#}
前端代码JS部分{% block js %}
    <script>
    // 给所有的action类绑定事件
        $('.action').click(function (){
            {#alert($(this).hasClass('diggit'))#}
            let isUp = $(this).hasClass('diggit'); 判断类有没有点赞的属性，js的布尔值
            let $div = $(this); 为了实现查找点赞点踩的数据动态展示
            // 朝后端发送ajax请求
            $.ajax({
                url:'/up_or_down/',
                type:'post',
                data:{
                    'article_id':'{{ article_obj.pk }}',
                    'is_up':isUp,#后端接收的是字符串类型
                    'csrfmiddlewaretoken':'{{csrf_token}}',
                },
                success:function (args){
                    // 前端返回不用的点赞逻辑
                    if(args.code==1000){
                        $('#digg_tips').text(args.msg)
                        // 前端获取到数字加1
                        // 想获取到前端的数字
                        let oldNum = $div.children().text()
                        $div.children().text(Number(oldNum)+1)// 字符串的拼接1+1=11 11+1=111，所以一定要先转换类型

                    }else{
                        $('#digg_tips').html(args.msg) 为什么用HTML:因为要给用户返回一个可以登录的页面，后端传了A标签
                    }
                }
            })
        }){% endblock %}
后端代码import json
from django.db.models import F
def up_or_down(request):
    """
    1.校验用户是否登陆
    2.判断当前文章是否是当前用户自己写的(自己不能点自己的文章)
    3.当前用户是否已经给当前文章点过了
    4.操作数据库了
    :param request:
    :return:
    """
    if request.is_ajax():
        back_dic = {'code':1000,'msg':''}
        # 1 先判断当前用户是否登陆
        if request.user.is_authenticated(): # 前面用了auth模块的auth.login(request,user_obj)
            article_id = request.POST.get('article_id')
            is_up = request.POST.get('is_up') # 在前端是布尔值，但是传到后端变成字符串需要自己转换
            # print(is_up,type(is_up))  # true <class 'str'>
            is_up = json.loads(is_up)  # 记得转换
            # print(is_up, type(is_up))  # True <class 'bool'>
            # 2 判断当前文章是否是当前用户自己写的  根据文章id查询文章对象 根据文章对象查作者 根request.user比对
            article_obj = models.Article.objects.filter(pk=article_id).first()
            if not article_obj.blog.userinfo == request.user: 这个我也没搞懂为什么 article_obj.blog.userinfo 可以拿到用户的对象
                # 3 校验当前用户是否已经点了      哪个地方记录了用户到底点没点
                is_click = models.UpAndDown.objects.filter(user=request.user,article=article_obj)
                if not is_click:
                    # 4 操作数据库 记录数据      要同步操作普通字段
                    # 判断当前用户点了赞还是踩 从而决定给哪个字段加一
                    if is_up:
                        # 给点赞数加一
                        models.Article.objects.filter(pk=article_id).update(up_num = F('up_num') + 1) 用到了F拿到数据结果的方法
                        back_dic['msg'] = '点赞成功'
                    else:
                        # 给点踩数加一
                        models.Article.objects.filter(pk=article_id).update(down_num=F('down_num') + 1) 用到了F拿到数据结果的方法
                        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)