Xây dựng hệ thống bình luận trực tiếp Laravel

Để xây dựng lòng tin trong cộng đồng trực tuyến hoặc blog của bạn, một yếu tố quan trọng bạn sẽ muốn là hệ thống bình luận trực tiếp Laravel được thiết kế tốt.

Tuy nhiên, không dễ để có được nó ngay trong lần thử đầu tiên trừ khi bạn dựa vào các hệ thống nhận xét tự lưu trữ như Disqus hoặc Commento, mỗi hệ thống đều có những nhược điểm riêng. Họ sở hữu dữ liệu của bạn, cung cấp các thiết kế và tùy chỉnh hạn chế, và quan trọng nhất, chúng không miễn phí.

Với những hạn chế này, nếu ý tưởng xây dựng hệ thống nhận xét thời gian thực – với lợi ích của việc kiểm soát dữ liệu, thiết kế và tùy chỉnh giao diện để phù hợp với blog của bạn – hấp dẫn bạn, hãy tiếp tục đọc.

Bài viết này sẽ hướng dẫn bạn cách phát triển một hệ thống bình luận được thiết kế tốt và theo thời gian thực với các chức năng bình luận khác nhau. Tuân theo các nguyên tắc xây dựng ứng dụng trò chuyện thời gian thực với Vue.js và Socket.io, chúng tôi sẽ sử dụng Laravel, Pusher và React để phát triển hệ thống nhận xét thời gian thực.

Hãy đi sâu vào!

Những gì chúng tôi sẽ xây dựng

Chúng tôi sẽ xây dựng một hệ thống nhận xét theo thời gian thực có thể được tích hợp vào bất kỳ trang web hoặc blog nào để tạo niềm tin trong cộng đồng.

Tổng quan về khối xây dựng: Laravel, Pusher và Vue

Trước khi đi sâu vào phát triển, hãy thảo luận về các công nghệ chúng tôi sẽ sử dụng để phát triển hệ thống nhận xét thời gian thực của mình.

Laravel

Laravel là một khung công tác PHP hướng MVC mã nguồn mở. Nó được sử dụng để xây dựng các ứng dụng web PHP từ đơn giản đến phức tạp, được biết đến với cú pháp thanh lịch của chúng. Tìm hiểu những gì Laravel là điều cần thiết để xây dựng hệ thống bình luận này.

Đẩy

Pusher cho phép các nhà phát triển tạo các tính năng thời gian thực trên quy mô lớn. Bài viết này sẽ kết hợp Laravel Echo để tạo sự kiện truyền phát thời gian thực tới máy chủ Pusher và hiển thị nội dung trên giao diện người dùng với Vue.js.

Vue.js

Vue.js là lựa chọn khung giao diện người dùng của chúng tôi. Vue.js là một khung công tác giao diện người dùng JavaScript tiến bộ được biết đến với cách tiếp cận dễ học và dễ hiểu để phát triển giao diện người dùng. Chúng tôi sẽ sử dụng Vue.js để phát triển hệ thống nhận xét theo thời gian thực của mình.

Xây dựng hệ thống bình luận

Nếu hệ thống nhận xét mà chúng tôi đã nêu ở trên nghe giống như những gì bạn muốn, hãy chuyển sang xây dựng nó.

1. Cài đặt và thiết lập Laravel, Pusher và Echo

Việc cài đặt và thiết lập Laravel, Echo và Pusher rất đơn giản vì Laravel đã thực hiện tất cả các tác vụ nền bằng cách thiết lập và cấu hình Laravel Echo để hoạt động với Pusher một cách hoàn hảo.

Đầu tiên, chúng ta sẽ bắt đầu bằng cách cài đặt và cấu hình Laravel, khuôn khổ PHP phụ trợ của chúng tôi. Bạn có thể lấy một phiên bản mới của Laravel bằng lệnh này, miễn là bạn đã cài đặt Laravel CLI trên toàn cầu:

laravel new commenter

Phiên bản Laravel mới của bạn sẽ được cài đặt trong một thư mục có tên là commenter. Hãy mở thư mục trong VSCode của chúng tôi và điều hướng đến nó trong thiết bị đầu cuối của chúng tôi:

cd commenter code .

Trước khi chúng tôi bắt đầu máy chủ phát triển của mình, hãy cài đặt và cấu hình một số gói cần thiết sẽ được sử dụng cho dự án.

Chạy lệnh này để cài đặt Pusher PHP SDK:

composer require pusher/pusher-php-server

Chạy lệnh này để cài đặt các gói NPM cần thiết cho giao diện người dùng Vue.js:

npm install --save laravel-echo pusher-js

Tiếp theo, chúng ta sẽ cấu hình Laravel Echo và Pusher. Mở tệp tài nguyên / js / bootstrap.js của bạn và dán vào các tập lệnh sau:

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

Bạn sẽ nhận thấy từ tập lệnh ở trên rằng chúng tôi chỉ đang định cấu hình cá thể Axios với các cấu hình mặc định của chúng tôi. Tiếp theo, chúng ta sẽ cấu hình Laravel Echo để sử dụng Pusher và các cấu hình của nó.

2. Thiết lập và di chuyển cơ sở dữ liệu

Tiếp theo, chúng tôi sẽ tạo và thiết lập cơ sở dữ liệu của mình để lưu trữ các nhận xét cho lâu dài. Chúng tôi sẽ sử dụng SQLite, mặc dù bạn có thể sử dụng bất kỳ ứng dụng khách cơ sở dữ liệu nào mà bạn chọn.

Tạo tệp database.sqlite bên trong thư mục cơ sở dữ liệu và cập nhật tệp .env của bạn như sau:

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=

Tiếp theo, chạy lệnh này để tạo di chuyển Nhận xét và cập nhật nó bằng các tập lệnh sau:

php artisan make:migration create_comments_table

Mở tệp cơ sở dữ liệu / migrations / xxxx_create_comments_table_xxxx.php và dán vào mã này:

<?php use IlluminateDatabaseMigrationsMigration; use IlluminateDatabaseSchemaBlueprint; use IlluminateSupportFacadesSchema; 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'); } }

Thao tác này sẽ tạo một bảng cơ sở dữ liệu nhận xét mới và thêm các cột nội dung và tác giả.

Cuối cùng, để tạo quá trình di chuyển, hãy chạy lệnh này:

php artisan migrate

3. Tạo mô hình

Trong Laravel, các mô hình rất quan trọng – chúng là cách chắc chắn nhất để giao tiếp với cơ sở dữ liệu của chúng tôi và xử lý việc quản lý dữ liệu.

Để tạo một mô hình trong Laravel, chúng ta sẽ chạy lệnh sau:

php artisan make:model Comment

Tiếp theo, mở tệp app / models / Comment.php và dán đoạn mã sau:

<?php namespace AppModels; use IlluminateDatabaseEloquentFactoriesHasFactory; use IlluminateDatabaseEloquentModel; class Comment extends Model { use HasFactory; protected $fillable = ['content', 'author']; } Mảng $ có thể lấp đầy cho phép chúng tôi tạo và cập nhật hàng loạt mô hình.

4. Tạo bộ điều khiển

Bộ điều khiển rất quan trọng vì chúng chứa tất cả logic, nghiệp vụ và mặt khác, của các ứng dụng của chúng ta, vì vậy hãy tạo một bộ điều khiển để xử lý logic nhận xét:

php artisan make:controller CommentController

Tiếp theo, mở tệp app / Http / Controllers / CommentController.php và dán đoạn mã sau:

<?php namespace AppHttpControllers; use AppModelsComment; use AppEventsCommentEvent; use IlluminateHttpRequest; 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; } }

Bộ điều khiển có ba phương pháp khác nhau: trả về một dạng xem nhận xét, tìm nạp tất cả các nhận xét và lưu trữ một nhận xét mới, tương ứng. Quan trọng nhất, chúng tôi kích hoạt một sự kiện mỗi khi chúng tôi lưu trữ một nhận xét mới, giao diện người dùng sẽ lắng nghe để cập nhật trang liên quan với nhận xét mới trong thời gian thực bằng cách sử dụng Pusher và Laravel Echo.

5. Tạo các tuyến đường

Để định cấu hình các tuyến đường của chúng tôi đúng cách, chúng tôi sẽ cần cập nhật nhiều tệp, vì vậy hãy bắt đầu.

Đầu tiên, chúng tôi sẽ cập nhật tệp api.php trong thư mục tuyến đường. Mở tệp và thêm mã sau:

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

Tiếp theo, mở tệp channel.php trong cùng thư mục và thêm mã sau để ủy quyền sự kiện mà chúng tôi đã kích hoạt trước đó:

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

Tiếp theo, mở tệp web.php trong cùng thư mục và thêm mã sau để chuyển hướng yêu cầu của chúng tôi đến trang chủ, nơi Vue.js sẽ nhận nó:

use AppHttpControllersCommentController; //... Route::get('/', [CommentController::class, 'index']);

Cuối cùng, chúng tôi sẽ tạo một tệp phiến mới trong thư mục tài nguyên / chế độ xem có tên là comments.blade.php và thêm đoạn mã sau:

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

Tập lệnh thêm tiêu đề bài đăng và thành phần Vue để hiển thị và thêm nhận xét mới vào tiêu đề bài đăng đã tạo ở trên.

Chạy các lệnh sau để kiểm tra xem bạn có nhận được mọi thứ chính xác hay không:

npm run watch php artisan serve

Nếu bạn được giới thiệu với trang này, bạn đã sẵn sàng chuyển sang bước tiếp theo trong bài viết này.

6. Thiết lập Vue (Giao diện người dùng)

Chúng tôi sẽ tạo và thiết lập phiên bản Vue của chúng tôi để tạo và hiển thị tất cả các nhận xét được thực hiện trên bài đăng này.

Chúng tôi sẽ bắt đầu với việc thiết lập cửa hàng Vuex của chúng tôi. Tạo các tệp sau trong thư mục resource / js / store.

Tạo trạng thái bình luận

Tạo action.js và thêm mã sau:

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;

Tệp Hành động thực hiện cuộc gọi đến điểm cuối nhận xét trong phần phụ trợ.

Tiếp theo, tạo tệp getters.js và thêm mã sau:

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

Tệp Getter được sử dụng để lấy tất cả các bình luận trong trạng thái.

Tạo tệp mut.js và dán vào đoạn mã sau:

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

Tiếp theo, tạo tệp state.js và dán vào đoạn mã sau:

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

Cuối cùng, chúng tôi sẽ thêm mọi thứ vào tệp index.js được xuất sang phiên bản Vue, tạo tệp index.js và thêm những thứ sau:

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

Tạo thành phần

Cuối cùng, chúng tôi sẽ tạo các thành phần nhận xét của mình để hiển thị và thêm các nhận xét mới. Hãy bắt đầu bằng cách tạo thành phần nhận xét duy nhất.

Tạo một thư mục trong thư mục resource / js được gọi là các thành phần, thêm comment.vue và thêm mã sau:

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

Tiếp theo, tạo tệp sau có tên là comments.vue trong cùng một thư mục và thêm mã sau:

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

Cuối cùng, tạo một tệp có tên NewComment.vue và thêm mã sau:

<template>
  <div id="commentForm" 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
              style="height: 100px"
              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
            style="background-color: #47b784"
            :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>

Bây giờ, hãy mở tệp app.js và thêm mã sau để đăng ký các thành phần Vue mà bạn đã tạo trước đó:

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

Bản tóm tắt

Và đó là nó! Bạn vừa học cách xây dựng hệ thống bình luận trực tiếp cho trang web của mình bằng Laravel.

Chúng tôi đã thảo luận về những lợi ích của việc tạo và quản lý hệ thống nhận xét trong nhiệm vụ xây dựng lòng tin trong cộng đồng hoặc blog của bạn. Chúng tôi cũng đã khám phá cách phát triển hệ thống nhận xét được thiết kế tốt và theo thời gian thực ngay từ đầu, sử dụng các chức năng nhận xét khác nhau.

Bạn có thể sao chép mã nguồn của dự án này trong repo Github này.

Bạn nghĩ gì về hệ thống bình luận trực tiếp Laravel mà chúng ta đã cùng nhau xây dựng? Hãy cho chúng tôi biết trong phần bình luận!