Laravel之评论系统(终)之回复点赞功能

用Laravel框架开发一个简单的评论系统

image description

Laravel之评论系统(终)之回复点赞功能

  1. 我们在第一篇文章的时候,曾经创建过一个CommentController,现在我们将其内容补齐,再添加两个方法,删除评论及点赞功能,代码如下:

    /**
     * 删除某一条评论
     * @param  Request $request [description]
     * @return [type]           [description]
     */
    public function deleteComment(Request $request){
        $uid = Auth::user()->id;
        $id = $request->get('id');
        $article_id = $request->get('aid');
        $where = [
            'user_id' => $uid,
            'id' => $id,
            'commentable_id' => $article_id,
        ];
        $comment = $this->comment->with('thumbs')->where($where)->first();

        if($comment){
            if($comment->thumbs()->count()>0){
                $ids = $comment->thumbs()->get();
                $id_arr = [];
                foreach ($ids as $key => $value) {
                    $id_arr[] = $value->id;
                }
               $this->thumb->destroy($id_arr); 
            }
            $comment->delete();
            $response = ['status'=>'success'];
        }else{
            $response = ['status'=>'failed'];
        }

        return response()->json($response);
    }

    /**
     * 文章评论的点赞情况
     * @param  Request $request [description]
     * @return [type]           [description]
     */
    public function showThumb(Request $request){
        $thumb_handle = $request->get('thumb_type');
        $comment_id = $request->get('id');
        $uid = Auth::user()->id;

        //默认返回成功状态
        $response = ['status'=>'success'];

        if($thumb_handle=='thumbLike'){
            //执行喜欢操作时,先检查该用户之前是否是不喜欢状态;
            $is_unlike = $this->thumb->where(['user_id' => $uid,'comment_id' => $comment_id])->first();

            if($is_unlike){
                //如果之前为不喜欢状态,则直接修改状态即可
                $res = $is_unlike->update(['status'=>1]);
            }else{
                $data = [
                    'user_id' => $uid,
                    'comment_id' => $comment_id,
                    'status' => 1,
                ];
                $res = $this->thumb->create($data);
            }
            
            //只有出现错误时,才会返回状态给前端;
            //如果没有问题的话,就不返回消息给前端,因为前端的一些样式已经设置完成
            if(!$res){
                $response = ['status'=>'failed','handleType'=>'Likecreate'];
            }
        }else if($thumb_handle=='thumbLikeOver'){
            $res = $this->thumb->where(['user_id' => $uid,'comment_id' => $comment_id])->delete();

            if(!$res){
                $response = ['status'=>'failed','handleType'=>'Likedelete'];
            }
        }else if($thumb_handle=='thumbUnLike'){
            //执行不喜欢操作前,先检查该用户之前是否是喜欢的状态
            $is_like = $this->thumb->where(['user_id' => $uid,'comment_id' => $comment_id])->first();
            if($is_like){
                //如果之前为喜欢状态,则直接修改状态即可
                $res = $is_like->update(['status'=>0]);
            }else{
                $data = [
                    'user_id' => $uid,
                    'comment_id' => $comment_id,
                    'status' => 0,
                ];
                $res = $this->thumb->create($data);
            }

            if(!$res){
                $response = ['status'=>'failed','handleType'=>'UnLikecreate'];
            }

        }else if($thumb_handle=='thumbUnLikeOver'){
            $res = $this->thumb->where(['user_id' => $uid,'comment_id' => $comment_id])->delete();

            if(!$res){
                $response = ['status'=>'failed','handleType'=>'UnLikedelete'];
            }

        }else{
            $response = ['status'=>'errors'];
        }
        return response()->json($response);
    }

添加对应的路由


    Route::post('blog/comment/delete','CommentController@deleteComment');//删除评论

    Route::post('blog/comment/thumb','CommentController@showThumb');//评论的点赞或鄙视
  1. 后端处理完成,下面进行前端的js编写。代码如下:

    //评论回复
    $('.comment_reply').click(function(){
        var at = $(this).attr('data-comment');
        var n = $(this).attr('data-comment-name');
        $('.comment_content').val('@'+at+' ');
        $('.reply_author').val('@'+at+' ');
        $('.reply_author_name').val(n);
    });

    //评论删除
    $('.comment_del').click(function(){
        var id = $(this).attr('data-comment');
        var aid = "{{$post->id}}";
        var url = "{{url('/blog/comment/delete')}}";
        var data = "id="+id+"&aid="+aid;
        myalert('确定需要该条评论么,删除后将不可再出现?','make-sure',url,data);
    });

    //点赞
    var thumb_url = "{{url('/blog/comment/thumb')}}";
    $('.comment_like').click(function(){
        var e = $(this);
        var id = e.attr('data-comment');
        var num = 0;
        if(e.find('.like_t')){
            num = Number(e.find('.like_t').text());
        }
        var thumb_type = 'thumbLike'
        if(e.children('i').hasClass('am-text-success')){
            //即取消赞
            thumb_type = 'thumbLikeOver';
            var new_num = num-1;
            if(new_num<=0){
                e.find('.like_t').remove();
            }else{
                e.find('.like_t').html(new_num);
            }
            e.children('i').removeClass('am-text-success');
        }else{
            //即添加赞
            var new_num = num+1;
            if(new_num==1){
                e.append('<big class="like_t" style="margin-left:3px;">1</big>');
            }else{
                e.find('.like_t').html(new_num);
            }
            e.children('i').addClass('am-text-success');
        }
        var old_unlike = false;
        var old_unlike_num = 0;
        if(e.next('.comment_unlike').children('i').hasClass('am-text-danger')){
            e.next('.comment_unlike').children('i').removeClass('am-text-danger');
            e.parents('header').next('div').removeClass('downvoted');
            //同时也需要对不喜欢的数量进行递减
            old_unlike_num = Number(e.next('.comment_unlike').find('.unlike_t').text());
            if(old_unlike_num-1==0){
                e.next('.comment_unlike').find('.unlike_t').remove();
            }else{
                e.next('.comment_unlike').find('.unlike_t').html(old_unlike_num-1);
            }
            old_unlike = true;
        }
        var data='id='+id+'&thumb_type='+thumb_type;

        $.ajax({
            url:thumb_url,
            type:"POST",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            },
            data:data,
            success:function(msg){
                if(msg.status=='failed'){
                    var handle = msg.handleType;
                    if(handle=='Likecreate'){
                        //用户操作前是没有点赞的,所以要进行回退操作,回复原样
                        if(num==0){
                            e.find('.like_t').remove();
                        }else{
                            e.find('.like_t').html(num);
                        }
                        e.children('i').removeClass('am-text-success');
                        if(old_unlike){
                            e.next('.comment_unlike').children('i').addClass('am-text-danger');
                            e.parents('header').next('div').addClass('downvoted');
                            if(old_unlike_num==1){
                                e.next('.comment_unlike').append('<big class="unlike_t" style="margin-left:3px;">1</big>');
                            }else{
                                e.next('.comment_unlike').find('.unlike_t').html(old_unlike_num);
                            }
                        }
                        
                    }else if(handle=='Likedelete'){
                        //用户操作前是有点赞的
                        if(num==1){
                            e.append('<big class="like_t" style="margin-left:3px;">1</big>');
                        }else{
                            e.find('.like_t').html(num);
                        }
                        e.children('i').addClass('am-text-success');
                    }
                }else if(msg.status=='errors'){
                    myalert('操作失败,可能是网络问题或点击过快,请刷新页面后重试!');
                }
            }
        });
    });

    //鄙视
    $('.comment_unlike').click(function(){
        var e = $(this);
        var id = e.attr('data-comment');

        var thumb_type = 'thumbUnLike';
        var unlike_num = 0;
        if(e.find('.unlike_t')){
            unlike_num = Number(e.find('.unlike_t').text());
        }
        if(e.children('i').hasClass('am-text-danger')){
            //即取消不喜欢
            thumb_type = 'thumbUnLikeOver';
            var new_unlike_num = unlike_num-1;
            if(new_unlike_num<=0){
                e.find('.unlike_t').remove();
            }else{
                e.find('.unlike_t').html(new_unlike_num);
            }
            e.children('i').removeClass('am-text-danger');
            e.parents('header').next('div').removeClass('downvoted');
        }else{
            //即添加不喜欢
            var new_unlike_num = unlike_num+1;
            if(new_unlike_num==1){
                e.append('<big class="unlike_t" style="margin-left:3px;">1</big>');
            }else{
                e.find('.unlike_t').html(new_unlike_num);
            }
            e.children('i').addClass('am-text-danger');
            e.parents('header').next('div').addClass('downvoted');
        }
        var old_like = false;
        var num = 0;
        if(e.prev('.comment_like').find('.like_t')){
            num = Number(e.prev('.comment_like').find('.like_t').text());
        }
        if(e.prev('.comment_like').children('i').hasClass('am-text-success')){
            e.prev('.comment_like').children('i').removeClass('am-text-success');
            if(num!=0){
                var new_num = num-1;
                if(new_num==0){
                    e.prev('.comment_like').find('.like_t').remove();
                }else{
                    e.prev('.comment_like').find('.like_t').html(new_num);
                }
            }
            old_unlike = true;
        }

        var data='id='+id+'&thumb_type='+thumb_type;

        $.ajax({
            url:thumb_url,
            type:"POST",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            },
            data:data,
            success:function(msg){
                if(msg.status=='failed'){
                    var handle = msg.handleType;
                    if(handle=='UnLikecreate'){
                        //用户操作前是没有不喜欢的,所以要进行回退操作,回复原样
                        e.children('i').removeClass('am-text-danger');
                        e.parents('header').next('div').removeClass('downvoted');
                        if(old_like){
                            e.prev('.comment_like').children('i').addClass('am-text-success');
                            if(num==1){
                                e.prev('.comment_like').find('.like_t').html('<big class="like_t" style="margin-left:3px;">1</big>');
                            }else{
                                e.prev('.comment_like').find('.like_t').html(num+1);
                            }
                        }
                        
                    }else if(handle=='UnLikedelete'){
                        //用户操作前是有不喜欢的
                        if(unlike_num==1){
                            e.append('<big class="unlike_t" style="margin-left:3px;">1</big>');
                        }else{
                            e.find('.unlike_t').html(unlike_num);
                        }
                        e.children('i').addClass('am-text-danger');
                        e.parents('header').next('div').addClass('downvoted');
                    }
                }else if(msg.status=='errors'){
                    myalert('操作失败,可能是网络问题或点击过快,请刷新页面后重试!');
                }
            }
        });

    });

到此为止,在laravel框架上开发评论系统即全部完成。

END