.jpg)
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于laravel5實(shí)現(xiàn)嵌套評論的形式（代碼詳解），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對你有所幫助。
經(jīng)常我們看見評論顯示形式有很多，比如’@’某某，又或者像知乎的收縮式的評論，又或者是嵌套式的評論，那么最一開始也是最常見的就是嵌套式評論，因?yàn)檫@個更加醒目.
準(zhǔn)備工作
1、設(shè)計(jì)三張表users,posts,comments，表結(jié)構(gòu)如下:
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
Schema::create('comments', function (Blueprint $table) { $table->increments('id'); $table->integer('user_id')->index(); $table->integer('post_id')->index(); $table->integer('parent_id')->index()->default(0); $table->text('body'); $table->timestamps(); });
2.Model層:
Post.php文件
/** * 一篇文章有多個評論 * @return IlluminateDatabaseEloquentRelationsHasMany */ 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 IlluminateDatabaseEloquentRelationsBelongsTo */ public function owner() { return $this->belongsTo(User::class, 'user_id'); } /** * 這個評論的子評論 * @return IlluminateDatabaseEloquentRelationsHasMany */ public function replies() { return $this->hasMany(Comment::class, 'parent_id'); }
邏輯編寫
我們所要實(shí)現(xiàn)的嵌套評論其實(shí)在我們準(zhǔn)備工作中已經(jīng) 有點(diǎn)思路了，我們首先將一篇文章顯示出來，同時(shí)利用文章與評論的一對多關(guān)系，進(jìn)行顯示所有的評論，但是我們的評論里面涉及到一個字段就是parent_id，這個字段其實(shí)非常的特殊，我們利用這個字段來進(jìn)行分組, 代碼就是上面的return $this->comments()->with(‘owner’)->get()->groupBy(‘parent_id’),具體的過程如下:
web.php文件
Auth::loginUsingId(1); //用戶id為1的登錄 //顯示文章和相應(yīng)的評論 Route::get('/post/show/{post}', function (AppPost $post) { $post->load('comments.owner'); $comments = $post->getComments(); $comments['root'] = $comments['']; unset($comments['']); return view('posts.show', compact('post', 'comments')); }); //用戶進(jìn)行評論 Route::post('post/{post}/comments', function (AppPost $post) { $post->comments()->create([ 'body' => request('body'), 'user_id' => Auth::id(), 'parent_id' => request('parent_id', null), ]); return back(); });
視圖代碼
視圖方面我們需要實(shí)現(xiàn)嵌套，那么隨著用戶互相評論的越來越多的話，那么嵌套的層級也就越多，所以說，我們這里需要使用各小技巧來顯示整個評論，我們使用@include()函數(shù)來顯示，那么我們試圖的結(jié)構(gòu)如下:
- comments comments.blade.php form.blade.php list.blade.php - posts show.blade.php
代碼如下:
show.blade.php
<!DOCTYPE html> <html> <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 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">回復(fù)</button> </form>
list.blade.php
@foreach($collections as $comment) @include('comments.comment',['comment'=>$comment]) @endforeach
最終效果圖如下
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載。
THE END
.png)
