Construiește un sistem de comentarii live Laravel

Pentru a construi încredere în comunitatea sau blogul dvs. online, un element crucial pe care îl veți dori este un sistem de comentarii live Laravel bine conceput.

Cu toate acestea, nu este ușor să o faceți corect de la prima încercare, decât dacă vă bazați pe sisteme de comentare auto-găzduite, cum ar fi Disqus sau Commento, fiecare dintre acestea având propriul set de dezavantaje. Ei dețin datele dvs., oferă modele și personalizări limitate și, cel mai important, nu sunt gratuite.

Cu aceste limitări, dacă ideea de a vă construi sistemul de comentare în timp real - cu beneficiile controlului datelor dvs., proiectării și personalizării aspectului și simțului pentru a se potrivi în blogul dvs. - vă atrage, continuați să citiți.

Acest articol vă va învăța cum să dezvoltați un sistem de comentarii bine conceput și în timp real, cu diferite funcționalități de comentare. Urmând principiile construirii unei aplicații de chat în timp real cu Vue.js și Socket.io, vom folosi Laravel, Pusher și React pentru a dezvolta sistemul de comentare în timp real.

Să ne scufundăm!

Ce vom construi

Vom construi un sistem de comentarii în timp real care poate fi integrat în orice site web sau blog pentru a construi încredere în comunitate.

Prezentare generală a blocurilor: Laravel, Pusher și Vue

Înainte de a ne aprofunda în dezvoltare, să discutăm despre tehnologiile pe care le vom folosi pentru a dezvolta sistemul nostru de comentarii în timp real.

Laravel

Laravel este un cadru PHP open-source orientat spre MVC. Este folosit pentru a construi aplicații web PHP simple până la complexe, cunoscute pentru sintaxa lor elegantă. A afla ce Laravel este esențial pentru construirea acestui sistem de comentarii.

Împingător

Pusher le permite dezvoltatorilor să creeze caracteristici în timp real la scară. Acest articol va combina Laravel Echo pentru a crea un eveniment de difuzare în timp real către serverul Pusher și va afișa conținutul pe front-end cu Vue.js.

Vue.js

Vue.js este cadrul nostru frontend ales. Vue.js este un cadru de front-end JavaScript progresiv, cunoscut pentru abordarea sa ușor de învățat și directă a dezvoltării frontend. Vom folosi Vue.js pentru a dezvolta sistemul nostru de comentarii în timp real.

Construirea sistemului de comentarii

Dacă sistemul de comentarii pe care l-am subliniat mai sus sună ca ceea ce doriți, să trecem la construirea lui.

1. Instalați și configurați Laravel, Pusher și Echo

Instalarea și configurarea Laravel, Echo și Pusher este simplă, deoarece Laravel a efectuat toate sarcinile de fundal prin configurarea și configurarea Laravel Echo pentru a funcționa perfect cu Pusher.

În primul rând, vom începe prin a instala și configura Laravel, cadrul nostru de backend PHP. Puteți prelua o nouă instanță a Laravel cu această comandă, cu condiția să fi instalat Laravel CLI la nivel global:

 laravel new commenter

Noua ta instanță Laravel va fi instalată într-un folder numit comentator. Să deschidem folderul din VSCode și să navigăm la el în terminalul nostru:

 cd commenter code .

Înainte de a începe serverul nostru de dezvoltare, să instalăm și să configuram câteva pachete necesare care vor fi folosite pentru proiect.

Rulați această comandă pentru a instala Pusher PHP SDK:

 composer require pusher/pusher-php-server

Rulați această comandă pentru a instala pachetele NPM necesare pentru interfața Vue.js:

 npm install --save laravel-echo pusher-js

În continuare, vom configura Laravel Echo și Pusher. Deschideți fișierul resurse/js/bootstrap.js și inserați următoarele scripturi:

 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 });

Veți observa din scriptul de mai sus că doar configurăm instanța Axios cu configurațiile noastre implicite. În continuare, vom configura Laravel Echo să folosească Pusher și configurațiile sale.

2. Configurarea și migrarea bazei de date

În continuare, vom crea și configura baza noastră de date pentru a stoca comentariile pentru persistență. Vom folosi SQLite, deși puteți folosi orice client de bază de date la alegere.

Creați un fișier database.sqlite în folderul bazei de date și actualizați fișierul .env după cum urmează:

 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=

Apoi, rulați această comandă pentru a crea migrarea comentariilor și actualizați-o cu următoarele scripturi:

 php artisan make:migration create_comments_table

Deschideți fișierul database/migrations/xxxx_create_comments_table_xxxx.php și inserați acest cod:

 <?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'); } }

Aceasta va crea un nou tabel de bază de date de comentarii și va adăuga conținut și coloane de autor.

În cele din urmă, pentru a crea migrarea, rulați această comandă:

 php artisan migrate

3. Crearea modelelor

În Laravel, modelele sunt semnificative - sunt cel mai sigur mod de a comunica cu baza noastră de date și de a gestiona gestionarea datelor.

Pentru a crea un model în Laravel, vom rula următoarea comandă:

 php artisan make:model Comment

Apoi, deschideți fișierul app/models/Comment.php și inserați următorul cod:

 <?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']; } Matricea $fillable ne permite să creăm și să actualizăm modelul în masă.

4. Crearea controlerelor

Controllerele sunt esențiale, deoarece găzduiesc toată logica, afacerile și altele, ale aplicațiilor noastre, așa că haideți să creăm una pentru a gestiona logica de comentarii:

 php artisan make:controller CommentController

Apoi, deschideți fișierul app/Http/Controllers/CommentController.php și inserați următorul cod:

 <?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; } }

Controlerul are trei metode diferite: returnează o vizualizare a comentariilor, preia toate comentariile și, respectiv, stochează un nou comentariu. Cel mai important, declanșăm un eveniment de fiecare dată când stocăm un nou comentariu, pe care interfața îl va asculta pentru a actualiza pagina relevantă cu noul comentariu în timp real, folosind Pusher și Laravel Echo.

5. Crearea rutelor

Pentru a ne configura rutele corect, va trebui să actualizăm o mulțime de fișiere, așa că să începem.

În primul rând, vom actualiza fișierul api.php din folderul rute. Deschideți fișierul și adăugați următorul cod:

 use App\Http\Controllers\CommentController; //... Route::get('/', [CommentController::class, 'index']); Route::get('/comments', [CommentController::class, 'fetchComments']); Route::post('/comments', [CommentController::class, 'store']);

Apoi, deschideți fișierul channels.php în același folder și adăugați următorul cod pentru a autoriza evenimentul declanșat mai devreme:

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

Apoi, deschideți fișierul web.php în același folder și adăugați următorul cod pentru a redirecționa solicitarea noastră către pagina de pornire, de unde Vue.js o va prelua:

 use App\Http\Controllers\CommentController; //... Route::get('/', [CommentController::class, 'index']);

În cele din urmă, vom crea un nou fișier blade în folderul resurse/vizualizări numit comments.blade.php și vom adăuga următorul cod:

 <!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> <div class="container"> <div class="question-wrapper"> <h5 class="is-size-2"> What do you think about <span>Dogs</span>?</h5> <br> <a href="#Form" class="button is-medium has-shadow has-text-white">Comment</a> </div> <br><br> <comments></comments> <new-comment></new-comment> </div> </div> <script async src="{{mix('js/app.js')}}"></script> </body> </html>

Scriptul adaugă un titlu al postării și o componentă Vue pentru a afișa și adăuga comentarii noi la titlul postării creat mai sus.

Rulați următoarele comenzi pentru a testa dacă obțineți totul corect:

 npm run watch php artisan serve

Dacă vi se prezintă această pagină, sunteți gata să treceți la pasul următor din acest articol.

6. Configurarea Vue (Frontend)

Vom crea și configura instanța noastră Vue pentru a crea și afișa toate comentariile făcute la această postare.

Vom începe cu configurarea magazinului nostru Vuex. Creați următoarele fișiere în folderul resource/js/store.

Creați starea comentariului

Creați actions.js și adăugați următorul cod:

 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;

Fișierul Acțiune efectuează un apel către punctul final de comentarii din backend.

Apoi, creați un fișier getters.js și adăugați următorul cod:

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

Fișierul Getter este folosit pentru a prelua toate comentariile din stare.

Creați fișierul mutations.js și inserați-l în următorul cod:

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

Apoi, creați un fișier state.js și inserați-l în următorul cod:

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

În cele din urmă, vom adăuga totul în fișierul index.js exportat în instanța Vue, vom crea un fișier index.js și vom adăuga următoarele:

 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 });

Creați componente

În cele din urmă, vom crea componentele noastre de comentarii pentru a afișa și adăuga comentarii noi. Să începem prin a crea singura componentă de comentariu.

Creați un folder în folderul resursă/js numit componente, adăugați comment.vue și adăugați următorul cod:

 <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>

Apoi, creați următorul fișier numit comments.vue în același folder și adăugați următorul cod:

 <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>

În cele din urmă, creați un fișier numit NewComment.vue și adăugați următorul cod:

 <template> <div 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 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 :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>

Acum, deschideți fișierul app.js și adăugați următorul cod pentru a înregistra componentele Vue pe care le-ați creat mai devreme:

 // 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 });

rezumat

Si asta e! Tocmai ați învățat cum să construiți un sistem de comentarii live pentru site-ul dvs. folosind Laravel.

Am discutat despre beneficiile creării și gestionării unui sistem de comentarii în încercarea ta de a construi încredere în comunitatea sau blogul tău. Am explorat, de asemenea, cum să dezvoltăm un sistem de comentarii bine conceput și în timp real de la zero, utilizând diferite funcționalități de comentare.

Puteți clona codul sursă al acestui proiect în acest depozit Github.

Ce părere aveți despre sistemul de comentarii live Laravel pe care l-am construit împreună? Spune-ne în comentarii!