Forum dạng SPA với Laravel và Vue.js – Phần 0: Giới thiệu

Ứng dụng đơn trang SPA (Single Page Application) là cách thiết kế web đưa toàn bộ ứng dụng vào một trang duy nhất với rất nhiều ưu điểm như cải thiện đáng kể về tốc độ, nâng cao nghiệm người dùng. Có rất nhiều các ứng dụng đơn trang nổi tiếng mà bạn dùng hàng ngày như Facebook, Gmail, Twitter…

Laravel 5.4 đã đưa Vue.js vào thành Javascript framework mặc định. Vue.js là một framework đang phát triển với tốc độ cực nhanh, nó giống với Laravel là sự tổng hợp các tính năng hay từ các framework khác. Trong hệ sinh thái Vue.js có thư viện vue-router chuyên xây dựng các ứng dụng đơn trang với cách viết code rất tường minh và viết cực nhanh. Không quá lời chút nào, chúng ta cùng nhau xây dựng một ứng dụng có sự kết hợp cả Laravel và Vue.js giúp các bạn hiểu được tại sao lại là Laravel và Vue.js?

1. Xây dựng ứng dụng Forum dạng SPA

Diễn đàn là một trong những ứng dụng web rất phổ biến và có nhiều tính năng phong phú. Trong loạt bài này chúng ta sẽ cùng nhau xây dựng một ứng dụng Forum dạng đơn trang SPA sử dụng các nền tảng như sau:

  • Backend: PHP framework Laravel.
  • Fontend: Javascript framework Vue.js và CSS framework Bootstrap.
  • Database: MySQL hoặc SQLite.

Dự án này sử dụng rất nhiều các kiến thức khác nhau, tổng hợp các kiến thức có trên All Laravel. Ứng dụng demo này chúng tôi đã đưa lên Heroku tại đường dẫn https://spa-forum.herokuapp.com/, mã nguồn có trên Github.

Heroku là nhà cung cấp dịch vụ host, trong đó có gói miễn phí dành cho PHP, bạn có thể tìm hiểu Cài đặt Laravel trên Heroku để triển khai các dự án demo.

Giao diện SPA Forum trên Heroku

2. Những vấn đề chính trong dự án

Với rất nhiều các framework được sử dụng bởi dự án, các bạn sẽ được làm việc với những tính năng của các framework cũng như sẽ xử lý các tình huống thực tế làm giàu kinh nghiệm phát triển ứng dụng sau này. Dưới đây chúng ta sẽ cùng điểm qua những vấn đề nổi bật sẽ được xử lý trong dự án.

2.1 Xây dựng khung dự án Laravel + Vue.js

Trong mọi dự án, việc xây dựng khung dự án là cần thiết, nếu bạn đã đưa ra được một quy trình hoặc một bản kế hoạch các bước xây dựng, nó sẽ giúp bạn tiết kiệm được nhiều thời gian cho các dự án tiếp theo. Chính vì vậy, bài đầu tiên sẽ tập trung vào Xây dựng khung dự án Laravel + Vue.js cho ứng dụng Forum.

2.2 Xây dựng Fontend ứng dụng SPA với hệ sinh thái Vue.js

Vue.js là framework Javascript giúp xây dựng Fontend nhanh chóng và đem lại cho người dùng những trải nghiệm mới mẻ. Vue được tối ưu hóa với dung lượng rất bé, các tính năng khác được đưa ra ngoài các thư viện khác trong hệ sinh thái Vue.js như:

  • Vue-router: giúp xây dựng ứng dụng Single Page Application cực nhanh và đơn giản bằng cách mapping giữa các route với Vue component.
  • Vue-resource: là một HTTP client cho Vue.js, giúp gửi nhận các request với các phương thức đa dạng như GET, POST, PUT, DELETE… Tuy nhiên, Vue-resource đã ngừng hỗ trợ do Vue.js thấy rằng có khá nhiều các thư viện khác đã làm rất tốt điều này, ví dụ như Axios.
  • VueX: thư viện giúp các ứng dụng Vue.js có được một chỗ lưu trữ và quản lý các trạng thái.

Với các thư viện trên kèm theo với Vue.js bạn có thể xây dựng các ứng dụng Fontend phức tạp có dạng SPA, nó không khác mấy so với ứng dụng đa trang truyền thống nhưng tốc độ được cải thiện đáng kể. Trong bài thứ 2, tập trung vào xây dựng ứng dụng mẫu đơn trang SPA.

2.3 Xây dựng backend cung cấp API bằng Laravel

Trong dự án này, Laravel sẽ đóng vai trò làm Backend, thao tác với database, thực hiện thao tác với dữ liệu, xây dựng các API… Trong dự án này Laravel sẽ xuất hiện ở các bài 3: xây dựng hệ thống API và bài thứ 6: xác thực API bằng Laravel Passport.

2.4 Các phần việc khác

Các phần việc còn lại như, lấy dữ liệu từ API bằng axios và hiển thị dữ liệu trong Vue component ở bài thứ 4. Bài thứ 5: nâng cấp giao diện người dùng với các tính năng phân trang, breadcrumb, hiển thị trạng thái tải dữ liệu.

3. Yêu cầu kiến thức

Nếu bạn mới bắt đầu làm quen với Laravel và Vue.js thì dưới đây là những series căn bản cho hai framework này:

Ngoài ra bạn cũng cần có một số kiến thức về các công cụ quản lý thư viện như Composer cho PHP, npm cho Javascript hoặc yarn một thay thế của npm và các công cụ đóng gói như Webpack, Laravel Mix.

Ok, bạn đã sẵn sàng? Chúng ta bắt đầu thôi.

11 thoughts on “Forum dạng SPA với Laravel và Vue.js – Phần 0: Giới thiệu

    1. Ứng dụng demo được cài đặt trên Heroku với gói miễn phí nên cứ sau 30 phút không có truy cập là nó chuyển sang trạng thái ngủ đông, mỗi lần đánh thức nó mất khoảng 10 giây. Bạn để ý là lần đầu vào chậm thôi chứ các lần tiếp theo sau đó bạn vào các trang khác của ứng dụng sẽ nhanh vèo vèo

      1. Bạn cho hỏi, triển khai trên Heroku có khó không, thấy miễn phí là mê rồi. Ứng dụng demo cũng thỉnh thoảng có người xem, không cần phải nhanh đâu ợ. Lúc nào cần thì mới nâng cấp từ gói miễn phí sang trả phí.

  1. Mình muốn làm 1 web cũng dạng gần như blog, cũng thích trải nghiệm SPA nhưng đang lo ngại vấn đề SEO và bảo mật. Admin có thể chia sẻ thêm về vấn đề này được không? Và nếu SPA có nhiều ưu điểm vậy thì tại sao bạn không áo dụng làm cho allaravel.com luôn?

    1. Trả lời câu hỏi này cho cả bạn Kulit và bạn Hưng:

      1. Về SEO với Single Page Application:
      Trước đây khi làm về SEO thì mình thấy khuyến cáo hạn chế sử dụng Javascript, đặc biệt là sử dụng để render nội dung vì thời điểm đó Google cũng như các search engine khác chưa thể hiểu được tường tận những gì javascript làm. Tuy nhiên câu chuyện này đã khác đi nhiều, hiện nay Google, Bing… đã có thể hiểu “tốt” các nội dung javascript và những nội dung khác nhau trong Single Page Application đã được index như các trang khác nhau. Chỉ có duy nhất một vấn đề cần chú ý là hạn chế việc lấy dữ liệu bất đồng bộ từ máy chủ vì các search engine sẽ dừng luôn khi trang đã được tải. Hoặc một cách nữa mà Vue.js có hỗ trợ là Server-Side rendering, tức là mọi nội dung sẽ được render ở trên máy chủ và client chỉ tải về do đó nội dung này sẽ được đọc đầy đủ ngay khi tải và tốt cho SEO hơn. Trong thời gian tới, team All Laravel bố trí được sẽ làm một series về Server-Side rendering, bạn đón đọc nhé.
      2. Về vấn đề bảo mật: chúng ta đã tách biệt fontend và backend, hai layer này nói chuyên với nhau bằng các web API. Nếu bạn sử dụng OAuth2 để bảo mật các API thì sẽ không có một lo ngại nào nữa về vấn đề này. Trong loạt bài “Xây dựng Forum dạng SPA” chỉ đưa ra đường hướng về một ví dụ cơ bản nên chưa sử dụng OAuth2 để xác thực API. Bạn có thể tham khảo bài viết Sử dụng Laravel Passport xác thực API với OAuth2.
      3. Tại sao không build Allaravel.com theo kiểu SPA bằng Laravel và Vue.js luôn? Câu hỏi thú vị thật, do team chưa có thời gian để build thôi, trong thời gian này Allaravel.com sẽ tập trung chia sẻ kiến thức và đào tạo trong nội bộ công ty. Có thể trong giai đoạn sắp tới sẽ xây dựng lại ứng dụng web dạng SPA.

      Rất vui được trao đổi cùng với các bạn.

      1. Rất cảm ơn câu trả lời của bạn, mình có thêm động lực làm SPA rồi :D. Mong rằng sắp tới team sẽ ra nhiều tut hay về Laravel, Vue và Vuex hơn nữa.

  2. Theo cảm nhận của mình, project này chưa hoàn thành, có khá nhiều phần dở dang, được cái nó là ví dụ rất tốt cho những người mới kết hợp giữa Laravel và Vue.js

Add Comment