Laravel Vuejs 实战：开发知乎 （30-32）评论功能

1.执行命令：

php artisan make:model Comment -mc

2.数据库迁移文件：

****_create_comments_table.php文件：

评论与之前的不同在于，评论可以评论问题，也可以评论答案，还可以评论其他评论；也就是多态多对多。

可以参考： Laravel Polymorphic Relationship Example

Laravel Many to Many Polymorphic Relationship Tutorial

其次，评论可以嵌套，所以需要注意层级，上层评论的id，以及评论隐藏状态。

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateCommentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('comments', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->unsignedBigInteger('user_id')->comment("发出评论的用户的id");
            $table->text('content')->comment("评论的内容");
            $table->unsignedBigInteger('commentable_id')->comment("被评论的对象的id");
            $table->string('commentable_type')->comment("被评论的类型 问题或者答案或者评论");
            $table->unsignedBigInteger('parent_id')->nullable()->comment("嵌套评论的上级id");
            $table->unsignedSmallInteger('level')->default(1)->comment("评论属于第几层");
            $table->string('is_hidden', 8)->default("F")->comment("是否隐藏状态");
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('comments');
    }
}

执行：

php artisan migrate

3.comment模型初始设置：

//表名
protected $table = 'comments';

//必须初始赋值的
protected $fillable = ['user_id', 'content', 'commentable_id', 'commentable_type'];

4.模型关联

多态多对多

Comment.php中添加：

public function commentable()
{
    return $this->morphTo();
}

Answer.php中添加：

public function comments()
{
    return $this->morphMany(Comment::class, 'commentable');
}

<?php

namespace App;

use App\Models\Question;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

class Answer extends Model
{
    #region 支持软删除添加
    use SoftDeletes;
    protected $dates = ['deleted_at'];

    #endregion

    protected $fillable = ['user_id', 'question_id', 'content'];

    /** 一个回答只有一个回答主人
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function user()
    {
        return $this->belongsTo(User::class);
    }

    /** 一个回答只针对一个问题
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
     */
    public function question()
    {
        return $this->belongsTo(Question::class);
    }

    /**
     * @return \Illuminate\Database\Eloquent\Relations\BelongsToMany
     */
    public function userVotes()
    {
        return $this->belongsToMany(User::class, 'votes')->withTimestamps();
    }

    public function comments()
    {
        return $this->morphMany(Comment::class, 'commentable');
    }
}

Question.php中添加：

public function comments()
{
    return $this->morphMany(Comment::class, 'commentable');
}

<?php

namespace App\Models;

use App\Answer;
use App\Comment;
use App\Topic;
use App\User;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

class Question extends Model
{
    //软删除 添加
    use SoftDeletes;
    //
    protected $fillable = ['title', 'content', 'user_id'];
    //支持软删除 添加
    protected $dates = ['deleted_at'];

    public function topics()
    {
        return $this->belongsToMany(
            Topic::class,
            'questions_topics' //表名我设置的是questions_topics，可能不是系统自动解析的question_topic
        )->withTimestamps();//withTimestamps操作questions_topics表中create_at及updated_at字段的
    }

    public function user()
    {
        return $this->belongsTo(User::class);
    }

    /** scope+请求名命名的
     * @return bool
     */
    public function scopePublished($query)
    {
        return $query->where('is_hidden', 'F');//等于F表示不隐藏
    }


    /** 一个问题有多个回答
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function answers()
    {
        return $this->hasMany(Answer::class);
    }


    public function followUsers()
    {
        //默认表名 可以不设置后面三个参数，自定义表名需要设置
        return $this->belongsToMany(Question::class, 'users_questions', 'user_id', 'question_id')->withTimestamps();
    }

    public function comments()
    {
        return $this->morphMany(Comment::class, 'commentable');
    }

}

5.view部分 vue组件

<template>
    <div>
        <button class="btn btn-sm btn-secondary ml-2"
                @click="showCommentsForm" v-text="showCommentText">
        </button>

        <div class="modal fade" :id="id" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            评论
                        </h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>

                    <div class="modal-body">
                        <div v-if="comments.length>0">
                            <div class="card" v-for="comment in comments">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <img :src="comment.user.avatar" class="img img-rounded img-fluid"
                                                 :alt="comment.user.name">
                                            <p class="text-secondary text-center"> {{
                                                comment.created_at }}</p>
                                        </div>
                                        <div class="col-md-10">
                                            <p>
                                                <a class="float-left" href="#">
                                                    <strong>{{ comment.user.name}}</strong></a>
                                            </p>
                                            <div class="clearfix"></div>
                                            <p> {{ comment.content }}</p>
                                            <p>
                                                <a class="float-right btn btn-outline-primary ml-2"> <i
                                                    class="fa fa-reply"></i> 回复</a>
                                                <a class="float-right btn text-white btn-danger"> <i
                                                    class="fa fa-heart"></i> 点赞</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <!--                                  <div class="card card-inner">-->
                                <!--                                       <div class="card-body">-->
                                <!--                                           <div class="row">-->
                                <!--                                               <div class="col-md-2">-->
                                <!--                                                   <img src="https://image.ibb.co/jw55Ex/def_face.jpg"-->
                                <!--                                                        class="img img-rounded img-fluid"/>-->
                                <!--                                                   <p class="text-secondary text-center">15 Minutes Ago</p>-->
                                <!--                                               </div>-->
                                <!--                                               <div class="col-md-10">-->
                                <!--                                                   <p><a-->
                                <!--                                                       href="https://maniruzzaman-akash.blogspot.com/p/contact.html"><strong>Maniruzzaman-->
                                <!--                                                       Akash</strong></a></p>-->
                                <!--                                                   <p>Lorem Ipsum is simply dummy text of the pr make but also the leap-->
                                <!--                                                       into electronic typesetting, remaining essentially unchanged. It was-->
                                <!--                                                       popularised in the 1960s with the release of Letraset sheets-->
                                <!--                                                       containing Lorem Ipsum passages, and more recently with desktop-->
                                <!--                                                       publishing software like Aldus PageMaker including versions of Lorem-->
                                <!--                                                       Ipsum.</p>-->
                                <!--                                                   <p>-->
                                <!--                                                       <a class="float-right btn btn-outline-primary ml-2"> <i-->
                                <!--                                                           class="fa fa-reply"></i> Reply</a>-->
                                <!--                                                       <a class="float-right btn text-white btn-danger"> <i-->
                                <!--                                                           class="fa fa-heart"></i> Like</a>-->
                                <!--                                                   </p>-->
                                <!--                                               </div>-->
                                <!--                                           </div>-->
                                <!--                                       </div>-->
                                <!--                                   </div>-->
                            </div>
                        </div>
                        <input class="form-control" v-model="postComment" v-if="!success"></input>
                        <button type="button" class="btn btn-success" @click="store" v-if="!success">发送</button>
                        <div class="alert alert-success" v-if="success">评论发送成功！</div>
                    </div>

                    <!-- Modal Actions -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        props: ['type', 'commentable_id'],
        name: "Comments.vue",
        data: function () {
            return {
                comments: [],
                postComment: null,
                success: false,
            }
        },
        computed: {
            id() {
                return 'model-comment' + '-' + this.type + '-' + this.commentable_id;
            },
            showCommentText() {
                return this.comments.length + "条评论";
            },
        },
        mounted() {
            this.getComments();
        },
        methods: {
            showCommentsForm() {
                this.getComments();
                $('#' + this.id).modal('show');//显示评论框
            },
            getComments() {
                let currentObject = this;
                axios.get('/api/' + this.type + '/' + this.commentable_id + '/comments').then(function (response) {
                    currentObject.comments = response.data.comments;
                }).catch(function (e) {
                    console.log(e);
                }).finally(function () {

                });
            },
            store() {
                let currentObject = this;
                axios.post('/api/comments', {
                    'type': this.type,
                    'commentable_id': this.commentable_id,
                    'postComment': this.postComment
                }).then(function (response) {
                    currentObject.comments.push(response.data.comment[0]);
                }).catch(function (e) {
                    console.log(e);
                }).finally(function () {

                });
            }
        }
    }
</script>

<style scoped>

</style>

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md offset-1">
                {{--问题--}}
                <div class="card">
                    <div class="card-header">
                        {{ $question->title }}

                        @foreach(['success','warning','danger'] as $info)
                            @if(session()->has($info))
                                <div class="alert alert-{{$info}}">{{ session()->get($info) }}</div>
                            @endif
                        @endforeach

                        @can('update',$question)
                            <a href="{{ route('questions.edit',$question) }}" class="btn btn-warning">编辑</a>
                        @endcan

                        @can('destroy',$question)
                            <form action="{{ route('questions.destroy',$question) }}" method="post">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">删除</button>
                            </form>
                        @endcan

                        @forelse($question->topics as $topic)
                            <button class="btn btn-secondary float-md-right m-1">{{ $topic->name }}</button>
                        @empty
                            <p class="text text-warning float-md-right"> "No Topics"</p>
                        @endforelse

                        <p class="text text-info float-md-right"> 已有{{ count($question->answers) }}个回答</p>

                    </div>
                    <div class="card-body">
                        {!! $question->content !!}
                    </div>
                </div>


                {{--回答提交form--}}
                {{--只有登录用户可以提交回答--}}
                @if(auth()->check())
                    <div class="card mt-2">
                        <div class="card-header">
                            提交回答
                        </div>
                        <div class="card-body">
                            <form action="{{ route('answers.store',$question) }}" method="post">
                            @csrf
                            <!-- 回答编辑器容器 -->
                                <script id="container" name="content" type="text/plain"
                                        style="width: 100%;height: 200px">{!! old('content') !!}</script>
                                <p class="text text-danger"> @error('content') {{ $message }} @enderror </p>
                                <!--提交按钮-->
                                <button type="submit" class="btn btn-primary float-md-right mt-2">提交回答</button>
                            </form>
                        </div>
                    </div>
                @else
                    {{--显示请登录--}}
                    <a href="{{ route('login') }}" class="btn btn-success btn-block mt-4">登录提交答案</a>
                @endif
                {{--展示答案--}}
                @forelse($question->answers as $answer)
                    <div class="card mt-4">
                        <div class="card-header">
                            @include('users._small_icon',['userable'=>$answer])
                            <span class="float-right text text-info text-center">
                                {{ $answer->updated_at->diffForHumans() }}</span>
                            @if(auth()->check())
                                <user-vote-button answer="{{ $answer->id }}"
                                                  vote_count="{{ $answer->userVotes->count() }}"
                                                  class="float-right"></user-vote-button>
                            @endif
                        </div>

                        <div class="card-body">
                            {!!  $answer->content  !!}
                        </div>
                        <div class="card-footer">
                            <comments type="answer" commentable_id="{{  $answer->id }}"></comments>
                        </div>
                    </div>

                @empty

                @endforelse
            </div>

            <div class="col-md-3">
                <div class="card">
                    <div class="card-header">
                        <h2> {{ $question->followers_count }}</h2>
                        <span>关注者</span>
                    </div>
                    <div class="card-body">
                        <question-follow-button question="{{$question->id}}"id}}">
                        </question-follow-button>
                    </div>
                </div>

                <div class="card mt-4">
                    <div class="card-header">
                        <h2> 提问者 </h2>
                    </div>
                    <div class="card-body">
                        @include('users._small_icon',['userable'=>$question])
                    </div>
                    @include('users._user_stats')
                </div>
            </div>


        </div>
    </div>
@endsection
@section('footer-js')
    @include('questions._footer_js')
@endsection

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
require('../../vendor/select2/select2/dist/js/select2.js');
// 将views/vendor/ueditor/assets.blade.php中的引用换到本处
require('../../public/vendor/ueditor/ueditor.config.js');
require('../../public/vendor/ueditor/ueditor.all.js');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('question-follow-button', require('./components/QuestionFollowButton').default);
Vue.component('user-follow-button', require('./components/UserFollowButton').default);
Vue.component('user-vote-button', require('./components/UserVoteButton').default);
Vue.component('send-message', require('./components/SendMessage').default);
Vue.component('comments', require('./components/Comments').default);
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
    el: '#app',
});

6.CommentContoller及路由api.php

api.php:

#region
Route::middleware('api')->get('/answer/{id}/comments', 'CommentController@showAnswerComment');
Route::middleware('api')->get('/question/{id}/comments', 'CommentController@showQuestionComment');

Route::middleware('auth:api')->post('/comments', 'CommentController@store');
#endregion

<?php

namespace App\Http\Controllers;

use App\Comment;
use Illuminate\Http\Request;
use Illuminate\Database\Eloquent\Builder;

class CommentController extends Controller
{
    //

    public function showAnswerComment($id)
    {
        //https://laravel.com/docs/5.8/eloquent-relationships#querying-polymorphic-relationships
        $comments = Comment::whereHasMorph('commentable', ['App\Answer'], function (Builder $query) use ($id) {
            $query->where('id', '=', $id);
        })->with('user')->get();

        return response()->json(
            [
                'comments' => $comments,
            ]
        );
    }

    public function showQuestionComment($id)
    {
        $comments = Comment::query()->whereHasMorph('commentable', 'App\Models\Question', function (Builder $query) use ($id) {
            $query->where('id', $id);
        })->with('user')->get();
        return response()->json(
            [
                'comments' => $comments,
            ]
        );
    }

    public function store(Request $request)
    {
        $type = ($request->get('type') === 'answer') ? 'App\Answer' : 'App\Models\Question';
        $comment = Comment::create([
            'commentable_type' => $type,
            'commentable_id' => $request->get('commentable_id'),
            'user_id' => auth()->user()->id,
            'content' => $request->get('postComment'),
        ]);
        $comment = Comment::query()->where('id', $comment->id)->with('user')->get();
        return response()->json(
            [
                'comment' => $comment,
            ]
        );
    }

}

7.添加comment与用户模型的关联：

Comment.php中：

public function user()
{
    return $this->belongsTo(User::class);
}

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Comment extends Model
{
    //表名
    protected $table = 'comments';

    //必须初始赋值的
    protected $fillable = ['user_id', 'content', 'commentable_id', 'commentable_type'];


    public function commentable()
    {
        return $this->morphTo();
    }

    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

User.php中：

public function comments()
{
    return $this->hasMany(Comment::class);
}

<?php

namespace App;

use App\Models\Question;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\SoftDeletes;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable implements MustVerifyEmail
{
    use Notifiable;
    #region 支持软删除
    use SoftDeletes;
    protected $dates = ['deleted_at'];
    #endregion
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password', 'avatar', 'activation_token', 'api_token'
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];


    /**添加用户模型和问题模型的模型关联
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function questions()
    {
        return $this->hasMany(Question::class);
    }


    /** 添加用户模型和回答模型的模型关联 一个用户可以有多个回答
     * @return \Illuminate\Database\Eloquent\Relations\HasMany
     */
    public function answers()
    {
        return $this->hasMany(Answer::class);
    }


    public function followQuestions()
    {
        //默认表名 可以不设置后面三个参数，自定义表名需要设置
        return $this->belongsToMany(Question::class, 'users_questions', 'question_id', 'user_id')->withTimestamps();
    }


    /** 用户的粉丝
     * @return \Illuminate\Database\Eloquent\Relations\BelongsToMany
     */
    public function followers()
    {

        return $this->belongsToMany
        (
            self::class,
            'followers',
            'user_id', //foreignPivotKey:当前模型在中间表的字段(当前模型类的外键) //【当前模型是leader】的外键id
            'follower_id'//relatedPivotKey:另一模型在中间表的字段(另一模型类的外键)
        )->withTimestamps();
    }


    /** 用户关注的作者
     * @return \Illuminate\Database\Eloquent\Relations\BelongsToMany
     */
    public function followings()
    {
        return $this->belongsToMany
        (
            self::class,
            'followers',
            'follower_id',//foreignPivotKey:当前模型在中间表的字段(当前模型类的外键) //【当前模型是粉丝】的外键id
            'user_id'//relatedPivotKey:另一模型在中间表的字段(另一模型类的外键)
        )
            ->withTimestamps();
    }


    /**
     * @return \Illuminate\Database\Eloquent\Relations\BelongsToMany
     */
    public function votes()
    {
        return $this->belongsToMany(Answer::class, 'votes')->withTimestamps();
    }


    /**
     * @param $answer_id
     * @return array
     */
    public function voteAnswer($answer_id)
    {
        return $this->votes()->toggle($answer_id);
    }


    public function messages()
    {
        return $this->hasMany(Message::class, 'to_user_id');
    }

    public function comments()
    {
        return $this->hasMany(Comment::class);
    }

}

8.Repository 模式重构评论 :省略