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