Создайте систему живых комментариев Laravel

Чтобы укрепить доверие к вашему онлайн-сообществу или блогу, одним из важнейших элементов, который вам понадобится, является хорошо спроектированная система живых комментариев Laravel.

Тем не менее, это не так просто сделать правильно с первой попытки, если вы не полагаетесь на собственные системы комментирования, такие как Disqus или Commento, каждая из которых имеет свой собственный набор недостатков. Они владеют вашими данными, предлагают ограниченный дизайн и настройки, и, что наиболее важно, они не бесплатны.

С учетом этих ограничений, если вам нравится идея создания системы комментариев в реальном времени — с преимуществами контроля ваших данных, проектирования и настройки внешнего вида, чтобы он соответствовал вашему блогу, — продолжайте читать.

В этой статье вы узнаете, как разработать хорошо спроектированную систему комментариев в реальном времени с различными функциями комментирования. Следуя принципам создания приложения для чата в реальном времени с помощью Vue.js и Socket.io, мы будем использовать Laravel, Pusher и React для разработки системы комментариев в реальном времени.

Давайте погрузимся!

Что мы построим

Мы создадим систему комментариев в реальном времени, которую можно интегрировать в любой веб-сайт или блог, чтобы завоевать доверие сообщества.

Обзор строительных блоков: Laravel, Pusher и Vue

Прежде чем мы углубимся в разработку, давайте обсудим технологии, которые мы будем использовать для разработки нашей системы комментариев в реальном времени.

Ларавель

Laravel — это PHP-фреймворк с открытым исходным кодом, ориентированный на MVC. Он используется для создания простых и сложных веб-приложений PHP, известных своим элегантным синтаксисом. Изучение того, что Laravel необходимо для создания этой системы комментариев.

толкатель

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.

Во-первых, мы начнем с установки и настройки Laravel, нашего внутреннего PHP-фреймворка. Вы можете получить новый экземпляр Laravel с помощью этой команды, если вы установили Laravel CLI глобально:

 laravel new commenter

Ваш новый экземпляр Laravel будет установлен в папку с именем commenter. Давайте откроем папку в нашем VSCode и перейдем к ней в нашем терминале:

 cd commenter code .

Прежде чем мы запустим наш сервер разработки, давайте установим и настроим некоторые необходимые пакеты, которые будут использоваться для проекта.

Запустите эту команду, чтобы установить Pusher PHP SDK:

 composer require pusher/pusher-php-server

Запустите эту команду, чтобы установить необходимые пакеты NPM для внешнего интерфейса Vue.js:

 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, хотя вы можете использовать любой клиент базы данных по вашему выбору.

Создайте файл 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 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'); } }

Это создаст новую таблицу базы данных комментариев и добавит столбцы контента и автора.

Наконец, чтобы создать миграцию, выполните следующую команду:

 php artisan migrate

3. Создание моделей

В Laravel важны модели — это самый надежный способ связи с нашей базой данных и управления данными.

Чтобы создать модель в Laravel, мы выполним следующую команду:

 php artisan make:model Comment

Затем откройте файл app/models/Comment.php и вставьте следующий код:

 <?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']; } Массив $fillable позволяет нам массово создавать и обновлять модель.

4. Создание контроллеров

Контроллеры имеют решающее значение, потому что они содержат всю логику, бизнес и прочее наших приложений, поэтому давайте создадим один для обработки логики комментариев:

 php artisan make:controller CommentController

Затем откройте файл app/Http/Controllers/CommentController.php и вставьте следующий код:

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

Контроллер имеет три разных метода: вернуть представление комментария, получить все комментарии и сохранить новый комментарий соответственно. Самое главное, мы запускаем событие каждый раз, когда сохраняем новый комментарий, который интерфейс будет прослушивать, чтобы обновлять соответствующую страницу новым комментарием в режиме реального времени с помощью Pusher и Laravel Echo.

5. Создание маршрутов

Чтобы правильно настроить наши маршруты, нам нужно обновить множество файлов, так что давайте начнем.

Во-первых, мы собираемся обновить файл 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 в той же папке и добавьте следующий код для авторизации события, которое мы запустили ранее:

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

Затем откройте файл web.php в той же папке и добавьте следующий код, чтобы перенаправить наш запрос на домашнюю страницу, где его подхватит Vue.js:

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

Наконец, мы создадим новый блейд-файл в папке resources/views с именем comments.blade.php и добавим следующий код:

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

Сценарий добавляет заголовок сообщения и компонент Vue для отображения и добавления новых комментариев к заголовку сообщения, созданному выше.

Запустите следующие команды, чтобы проверить, правильно ли вы все поняли:

 npm run watch php artisan serve

Если вам представлена ​​эта страница, вы готовы перейти к следующему шагу в этой статье.

6. Настройка Vue (интерфейс)

Мы создадим и настроим наш экземпляр Vue для создания и отображения всех комментариев к этому посту.

Мы начнем с настройки нашего магазина Vuex. Создайте следующие файлы в папке resource/js/store.

Создать состояние комментария

Создайте action.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;

Файл Action вызывает конечную точку комментария в бэкэнде.

Затем создайте файл getters.js и добавьте следующий код:

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

Файл Getter используется для получения всех комментариев в состоянии.

Создайте файлmutations.js и вставьте его в следующий код:

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

Затем создайте файл state.js и вставьте его в следующий код:

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

Наконец, мы добавим все в файл index.js, экспортированный в экземпляр Vue, создадим файл index.js и добавим следующее:

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

Создать компоненты

Наконец, мы собираемся создать наши компоненты комментариев для отображения и добавления новых комментариев. Начнем с создания одного компонента комментария.

Создайте папку в папке resource/js с именем компоненты, добавьте comment.vue и добавьте следующий код:

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

Затем создайте следующий файл с именем comments.vue в той же папке и добавьте следующий код:

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

Наконец, создайте файл с именем NewComment.vue и добавьте следующий код:

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

Теперь откройте файл app.js и добавьте следующий код для регистрации компонентов 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 });

Резюме

И это все! Вы только что узнали, как создать систему живых комментариев для своего сайта с помощью Laravel.

Мы обсудили преимущества создания и управления системой комментариев в вашем стремлении завоевать доверие в вашем сообществе или блоге. Мы также изучили, как с нуля разработать хорошо спроектированную и работающую в реальном времени систему комментариев, используя различные функции комментирования.

Вы можете клонировать исходный код этого проекта в этом репозитории Github.

Что вы думаете о системе живых комментариев Laravel, которую мы создали вместе? Дайте нам знать об этом в комментариях!