建站
咨詢
售后
建站咨詢
新聞中心
專注于為中小企業(yè)提供網(wǎng)站設(shè)計制作、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)白云免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
為了在你的在線社區(qū)或博客中建立信任，你需要設(shè)計開發(fā)一套體驗良好的Laravel實時評論系統(tǒng)。
然而，要想在第一次嘗試時就做到這一點并不容易，除非你依賴于諸如Discus或Commento這樣的自托管評論系統(tǒng)，因為它們都有自己的缺點。他們擁有你的數(shù)據(jù)，提供有限的設(shè)計和定制，最重要的是，他們不是免費的。
有了這些限制，如果構(gòu)建實時評論系統(tǒng)的想法吸引了你，那就繼續(xù)閱讀吧。該系統(tǒng)可以控制你的數(shù)據(jù)，設(shè)計和定制適合你博客的外觀和感覺。
本文將教您如何開發(fā)一個設(shè)計良好的實時評論系統(tǒng)，該系統(tǒng)具有不同的評論功能。遵循使用Vue.js和Socket.io構(gòu)建實時聊天應(yīng)用程序的原則，我們將使用Laravel、Pusher和React來開發(fā)實時評論系統(tǒng)。
我們將開發(fā)什么
我們將建立一個實時評論系統(tǒng)，可以集成到任何網(wǎng)站或博客中，以建立社區(qū)信任。
開發(fā)所需的技術(shù)
在深入開發(fā)之前，讓我們先討論一下開發(fā)實時評論系統(tǒng)所使用的技術(shù)。
Laravel
Laravel是一個開源的面向MVC的PHP框架。它用于構(gòu)建簡單到復(fù)雜的PHP web應(yīng)用程序，以其優(yōu)雅的語法而聞名。學(xué)習(xí)什么是拉拉維爾是必不可少的建設(shè)這個評論系統(tǒng)。
Pusher
Pusher使開發(fā)人員能夠按比例創(chuàng)建實時功能。本文將結(jié)合Laravel Echo創(chuàng)建到Pusher服務(wù)器的實時廣播事件，并使用Vue.js在前端顯示內(nèi)容。
Vue.js
Vue.js是我們選擇的前端框架。Vue.js是一個漸進(jìn)式JavaScript前端框架，以其易于學(xué)習(xí)和直接的前端開發(fā)方法而聞名。我們將使用Vue.js開發(fā)實時評論系統(tǒng)。
開發(fā)評論系統(tǒng)實例
如果我們上面概述的評論系統(tǒng)聽起來像您想要的，那么讓我們繼續(xù)構(gòu)建它。
1. 安裝和設(shè)置Laravel, Pusher和Echo
Laravel、Echo和Pusher的安裝和設(shè)置非常簡單，因為Laravel通過設(shè)置和配置Laravel Echo以完美配合Pusher完成了所有后臺任務(wù)。
首先，我們將從安裝和配置我們的后端PHP框架Laravel開始。如果您已全局安裝了Laravel CLI，則可以使用此命令獲取Laravel的新實例：
laravel new commenter
新的Laravel實例將安裝在名為commenter的文件夾中。讓我們在VSCode中打開文件夾，并在終端中導(dǎo)航到它：
cd commenter code .
在啟動開發(fā)服務(wù)器之前，讓我們安裝并配置一些必要的包，這些包將用于項目。
運行此命令以安裝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
});
您會從上面的腳本中注意到，我們只是使用默認(rèn)配置配置Axios實例。接下來，我們將配置Laravel Echo以使用Pusher及其配置。
2. 數(shù)據(jù)庫設(shè)置和遷移
接下來，我們將創(chuàng)建并設(shè)置數(shù)據(jù)庫來存儲評論以保持持久性。我們將使用 SQLite，但您可以使用您選擇的任何數(shù)據(jù)庫客戶端。
在數(shù)據(jù)庫文件夾內(nèi)創(chuàng)建一個數(shù)據(jù)庫.sqlite文件，并更新您的.env文件如下：
接下來，我們將創(chuàng)建并設(shè)置數(shù)據(jù)庫，以存儲持久性注釋。我們將使用SQLite，不過您可以選擇使用任何數(shù)據(jù)庫客戶機(jī)。
在數(shù)據(jù)庫文件夾中創(chuàng)建一個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=
接下來，運行此命令創(chuàng)建注釋遷移，并使用以下腳本進(jìn)行更新：
php artisan make:migration create_comments_table
打開database/migrations/xxxx_create_comments_table_xxxx.php文件并粘貼以下代碼：
id();
$table->string('content');
$table->string('author');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('comments');
}
}
這將創(chuàng)建一個新的comments數(shù)據(jù)庫表，并添加content和author列。
最后，要創(chuàng)建遷移，請運行以下命令：
php artisan migrate
3. 創(chuàng)建模型
在Laravel中，模型非常重要——它們是與數(shù)據(jù)庫通信和處理數(shù)據(jù)管理的最可靠的方式。
要在Laravel中創(chuàng)建模型，我們將運行以下命令：
php artisan make:model Comment
接下來，打開app/models/Comment.php文件并粘貼以下代碼：
4. 創(chuàng)建控制器
控制器非常重要，因為它們包含應(yīng)用程序的所有邏輯、業(yè)務(wù)和其他方面，所以讓我們創(chuàng)建一個控制器來處理注釋邏輯：
php artisan make:controller CommentController接下來，打開app/Http/Controllers/CommentController.php文件并粘貼以下代碼：
json($comments); } public function store(Request $request) { $comment = Comment::create($request->all()); event(new CommentEvent($comment)); return $comment; } }控制器有三種不同的方法：分別返回注釋視圖、獲取所有注釋和存儲新注釋。最重要的是，每次存儲新評論時，我們都會觸發(fā)一個事件，前端將監(jiān)聽該事件，以便使用Pusher和Laravel Echo實時使用新評論更新相關(guān)頁面。
5. 創(chuàng)建路由
要正確配置路由，我們需要更新大量文件，所以讓我們開始吧。
首先，我們將更新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文件，并添加以下代碼以授權(quán)我們先前觸發(fā)的事件：
Broadcast::channel('comment', function ($user) { return true; });接下來，在同一文件夾中打開Web.php文件，并添加以下代碼以將我們的請求重定向到主頁，Vue.js將在主頁上接收請求：
use App\Http\Controllers\CommentController; //... Route::get('/', [CommentController::class, 'index']);最后，我們將在resources/views文件夾中創(chuàng)建一個名為comments.blade.php的新blade文件，并添加以下代碼：
Commenter 腳本將添加一個文章標(biāo)題和一個Vue組件，以顯示并向上面創(chuàng)建的文章標(biāo)題添加新注釋。
運行以下命令以測試是否正確獲取了所有內(nèi)容：
npm run watch php artisan serve如果您看到了這個頁面，您就可以進(jìn)入本文的下一步了。
Laravel的實時評論系統(tǒng)
6. 設(shè)置Vue （前端）
我們將創(chuàng)建并設(shè)置我們的Vue實例，以創(chuàng)建并顯示對此帖子的所有評論。
我們將從建立Vuex store開始。在resource/js/store文件夾中創(chuàng)建以下文件。
創(chuàng)建注釋狀態(tài)
創(chuàng)建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;操作文件調(diào)用后端中的注釋端點。
接下來，創(chuàng)建一個getters.js文件并添加以下代碼:
let getters = { comments: state => { return state.comments; } }; export default getters;Getter文件用于檢索狀態(tài)中的所有注釋。
創(chuàng)建translations.js文件并將其粘貼到以下代碼中：
let mutations = { GET_COMMENTS(state, comments) { state.comments = comments; }, ADD_COMMENT(state, comment) { state.comments = [...state.comments, comment]; } }; export default mutations;接下來，創(chuàng)建state.js文件并將其粘貼到以下代碼中：
let state = { comments: [] }; export default state;最后，我們將向?qū)С龅絍ue實例的index.js文件添加所有內(nèi)容，創(chuàng)建index.js文件并添加以下內(nèi)容：
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 });創(chuàng)建組件
最后，我們將創(chuàng)建注釋組件以顯示和添加新注釋。讓我們從創(chuàng)建單個注釋組件開始。
在resource/js文件夾中創(chuàng)建一個名為components的文件夾，添加comment.vue并添加以下代碼：
{{ comment.author }} {{ posted_at }}
{{ comment.content }}
接下來，在同一文件夾中創(chuàng)建名為comments.vue的以下文件，并添加以下代碼：
最后，創(chuàng)建一個名為NewComment.vue的文件并添加以下代碼：
現(xiàn)在，打開app.js文件并添加以下代碼以注冊您先前創(chuàng)建的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 });小結(jié)
您剛剛了解了如何使用Laravel為您的站點構(gòu)建實時評論系統(tǒng)。
我們已經(jīng)討論了創(chuàng)建和管理評論系統(tǒng)的好處，以幫助您在社區(qū)或博客中建立信任。我們還探索了如何利用不同的評論功能，從頭開始開發(fā)設(shè)計良好的實時評論系統(tǒng)。
您可以在此Github repo中克隆此項目的源代碼。
網(wǎng)站欄目：基于Laravel開發(fā)網(wǎng)站實時評論系統(tǒng)
本文網(wǎng)址：http://www.5511xx.com/article/djcisgj.html
