郑统京 发表于 2022-11-12 12:35:48

六、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)

页: [1]
查看完整版本: 六、BBS只点赞点踩如何是实现