vue-axios完成评论功能

创建模型Comment.php,为迁移文件添加字段并生成迁移文件，创建控制器类
创建模型Comment.php

php artisan make:model --migration Model/Comment；

添加字段

$table->text ('content')->comment('评论内容');
$table->unsignedInteger ('user_id')->comment('评论用户');
$table->unsignedInteger ('comment_id')->comment('评论id');
$table->string ('comment_type')->comment('评论类型：文章/视频');

运行迁移，生成comments表

php artisan migrate；

创建控制器类CommentController，该模型生成在新建common（公共类）里

artisan make:controller common/CommentController

模板设置

将评论放在一个新的模板中分离出来，comment.blade.php模板，然后在show.blade.php中引入模板，在引入模板时将show页面的$article对象带到comment模板中

 @include('common.comment',['model'=>$article])

vue和axios数据提交

@push('js')
    <script>
        //引入hdjs、jquery、vue、axios、moment这些js文件，可在控制台查看
        require(['hdjs', 'jquery', 'vue', 'axios', 'moment'], function (hdjs, $, Vue, axios, moment) {
            var vm = new Vue({
                el: '#app',
                data: {
                    model: '',//对应模型，视频或者文章
                    //正在编写的评论
                    filed: {
                        content: '',
                    },
                    comments: [],
                },
                mounted() {
                    //或取现在所操作的模型
                    this.model = '{{str_replace('\\','.',get_class($model))}}';
                    hdjs.editormd("editormd", {
                        width: '100%',
                        height: 300,
                        toolbarIcons: function () {
                            return [
                                "bold", "del", "italic", "quote", "|",
                                "list-ul", "list-ol", "hr", "|",
                                "link", "hdimage", "code-block", "|",
                                "watch", "preview", "fullscreen"
                            ]
                        },
                        //editor.md库位置
                        path: "{{asset('org/hdjs')}}/package/editor.md/lib/",
                     ❤第一步：用onchange方法实现，当编辑器内内容发生变化时，也能实时改变filed里的值，这个方法要在页面加载时就先准备好，所以放在mounted里来加载
                        onchange() {
                            //当编辑器内容发生改变时，把新的值赋值给vm.filed中
                            vm.$set(vm.filed, 'content', this.getValue());
                        }
                    });
                    //异步请求数据库的数据，请求CommentController里面的index方法
                    url = '/comment?model=' + this.model + '&id=' + '{{$model->user->id}}';
                    axios.get(url).then((response) => {
                        this.comments = response.data.comments;
                    });
                },
                methods: {
                ❤第二步：发送请求，先向页面发送请求，vue处理，拦截评论内容为空的情况，然后评论不为空时向php发送请求，存储到数据库
                    send() {
                        if (this.check()) {
                            if (this.filed.content == '') {
                                hdjs.swal({
                                    text: "评论内容不能为空",
                                    button: false,
                                    icon: 'warning',
                                });
                                return false;
                            }
                            //向php发送请求
                            // 拼接url地址
                            ❤第三步：
                            url = '/comment?model=' + this.model + '&id=' + '{{$model->user->id}}';
                            axios.post(url, this.filed).then((response) => {
                                this.comments.push(response.data.comments);
                          
                            });
                        }
                    },
                    check() {
                        let old = parseInt(localStorage.getItem('comment_send_time'));

                        if (old && old+{{hd_config('comment.comment')}}> moment().unix()) {
                            hdjs.swal({
                                text: "请在" + (old+{{hd_config('comment.comment')}} - moment().unix()) + "秒之后评论",
                                button: false,
                                icon: 'warning',
                            });
                            return false;

                        }
                        localStorage.setItem('comment_send_time', moment().unix());
                        return true;
                    },

                },
            });
        })
    </script>
@endpush

控制器类CommentController

获取所有评论，把返回值提交给前台，做评论的循环展示

 public function index()
    {
        $model=hd_model();
        $comments=$model->comment()->with(['user'])->get();
        return ['comments'=>$comments,'code'=>0];
    }

添加评论，将评论存到数据库

 public function store(Request $request)
    {
      $model= hd_model();
        $data=$request->only(['content']);
        $data['user_id']=auth()->id();
       $comment= $model->comment()->create($data);
        return ['comments'=>$comment->with(['user'])->find($comment['id']),'code'=>0];
    }

模型Comment.php，创建一对多关联，获得评论对应的用户

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

模型Article.php，创建多态关联，获得文章对应的评论个数

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

app/helper.php,方法类，获得被点赞的模型对象

function hd_model(){
    $model=Request::query('model');
    $id=Request::query('id');
    $class=str_replace('.','\\',$model);
    return $class::find($id);

}