Tích hợp Vue.js với CakePHP framework

Tổng quan

CakePHP là một framework tuyệt vời để xây dựng các ứng dụng web truyền thống một cách nhanh chóng.

Nhưng mọi ứng dụng đều cần tính tương tác và thường thì điều đó phải được thực hiện mà không cần tải hoặc làm mới toàn bộ trang web. Đó là nơi JavaScript xuất hiện và có rất nhiều thư viện JS và khung như Vue, React, v.v. giúp dễ dàng thêm tính tương tác vào ứng dụng của bạn.

Cũng trong vài năm qua, các ứng dụng trang đơn (hay thường được gọi là SPA) đang trở nên phổ biến.

Điều đó có nghĩa là Vue hoặc React có thể giúp xây dựng front-end dễ dàng, nó không thể thay thế back-end. Vì vậy, điều cần thiết là phải tích hợp cả front-end và back-end đúng cách để chúng ta có thể tận dụng tốt nhất cả hai thế giới.

Mặc dù việc tích hợp các khung JS hiện đại (Vue hoặc React) với CakePHP thực sự dễ dàng, nhưng không có hướng dẫn hoặc tài nguyên nào cho biết chính xác cách thực hiện.

Tôi thường thấy mọi người đăng câu hỏi về cách thức hoặc phương pháp hay nhất để tích hợp Vue.js với CakePHP và nói rằng không có tài nguyên nào có thể giúp họ.

Vì vậy, ở đây tôi đang cố gắng trả lời câu hỏi của họ về cách tích hợp Vue.js với CakePHP. Mặc dù tôi đang tập trung vào Vue.js ở giao diện người dùng nhưng khái niệm/ý tưởng chung sẽ giống với React hoặc Svelte hoặc bất kỳ khung giao diện người dùng nào khác.

Cài đặt

Trước tiên, hãy tạo một dự án CakePHP mới thông qua lệnh composer:

composer create-project --prefer-dist cakephp/app:~4.0 cakephp-vuejs-app

Bây giờ hãy cài đặt plugin AssetMix bằng lệnh:

composer require ishanvyas22/asset-mix

Tại sao plugin này? Chà, plugin này giúp chúng ta tích hợp Laravel Mix với CakePHP framework một cách dễ dàng. Plugin này sẽ gánh tất cả công việc khó khăn cho chúng tôi để chúng tôi có thể tập trung vào việc xây dựng ứng dụng với Vue.js và CakePHP.

Cấu hình

1. Load plugin bằng cách sử dụng lệnh sau:

bin/cake plugin load AssetMix

2. Tạo thư mục triển khai Vue.js bằng lệnh sau:

bin/cake asset_mix generate --dir=resources

3. Cài đặt các gói cần thiết cho font-end:

npm install

4. Triển khai font-end để có thể chạy trên trình duyệt:

npm run dev

5. Sau khi chạy lệnh npm run dev, 1 file app.js được build ra. Tiếp theo, chúng ta sẽ nhúng file này vào layout:

<?= $this->AssetMix->script('app') ?>

6. Thêm dòng bên dưới vào file src/View/AppView.php:

$this->loadHelper('AssetMix.AssetMix');

Tất cả đã xong, chúng ta đã sẵn sàng sử dụng Vue.js với CakePHP

Kiểm thử

Bây giờ chúng ta sẽ tạo 1 view file templates/Pages/greet.php và nhúng Vue component vào:

<div id="app">
    <h1>Greetings</h1>
    <!-- Load AppGreet component -->
    <app-greet></app-greet>
</div>

Tiếp theo chạy lệnh bin/cake server để start nhanh 1 server và vào trình duyệt với url: localhost:8765/pages/greet

Kết quả chúng ta sẽ thấy hiển thị  dòng chữ Hello world

Tiếp theo, chúng ta sẽ thử thay đổi chữ Hello world bằng cách thay đổi nội dung của file: resources/js/components/AppGreet.vue

<template>
  <div>
    Welcome to Market Enterprise
  </div>
</template>

Sau khi thay đổi nội dung, chúng ta sẽ chạy lại lệnh npm run dev để build lại. Chạy lại url localhost:8765/pages/greet, kết quả chúng ta sẽ nhận được chữ Welcome to Market Enterprise.