Laravel 5~嵌套评论的实现

经常我们看见评论显示形式有很多,比如'@'某某,又或者像知乎的收缩式的评论,又或者是嵌套式的评论,那么最一开始也是最常见的就是嵌套式评论,因为这个更加醒目.

准备工作

1.设计三张表users,posts,comments,表结构如下:

users

        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });

posts

        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->integer('user_id')->index();
            $table->text('content');
            $table->timestamps();
        });

comments
其中parent_id主要表示该评论所属评论的id,如果不属于任何评论则为null

     Schema::create('comments', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id')->index();
            $table->integer('post_id')->index();
            $table->integer('parent_id')->index()->nullable();
            $table->text('body');
            $table->timestamps();
        });
2.表之间的关系如下

Post.php文件

    /**
     * 一篇文章有多个评论
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function comments()
    {
        return $this->hasMany(Comment::class);
    }

    /**
     * 获取这篇文章的评论以parent_id来分组
     * @return static
     */
    public function getComments()
    {
        return $this->comments()->with('owner')->get()->groupBy('parent_id');
    }

Comments.php文件

    /**
     * 这个评论的所属用户
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function owner()
    {
        return $this->belongsTo(User::class, 'user_id');
    }

    /**
     * 这个评论的子评论
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function replies()
    {
        return $this->hasMany(Comment::class, 'parent_id');
    }

逻辑编写

我们所要实现的嵌套评论其实在我们准备工作中已经 有点思路了,我们首先将一篇文章显示出来,同时利用文章与评论的一对多关系,进行显示所有的评论,但是我们的评论里面涉及到一个字段就是parent_id,这个字段其实非常的特殊,我们利用这个字段来进行分组, 代码就是上面的return $this->comments()->with('owner')->get()->groupBy('parent_id'),具体的过程如下:
web.php文件

\Auth::loginUsingId(1); //用户id为1的登录

//显示文章和相应的评论
Route::get('/post/show/{post}', function (\App\Post $post) {
    $post->load('comments.owner');
    $comments = $post->getComments();
    $comments['root'] = $comments[''];
    unset($comments['']);
    return view('posts.show', compact('post', 'comments'));
});

//用户进行评论
Route::post('post/{post}/comments', function (\App\Post $post) {
    $post->comments()->create([
        'body' => request('body'),
        'user_id' => \Auth::id(),
        'parent_id' => request('parent_id', null),
    ]);
    return back();
});

视图代码

视图方面我们需要实现嵌套,那么随着用户互相评论的越来越多的话,那么嵌套的层级也就越多,所以说,我们这里需要使用各小技巧来显示整个评论,我们使用@include()函数来显示,那么我们试图的结构如下:

  • comments

    • comments.blade.php
    • form.blade.php
    • list.blade.php
  • posts

    • show.blade.php

代码如下:
show.blade.phpa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="margin-top: 100px">
    <div class="col-md-10 col-md-offset-1">
        <h2>{{$post->title}}</h2>
        <h4>{{$post->content}}</h4>
        <hr>
        @include('comments.list',['collections'=>$comments['root']])
        <h3>留下您的评论</h3>
        @include('comments.form',['parentId'=>$post->id])
    </div>
</div>
</body>
</html>

comment.blade.php

<div class="col-md-12">
    <h5><span style="color:#31b0d5">{{$comment->owner->name}}</span>:</h5>
    <h5>{{$comment->body}}</h5>

    @include('comments.form',['parentId'=>$comment->id])

    @if(isset($comments[$comment->id]))
        @include('comments.list',['collections'=>$comments[$comment->id]])
    @endif
    <hr>
</div>

form.blade.php

<form method="POST" action="{{url('post/'.$post->id.'/comments')}}" accept-charset="UTF-8">
    {{csrf_field()}}

    @if(isset($parentId))
        <input type="hidden" name="parent_id" value="{{$parentId}}">
    @endif

    <div class="form-group">
        <label for="body" class="control-label">Info:</label>
        <textarea id="body" name="body"  class="form-control" required="required"></textarea>
    </div>
    <button type="submit" class="btn btn-success">回复</button>
</form>

list.blade.php

@foreach($collections as $comment)
    @include('comments.comment',['comment'=>$comment])
@endforeach

最后实现的效果图如下:

本作品采用《CC 协议》,转载必须注明作者和本文链接
LaravelChen
本帖由 Summer 于 4年前 加精
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 33
Corwien

不错,图文并茂!

4年前 评论
Ysll

不错不错 学习学习

4年前 评论

@Ysll 交流交流哈哈

4年前 评论

这个我在laracasts 看过

4年前 评论

How系列

4年前 评论

希望出个 @ 功能的实现,比起嵌套更喜欢这种

4年前 评论

@carlclone 这和多少评论没有什么关系,只要是有父评论,都可以嵌套,至于互相回复的次数过多的情况,造成界面上面不打美观,其实解决办法也很简单,你可以判断当前的嵌套层数,然后超过你设定的层数,就不再缩进显示了,那么就可以了!

4年前 评论
sainmu

show.blade.php 里边这个 @include('comments.form',['parentId'=>$post->id]) 不应该加,['parentId'=>$post->id]吧!

4年前 评论
sainmu

@chenxin 还有,所有没有评论的页面错误:Undefined index:

4年前 评论

@李兮没有评论的话你用@if进行判断,比如

@if($comments->count())
显示评论
@else 
暂时没有评论
@endif
4年前 评论

@chenxin 如何处理分页呢?

4年前 评论

中间某一层的评论删了呢。。

4年前 评论

@Specs 你既然已经删掉中间的,那么你直接它的子评论也删了呗。。。。。。。

4年前 评论

@chenxin 中间某层用户自己删掉了自己的,那把别人在下面的回复也都删了也不好。。

4年前 评论

@Specs 诶!你既然父评论都没了,留着子评论干哈!表示和谁在说话?

4年前 评论

@chenxin @Specs use SoftDelete,“该评论已删除”。

4年前 评论

@springjk
@Specs 用软删除蛮好的,我一般直接在model里面(下面这个好比一个帖子删除了,顺带删除其相应的评论和通知)

    protected static function boot()
    {
        parent::boot();
        static::deleting(function ($discussion) {
            $discussion->comments()->delete();
            $discussion->notifications()->delete();
        });
    }
4年前 评论

file

安装好打开首页就出现这个我看了PostsController文件有的
这是什么情况?

3年前 评论

@jameszhu 你自己看看PostsController额拼写。。。

3年前 评论

@LaravelChen 看到了,把routes/web.php里的COntroller改回来了,然后刷新网页一片空白

3年前 评论

@jameszhu 命名空间加了没,其实出现这些问题都是基础性的东西,

3年前 评论

:convenience_store:

3年前 评论

求大神帮忙看一下为什么这样啊。搞了一个晚上没搞明白。全程按大神要求做的,环境valet.

file

3年前 评论

评论的图片和视频直接放到 body 里面吗?

6个月前 评论

如何根据时间进行排序呢,

6个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!