基于Laravel的网站实时评论系统的开发
为了在你的在线社区或博客中建立信任,你需要设计和开发一个体验良好的Laravel实时评论系统。
然而,第一次尝试并不容易做到这一点,除非你依赖于自托管的审查系统,如Discus或Commento,因为它们都有自己的缺点。他们拥有你的数据,提供有限的设计和定制,最重要的是,他们不是免费的。
有了这些限制,如果构建实时评论系统的想法吸引了你,请继续阅读。该系统可以控制你的数据,设计和定制你的博客的外观和感觉。
本文将教你如何开发一个设计良好的具有不同评论功能的实时评论系统。遵循使用Vue.js和Socket.io构建实时聊天应用的原则,我们将使用Laravel、Pusher和React开发实时评论系统。
我们将发展什么?
开发所需的技术。
开发评论系统的例子
我们将发展什么?
我们将建立一个实时评论系统,可以集成到任何网站或博客中,以建立社区信任。
开发所需的技术。
在进一步开发之前,让我们讨论一下用于开发实时评论系统的技术。
拉勒韦尔
Laravel是一个面向MVC的开源PHP框架。它用于构建简单到复杂的PHP web应用程序,并以其优雅的语法而闻名。了解Lalaville是什么是建立这个评论系统的关键。
推进器
Pusher使开发人员能够按比例创建实时功能。本文将结合Laravel Echo创建一个实时广播事件到Pusher服务器,并使用Vue.js在前端显示内容。
vue . j
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 commentercode .
在启动开发服务器之前,让我们安装并配置一些必要的包,这些包将用于项目。
运行这个命令来安装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=sqliteDB_DATABASE=/Users/all/paths/to/project/commenter_be/database/database.sqliteDB_HOST=127.0.0.1DB_PORT=3306DB_USERNAME=rootDB_PASSWORD=
接下来,运行此命令创建注释迁移,并使用以下脚本对其进行更新:
php artisan make:migration create_comments_table
打开数据库/migrations/xxxx _ create _ comments _ table _ xxxx.php文件,并粘贴以下代码: