创建模型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);
}