基于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 IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;
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文件并粘贴以下代码：