Laravel之评论系统(四)之评论展示

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

image description

Laravel之评论系统(四)之评论展示

首先,先确定评论内容列表样式,此处我这边就以本站的回复列表作为例子进行说明

因为我用的Amaze UI前端框架,所以就以其官网的评论列表作为样式模板,具体请看官方文档,传送门,具体最终效果如下:

评论列表效果

  1. 第一步,我们需要获得数据库中存储的评论内容,我们上一篇内容中提到的文章表对应的model文件Article,为了方便,我们直接在Article文件中进行评论内容的处理,不在controller中进行操作了,代码如下:
    namespace App\Models;

    use App\Scopes\DraftScope;
    use Auth;
    use Carbon\Carbon;
    use Illuminate\Database\Eloquent\Model;
    use Illuminate\Database\Eloquent\SoftDeletes;

    class Article extends Model
    {
        use SoftDeletes;

        protected $table = 'articles';
        public $primaryKey = 'id';

        /**
         * The attributes that should be mutated to dates.
         *
         * @var array
         */
        protected $dates = ['published_at', 'created_at', 'deleted_at'];

        /**
         * The attributes that are mass assignable.
         *
         * @var array
         */
        protected $fillable = [
            //数据库白名单字段,此处被我省略了
        ];

        public function comments(){
            return $this->hasMany('App\Models\Comment','commentable_id','id');
        }

        /**
         * 返回每篇文章的评论信息
         * @return [type] [description]
         */
        public function commentList()
        {
            //文章ID
            $article_id = $this->id;
            //根据前端样式模板,确定评论列表的头及尾
            $ul_s = '<ul class="am-comments-list am-comments-list-flip">';
            $ul_e = '</ul><hr><p style="text-align: center;"><a href="'.url('/blog/more_comment?blogSlug='.$this->slug).'" target="_blank">点击查看更多评论>></a></p>';
            
            $li_comment = '';//具体的每条评论类别内容,li标签
            $comments = $this->comments()->with(['user','thumbs'])->orderBy('created_at','asc')->limit(10)->get();
            $return = '还没有任何评论哦!赶快来抢个沙发啦!';//如果该篇文章没有评论内容,则默认展示的内容
            //当前登陆用户的id
            if(!Auth::guest()){
                $auth_uid = Auth::user()->id;
            }
            if(!$comments->isEmpty()){
                foreach ($comments as $key => $comment) {
                    //评论人的信息
                    $author_name = empty($comment->user->nickname) ? $comment->user->name : $comment->user->nickname;
                    //头像
                    $avatar = empty($comment->user->avatar) ? asset('images/default.png') : asset('uploads/avatar/60x60/'.$comment->user->avatar);
                    $time = Carbon::parse($comment->created_at)->timestamp;
                    $date_time = date('Y年m月d日 H:i:s',$time);//评论时间
                    $content = json_decode($comment->content,true);
                    $comment_content = $content['html'];//数据库存储的评论内容
                    $user_url = auth_user_url($comment->user->name);//评论人个人中心连接

                    //下面主要是回复及点赞功能的一些图标样式处理
                    $li_class = '';
                    if($key%2!=0){
                        //根据Amaze UI官方的样式,我这里使用的是 左右交错的评论列表
                        $li_class = 'am-comment-flip';
                    }
                    $is_has_del = '';//是否有删除按钮
                    $is_has_love = '';//是否有喜欢按钮
                    $is_has_comment = '';//是否有回复按钮
                    $unlike_content_class = '';//不喜欢时评论内容的样式(评论内容会变的模糊)
                    //只有在用户登陆的情况下才会有回复等功能
                    if(!Auth::guest()){
                        //只有在登陆情况下,点赞的信息才有意义
                        //每个评论的点赞信息
                        $thumbs = $comment->thumbs()->get();
                        $like_thumb_num = '';
                        $unlike_thumb_num = '';
                        $like_class = '';
                        $unlike_class = '';
                        $like_user = [];//当前评论点赞(喜欢)的用户id集合
                        $unlike_user = [];//当前评论鄙视(不喜欢)的用户id集合
                        
                        foreach ($thumbs as $k => $thumb) {
                            $status = $thumb->status;
                            $thumb_user_id = $thumb->user_id;
                            if($status==0){
                                $unlike_user[] = $thumb_user_id;
                            }else{
                                $like_user[] = $thumb_user_id;
                            }
                        }
                        //当前评论点赞的人的数量
                        if(count($like_user)>0){
                            $like_thumb_num = '<big class="like_t" style="margin-left:3px;">'.count($like_user).'</big>';
                        }

                        if(count($unlike_user)>0){
                            $unlike_thumb_num = '<big class="unlike_t" style="margin-left:3px;">'.count($unlike_user).'</big>';
                        }

                        if(in_array($auth_uid, $like_user)){
                            $like_class = 'am-text-success';
                        }
                        if(in_array($auth_uid, $unlike_user)){
                            $unlike_class = 'am-text-danger';
                            //在mydefault.css文件中
                            $unlike_content_class = 'downvoted';
                        }

                        $is_has_comment = '<a class="comment_reply" data-comment="'.$author_name.'" data-comment-name="'.$comment->user->name.'" href="javascript:;" title="回复"><i class="am-icon-mail-reply am-icon-md"></i></a>';
                        if($comment->user_id==$auth_uid){
                            //当前登陆用户自己的评论内容,所以有删除按钮
                            $is_has_del = '<a class="comment_del" data-comment="'.$comment->id.'" href="javascript:;" title="删除"><i class="am-icon-trash am-icon-md"></i></a>';
                        }else{
                            //不是自己的评论,显示喜欢及不喜欢按钮
                            $is_has_love = '<a class="comment_like" data-comment="'.$comment->id.'" href="javascript:;" title="喜欢"><i class="am-icon-smile-o am-icon-md '.$like_class.'"></i>'.$like_thumb_num.'</a><a class="comment_unlike" data-comment="'.$comment->id.'" href="javascript:;" title="讨厌"><i class="am-icon-frown-o am-icon-md '.$unlike_class.'"></i>'.$unlike_thumb_num.'</a>';
                        }
                    }
                    //具体评论内容及对应的样式模板
                    $li_comment .= '<li class="am-comment '.$li_class.'">
                                        <a href="'.$user_url.'"><img alt="'.$author_name.'" src="'.$avatar.'" class="am-comment-avatar" width="48" height="48" />
                                        </a>
                                        <div class="am-comment-main">
                                            <header class="am-comment-hd">
                                                <div class="am-comment-meta">
                                                    <i class="am-icon-user"></i>
                                                    <a href="'.$user_url.'" class="am-comment-author">'.$author_name.'</a>
                                                    评论于 <time title="'.$date_time.'">'.$comment->created_at.'</time>
                                                    <a href="#reply" class="reply-floor">#'.($key+1).'</a>
                                                </div>
                                                <div class="am-comment-actions">
                                                    '.$is_has_love.$is_has_del.$is_has_comment.'
                                                </div>
                                            </header>
                                            <div class="am-comment-bd '.$unlike_content_class.'">
                                                <p>'.$comment_content.'</p>
                                            </div>
                                        </div>
                                    </li>';
                }
                $return = $ul_s.$li_comment.$ul_e;
            }
            return $return;
        }

    }

在Controller中,我们只需要正常使用数据库即可


    public function showPost(Request $request,$slug)
    {  
        DB::table('articles')->whereSlug($slug)->increment('view_count');

        $post = Article::whereSlug($slug)->firstOrFail();
        $post->page_image = empty($post->page_image) ? '' : $this->path.$post->page_image;
        $content = json_decode($post->content,true);
        $post->content_html = $content['html'];

        return view('blogs.post', ['post' => $post]);
    }
  1. 后端处理完成,现在我们只需要在前端这么调用,即可输出评论内容

    <h3 class="blog-comment">最新回复</h3>
    <hr>
    {!!  $post->commentList() !!}
    <hr>

OK,到此评论内容列表已经全部完成,还剩下点赞等功能,主要都是一些js部分,我们下一篇讲。

END