基於Laravel開發網站實時評論系統

為了在你的線上社羣或部落格中建立信任，你需要設計開發一套體驗良好的Laravel實時評論系統。

然而，要想在第一次嘗試時就做到這一點並不容易，除非你依賴於諸如Discus或Commento這樣的自託管評論系統，因為它們都有自己的缺點。他們擁有你的資料，提供有限的設計和定製，最重要的是，他們不是免費的。

有了這些限制，如果構建實時評論系統的想法吸引了你，那就繼續閱讀吧。該系統可以控制你的資料，設計和定製適合你部落格的外觀和感覺。

本文將教您如何開發一個設計良好的實時評論系統，該系統具有不同的評論功能。遵循使用Vue.js和Socket.io構建實時聊天應用程式的原則，我們將使用Laravel、Pusher和React來開發實時評論系統。

1. 我們將開發什麼
2. 開發所需的技術
3. 開發評論系統例項

我們將開發什麼

我們將建立一個實時評論系統，可以整合到任何網站或部落格中，以建立社羣信任。

開發所需的技術

在深入開發之前，讓我們先討論一下開發實時評論系統所使用的技術。

Laravel

Laravel是一個開源的面向MVC的PHP框架。它用於構建簡單到複雜的PHP web應用程式，以其優雅的語法而聞名。學習什麼是拉拉維爾是必不可少的建設這個評論系統。

Pusher

Pusher使開發人員能夠按比例建立實時功能。本文將結合Laravel Echo建立到Pusher伺服器的實時廣播事件，並使用Vue.js在前端顯示內容。

Vue.js

Vue.js是我們選擇的前端框架。Vue.js是一個漸進式JavaScript前端框架，以其易於學習和直接的前端開發方法而聞名。我們將使用Vue.js開發實時評論系統。

開發評論系統例項

如果我們上面概述的評論系統聽起來像您想要的，那麼讓我們繼續構建它。

1. 安裝和設定Laravel, Pusher和Echo

Laravel、Echo和Pusher的安裝和設定非常簡單，因為Laravel通過設定和配置Laravel Echo以完美配合Pusher完成了所有後臺任務。

首先，我們將從安裝和配置我們的後端PHP框架Laravel開始。如果您已全域性安裝了Laravel CLI，則可以使用此命令獲取Laravel的新例項：

laravel new commenter

新的Laravel例項將安裝在名為commenter的資料夾中。讓我們在VSCode中開啟資料夾，並在終端中導航到它：

cd commenter

code .

在啟動開發伺服器之前，讓我們安裝並配置一些必要的包，這些包將用於專案。

執行此命令以安裝Pusher PHP SDK：

composer require pusher/pusher-php-server

執行此命令為Vue.js前端安裝必要的NPM軟體包：

npm install --save laravel-echo pusher-js

接下來，我們將配置Laravel Echo和Pusher。開啟resources/js/bootstrap.js檔案並貼上到以下指令碼中：

window._ = require("lodash");
window.axios = require("axios");
window.moment = require("moment");
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
window.axios.defaults.headers.post["Content-Type"] =
    "application/x-www-form-urlencoded";
window.axios.defaults.headers.common.crossDomain = true;
window.axios.defaults.baseURL = "/api";
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
    window.axios.defaults.headers.common["X-CSRF-TOKEN"] = token.content;
} else {
    console.error("CSRF token not found");
}


/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that Laravel broadcasts. Echo and event broadcasting
 * allows your team to build robust real-time web applications quickly.
 */
import Echo from "laravel-echo";
window.Pusher = require("pusher-js");
window.Echo = new Echo({
    broadcaster: "pusher",
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

您會從上面的指令碼中注意到，我們只是使用預設配置配置Axios例項。接下來，我們將配置Laravel Echo以使用Pusher及其配置。

2. 資料庫設定和遷移

接下來，我們將建立並設定資料庫來儲存評論以保持永續性。我們將使用 SQLite，但您可以使用您選擇的任何資料庫客戶端。

在資料庫資料夾內建立一個資料庫.sqlite檔案，並更新您的.env檔案如下：

接下來，我們將建立並設定資料庫，以儲存永續性註釋。我們將使用SQLite，不過您可以選擇使用任何資料庫客戶機。

在資料庫資料夾中建立一個database.sqlite檔案，並按如下方式更新.env檔案：

DB_CONNECTION=sqlite
DB_DATABASE=/Users/all/paths/to/project/commenter_be/database/database.sqlite
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USERNAME=root
DB_PASSWORD=

接下來，執行此命令建立註釋遷移，並使用以下指令碼進行更新：

php artisan make:migration create_comments_table

開啟database/migrations/xxxx_create_comments_table_xxxx.php檔案並貼上以下程式碼：

<?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->id();
            $table->string('content');
            $table->string('author');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('comments');
    }
}

這將建立一個新的comments資料庫表，並新增content和author列。

最後，要建立遷移，請執行以下命令：

php artisan migrate

3. 建立模型

在Laravel中，模型非常重要——它們是與資料庫通訊和處理資料管理的最可靠的方式。

要在Laravel中建立模型，我們將執行以下命令：

php artisan make:model Comment

接下來，開啟app/models/Comment.php檔案並貼上以下程式碼：

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Comment extends Model
{
    use HasFactory;
    protected $fillable = ['content', 'author'];
}

The $fillable array allows us to create and update the model in mass.

4. 建立控制器

控制器非常重要，因為它們包含應用程式的所有邏輯、業務和其他方面，所以讓我們建立一個控制器來處理註釋邏輯：

php artisan make:controller CommentController

接下來，開啟app/Http/Controllers/CommentController.php檔案並貼上以下程式碼：

<?php
namespace App\Http\Controllers;
use App\Models\Comment;
use App\Events\CommentEvent;
use Illuminate\Http\Request;

class CommentController extends Controller
{
    //
    public function index()
    {
        return view('comments');
    }
    public function fetchComments()
    {
        $comments = Comment::all();
        return response()->json($comments);
    }
    public function store(Request $request)
    {
        $comment = Comment::create($request->all());
        event(new CommentEvent($comment));
        return $comment;
    }
}

控制器有三種不同的方法：分別返回註釋檢視、獲取所有註釋和儲存新註釋。最重要的是，每次儲存新評論時，我們都會觸發一個事件，前端將監聽該事件，以便使用Pusher和Laravel Echo實時使用新評論更新相關頁面。

5. 建立路由

要正確配置路由，我們需要更新大量檔案，所以讓我們開始吧。

首先，我們將更新routes資料夾中的api.php檔案。開啟檔案並新增以下程式碼：

use App\Http\Controllers\CommentController;
//...

Route::get('/', [CommentController::class, 'index']);
Route::get('/comments', [CommentController::class, 'fetchComments']);
Route::post('/comments', [CommentController::class, 'store']);

接下來，開啟同一資料夾中的channels.php檔案，並新增以下程式碼以授權我們先前觸發的事件：

Broadcast::channel('comment', function ($user) {
    return true;
});

接下來，在同一資料夾中開啟Web.php檔案，並新增以下程式碼以將我們的請求重定向到主頁，Vue.js將在主頁上接收請求：

use App\Http\Controllers\CommentController;
//...

Route::get('/', [CommentController::class, 'index']);

最後，我們將在resources/views資料夾中建立一個名為comments.blade.php的新blade檔案，並新增以下程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Commenter</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
    <style>
        .container {
            margin: 0 auto;
            position: relative;
            width: unset;
        }
        #app {
            width: 60%;
            margin: 4rem auto;
        }
        .question-wrapper {
            text-align: center;
        }
    </style>
</head>
<body>


    <div id="app">
        <div class="container">
            <div class="question-wrapper">
                <h5 class="is-size-2" style="color: #220052;">
                    What do you think about <span style="color: #47b784;">Dogs</span>?</h5>
                <br>
                <a href="#Form" class="button is-medium has-shadow has-text-white" style="background-color: #47b784">Comment</a>
            </div>
            <br><br>
            <comments></comments>
            <new-comment></new-comment>
        </div>
    </div>
    <script async src="{{mix('js/app.js')}}"></script>
</body>
</html>

指令碼將新增一個文章標題和一個Vue元件，以顯示並向上面建立的文章標題新增新註釋。

執行以下命令以測試是否正確獲取了所有內容：

npm run watch

php artisan serve

如果您看到了這個頁面，您就可以進入本文的下一步了。

Laravel的實時評論系統

6. 設定Vue （前端）

我們將建立並設定我們的Vue例項，以建立並顯示對此帖子的所有評論。

我們將從建立Vuex store開始。在resource/js/store資料夾中建立以下檔案。

建立註釋狀態

建立actions.js並新增以下程式碼：

let actions = {
    ADD_COMMENT({ commit }, comment) {
        return new Promise((resolve, reject) => {
            axios
                .post(`/comments`, comment)
                .then(response => {
                    resolve(response);
                })
                .catch(err => {
                    reject(err);
                });
        });
    },
    GET_COMMENTS({ commit }) {
        axios
            .get("/comments")
            .then(res => {
                {
                    commit("GET_COMMENTS", res.data);
                }
            })
            .catch(err => {
                console.log(err);
            });
    }
};
export default actions;

操作檔案呼叫後端中的註釋端點。

接下來，建立一個getters.js檔案並新增以下程式碼:

let getters = {
    comments: state => {
        return state.comments;
    }
};
export default getters;

Getter檔案用於檢索狀態中的所有註釋。

建立translations.js檔案並將其貼上到以下程式碼中：

let mutations = {
    GET_COMMENTS(state, comments) {
        state.comments = comments;
    },
    ADD_COMMENT(state, comment) {
        state.comments = [...state.comments, comment];
    }
};
export default mutations;

接下來，建立state.js檔案並將其貼上到以下程式碼中：

let state = {
    comments: []
};
export default state;

最後，我們將嚮匯出到Vue例項的index.js檔案新增所有內容，建立index.js檔案並新增以下內容：

import Vue from "vue";
import Vuex from "vuex";
import actions from "./actions";
import mutations from "./mutations";
import getters from "./getters";
import state from "./state";
Vue.use(Vuex);
export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
});

建立元件

最後，我們將建立註釋元件以顯示和新增新註釋。讓我們從建立單個註釋元件開始。

在resource/js資料夾中建立一個名為components的資料夾，新增comment.vue並新增以下程式碼：

<template>
  <li class="comment-wrapper animate slideInLeft">
    <div class="profile">
    </div>
    <div class="msg has-shadow">
      <div class="msg-body">
        <p class="name">
          {{ comment.author }} <span class="date">{{ posted_at }}</span>
        </p>
        <p class="content">{{ comment.content }}</p>
      </div>
    </div>
  </li>
</template>
    
    <script>
export default {
  name: "Comment",
  props: ["comment"],
  computed: {
    posted_at() {
      return moment(this.comment.created_at).format("MMMM Do YYYY");
    },

  },
};
</script>
    
    <style lang="scss" scoped>
.comment-wrapper {
  list-style: none;
  text-align: left;
  overflow: hidden;
  margin-bottom: 2em;
  padding: 0.4em;
  .profile {
    width: 80px;
    float: left;
  }
  .msg-body {
    padding: 0.8em;
    color: #666;
    line-height: 1.5;
  }
  .msg {
    width: 86%;
    float: left;
    background-color: #fff;
    border-radius: 0 5px 5px 5px;
    position: relative;
    &::after {
      content: " ";
      position: absolute;
      left: -13px;
      top: 0;
      border: 14px solid transparent;
      border-top-color: #fff;
    }
  }
  .date {
    float: right;
  }
  .name {
    margin: 0;
    color: #999;
    font-weight: 700;
    font-size: 0.8em;
  }
  p:last-child {
    margin-top: 0.6em;
    margin-bottom: 0;
  }
}
</style>

接下來，在同一資料夾中建立名為comments.vue的以下檔案，並新增以下程式碼：

<template>
  <div class="container">
    <ul class="comment-list">
      <Comment
        :key="comment.id"
        v-for="comment in comments"
        :comment="comment"
      ></Comment>
    </ul>
  </div>
</template>
    
    <script>
import { mapGetters } from "vuex";
import Comment from "./Comment";
export default {
  name: "Comments",
  components: { Comment },
  mounted() {
    this.$store.dispatch("GET_COMMENTS");
    this.listen();
  },
  methods: {
    listen() {
      Echo.channel("comment").listen("comment", (e) => {
        console.log(e);
        this.$store.commit("ADD_COMMENT", e);
      });
    },
  },
  computed: {
    ...mapGetters(["comments"]),
  },
};
</script>
    
    <style scoped>
.comment-list {
  padding: 1em 0;
  margin-bottom: 15px;
}
</style>

最後，建立一個名為NewComment.vue的檔案並新增以下程式碼：

<template>
  <div id="commentForm" class="box has-shadow has-background-white">
    <form @keyup.enter="postComment">
      <div class="field has-margin-top">
        <div class="field has-margin-top">
          <label class="label">Your name</label>
          <div class="control">
            <input
              type="text"
              placeholder="Your name"
              class="input is-medium"
              v-model="comment.author"
            />
          </div>
        </div>
        <div class="field has-margin-top">
          <label class="label">Your comment</label>
          <div class="control">
            <textarea
              style="height: 100px"
              name="comment"
              class="input is-medium"
              autocomplete="true"
              v-model="comment.content"
              placeholder="lorem ipsum"
            ></textarea>
          </div>
        </div>
        <div class="control has-margin-top">
          <button
            style="background-color: #47b784"
            :class="{ 'is-loading': submit }"
            class="button has-shadow is-medium has-text-white"
            :disabled="!isValid"
            @click.prevent="postComment"
            type="submit"
          >
            Submit
          </button>
        </div>
      </div>
    </form>
    <br />
  </div>
</template>
    
    <script>
export default {
  name: "NewComment",
  data() {
    return {
      submit: false,
      comment: {
        content: "",
        author: "",
      },
    };
  },
  methods: {
    postComment() {
      this.submit = true;
      this.$store
        .dispatch("ADD_COMMENT", this.comment)
        .then((response) => {
          this.submit = false;
          if (response.data) console.log("success");
        })
        .catch((err) => {
          console.log(err);
          this.submit = false;
        });
    },
  },
  computed: {
    isValid() {
      return this.comment.content !== "" && this.comment.author !== "";
    },
  },
};
</script>
    
    <style scoped>
.has-margin-top {
  margin-top: 15px;
}
</style>

現在，開啟app.js檔案並新增以下程式碼以註冊您先前建立的Vue元件：

// resource/js/app.js

require("./bootstrap");
window.Vue = require("vue");
import store from "./store/index";

Vue.component("comment", require("./components/Comment"));
Vue.component("comments", require("./components/Comments"));
Vue.component("new-comment", require("./components/NewComment"));

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

小結

您剛剛瞭解瞭如何使用Laravel為您的站點構建實時評論系統。

我們已經討論了建立和管理評論系統的好處，以幫助您在社羣或部落格中建立信任。我們還探索瞭如何利用不同的評論功能，從頭開始開發設計良好的實時評論系統。

您可以在此Github repo中克隆此專案的原始碼。