Ứ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.
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.
CÁC BÀI VIẾT KHÁC
IT Gà mờ
5 years ago
Phản hồiKiên Đặng
5 years ago
Phản hồiMuppy
5 years ago
Phản hồiWebDesigner
5 years ago
Phản hồiKulit
5 years ago
Phản hồiHưng
5 years ago
Phản hồiFirebirD
5 years ago
Phản hồiHưng
5 years ago
Phản hồikientt
5 years ago
Phản hồitruong
5 years ago
Phản hồitrang trí gian hàng
8 months ago
Phản hồiHãy chia sẻ nhiều nội dung hơn như vậy nữa, để chúng ta cùng nhau học hỏi và phát triển nhé!