Laravel+Vue 构建仿简书二级评论系统包含邮件通知

曾经终败给现在 2023-06-13 08:58 1阅读 0赞

### 二级评论系统 ###

*   *   *  写在前面
         *  项目源码
         *  前端模板
         *  后台处理
         *   *  数据结构
             *   *  评论表
                 *  回复表
             *  数据处理
         *  邮件通知
         *   *  观察者
             *   *  评论的观察者
                 *  回复的观察者
             *  邮件通知
         *  更多信息

![在这里插入图片描述][20191123212121288.jpeg]

### 写在前面 ###

这篇文章严格来讲是将已有的仿简书二级评论系统和 Laravel、Vue 进行结合并改进，例如添加邮件通知。前人栽树后人乘凉，评论系统的数据结构和 Vue 模板详情见下面这篇文章，本文不在赘述。

1.  [vue + element-ui + scss 仿简书评论模块][vue _ element-ui _ scss]

### 项目源码 ###

[前端评论模板][Link 1]：https://gitee.com/bluish\_space/lvblog/blob/master/resources/js/components/Art/comment.vue

[前端 Vuex 模块][Vuex]  
https://gitee.com/bluish\_space/lvblog/blob/master/resources/js/modules/comments.js

[后端数据处理][Link 2]https://gitee.com/bluish\_space/lvblog/blob/master/app/Http/Controllers/API/CommentController.php

[后端数据转换器][Link 3]  
https://gitee.com/bluish\_space/lvblog/blob/master/app/Transformers/CommentTransformer.php

### 前端模板 ###

**实例：**  
![在这里插入图片描述][20191123161641828.png]

### 后台处理 ###

#### 数据结构 ####

##### 评论表 #####

Schema::create('comments', function (Blueprint $table) { 
                $table->bigIncrements('id');
                $table->bigInteger('article_id')->unsigned()->index()->comment('文章id');
                $table->bigInteger('fromId')->unsigned()->index()->comment('评论者id');
                $table->integer('type')->comment('评论类型');
                $table->string('fromName')->comment('评论者昵称');
                $table->string('fromAvatar')->comment('评论者头像');
                $table->bigInteger('likeNum')->comment('点赞次数');
                $table->string('contents')->comment('评论内容');
                $table->timestamps();
            });

##### 回复表 #####

Schema::create('replies', function (Blueprint $table) { 
                $table->bigIncrements('id');
                $table->bigInteger('comment_id')->index()->unsigned()->comment('评论id');
                $table->bigInteger('fromId')->index()->unsigned()->comment('评论者id');
                $table->string('fromName')->comment('评论者昵称');
                $table->string('fromAvatar')->comment('评论者头像');
                $table->bigInteger('toId')->comment('被评论者id');
                $table->string('toName')->comment('评论者昵称');
                $table->string('toAvatar')->comment('评论者昵称');
                $table->string('contents')->comment('评论内容');
                $table->timestamps();
            });

#### 数据处理 ####

**以回复数据的处理为例，其它见源码**

public function replyStore(ReplyRequest $request,$comment)
        { 
            if ($comment = Comment::find($comment)){ 
            	//通过 Authorization Token 确定当前登录的用户，等价于 Auth::guard('api')->user()，获取登录用户信息
                $fromUser = $this->user;
                $toUser = User::find($request->toUser);
                $data = new Reply();
                $data ->  comment_id      = $comment->id;
                $data ->  fromId          = $fromUser->id;
                $data ->  fromName        = $fromUser->name;
                $data ->  fromAvatar      = $fromUser->avatar;
                $data ->  toId            = $toUser->id;
                $data ->  toName          = $toUser->name;
                $data ->  toAvatar        = $toUser->avatar;
                // 使用 Str:after 方法去掉 '@' 符号 
                $data ->  contents	= Str::after(Str::after($request->contents,'@'.$toUser->name.' '),'@'.$toUser->name);
                if($data->save()) { 
                    return response()->json(['message' => '回复成功'], 201);
                }else{ 
                    return response()->json(['message' => '回复失败'], 500);
                }
            }else{ 
                return response()->json(['message' => '目标评论不存在'], 404);
            }
        }

### 邮件通知 ###

#### 观察者 ####

##### 评论的观察者 #####

\#在评论数据插入数据库后执行下面的 created 方法：

public function created(Comment $comment)
        { 
            //
            $article = $comment->article;
            $user =$article->user;
            // 如果要通知的人是当前用户，就不必通知了！
            if ($user ->id != auth('api')->user()->id) { 
                $user->increment('notification_count');
                $user->notify(new ArticleReplied($comment));
            }
        }

##### 回复的观察者 #####

public function created(Reply $reply)
        { 
            //
            // 如果要通知的人是当前用户，就不必通知了！
            if ($reply ->toId != auth('api')->user()->id) { 
                $reply->toUser->increment('notification_count');
                $reply->toUser->notify(new CommentReplied($reply));
            }
        }

#### 邮件通知 ####

开启邮件通知频道，完成邮件通知方法

**评论的邮件通知方法：**

public function toMail($notifiable)
    { 
    // Log::debug($this);
        $url = env('APP_URL').'/art/' .  $this->comment->article_id . '?reply=comment&location=' . $this->comment->id;
        return (new MailMessage)
            ->line('你的文章有了新评论！')
            ->action('查看评论', $url);
    
    }

**回复的邮件通知方法**

public function toMail($notifiable)
        { 
            $url = env('APP_URL').'/art/' .  $this->reply->comment->article_id . '?reply=reply&location=' .  $this->reply->id;
            return (new MailMessage)
                ->line('你在文章下的评论有了新回复！')
                ->action('查看回复', $url);
        }

这样我们在收到评论或回复时就能够及时收到邮件通知啦！  
![在这里插入图片描述][2019112318162588.png]

### 更多信息 ###

关注下我的微信公众号就是对我创作的最大支持~  
![在这里插入图片描述][format_png]

[20191123212121288.jpeg]: https://img-blog.csdnimg.cn/20191123212121288.jpeg
[vue _ element-ui _ scss]: https://blog.csdn.net/solocoder/article/details/80963255
[Link 1]: https://gitee.com/bluish_space/lvblog/blob/master/resources/js/components/Art/comment.vue
[Vuex]: https://gitee.com/bluish_space/lvblog/blob/master/resources/js/modules/comments.js
[Link 2]: https://gitee.com/bluish_space/lvblog/blob/master/app/Http/Controllers/API/CommentController.php
[Link 3]: https://gitee.com/bluish_space/lvblog/blob/master/app/Transformers/CommentTransformer.php
[20191123161641828.png]: https://img-blog.csdnimg.cn/20191123161641828.png
[2019112318162588.png]: https://img-blog.csdnimg.cn/2019112318162588.png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tb3ppbGFuLmdlZWthZHB0LmNuL2ltZy9jdXN0b20vd2VjaGF0X3B1Yi5wbmc?x-oss-process=image/format,png