[Laravel + VueJS] Cùng tiến hành dựng 1 trang web SPA ( Phần 1 )

Tram Ho

Đặt vấn đề

Cấu trúc một trang web thường được chia thành các phần như là Header, Content, Footer . Điều này đã được thực hiện theo cách truyền thống bằng cách sử dụng mô hình client/server , trong đó mỗi trang phải được tải từ máy chủ với một URL khác nhau. Để điều hướng đến một trang mới, trình duyệt phải gửi yêu cầu tới URL của trang đó. Máy chủ sẽ gửi dữ liệu trở lại và trình duyệt có thể phải render một trang mới. Đối với kết nối internet trung bình, quá trình này có thể sẽ mất vài giây, trong thời gian đó, người dùng phải chờ trang mới tải. Tại sao chúng ta lại mất công ngồi đợi quá trình render một trang hoàn toàn mới với đủ thành phần trong khi cái mình cần thực sự chỉ là cái Content của nó ??

Khái Niệm SPA ra đời

Để giải quyết bài toán trên , có một kỹ thuật cũng khá là hay dùng đó là kỹ thuật SPA ( Single Page Application ) nôm là Ứng dụng trang đơn =)))))

Ưu điểm của SPA là nó có thể tạo ra trải nghiệm liền mạch hơn cho người dùng. Dữ liệu cho các trang mới vẫn phải được truy xuất và do đó sẽ tạo ra một số gián đoạn nhỏ đối với luồng của người dùng, nhưng sự gián đoạn này được giảm thiểu do việc truy xuất dữ liệu có thể được thực hiện không đồng bộ. Ngoài ra, vì các trang SPA thường yêu cầu ít dữ liệu hơn do sử dụng lại một số thành phần trang, tải trang nhanh hơn.

Hiểu một cách đơn giản, thì toàn bộ resource của web bao gồm các file CSS, Javascript, master layout hay cấu trúc web page sẽ được load lần đầu tiên khi chúng ta bắt đầu duyệt môt website A nào đó. Ở những lần sau, khi chuyển trang khác, client sẽ gửi những ajax request để get dữ liệu cần thiết( thường là phần nội dung). Khái niệm của SPA trên mạng rất là nhiều nên mình chỉ nói tới đây thôi . Mình cùng vào thực hành dựng SPA với Laravel và VueJS nhé

Cài đặt thư viện

Ở bài viết Laravel + Vue.js : Xử lý thông báo lỗi mình đã đề cập qua việc cài đặt cũng nhưng áp dụng VueJS vào Laravel rồi nên các bạn nào còn lan man phần này có thể xem qua nhé 😄

Trong bài hướng dẫn này mình chỉ cần dùng thư viện duy nhất thôi đó là : Vue-Router , Các thư viện khác mình sẽ giới thiệu ở các phần sau 😄

  • Vue-router: giúp định tuyến trong ứng dụng (định nghĩa các route và mapping nó với các Vue component).

Các bạn chạy lệnh sau để tiến hành cài packge vue-router

Ok Xong nhé

Chỉnh sửa bố cục

Khi triển khai SPA giữa 2 thằng này thì các route mình sẽ dùng ở vue-router rồi nên chúng ta cần sửa lại 1 chút file routes/web.php của Laravel nhé

Tạo một controller tên là VueController với nội dung

Lệnh trên khi có bất cứ request nào nó sẽ bay vào VueController function index để return về file index.blade.php
Tạo giúp mình file index.blade.php tại thư mục
resources/views/app/index.blade.php nhé
Nội dung của nó trông như thế này

Quan trọng nhất là ở cái div app kia kìa , tại vì phần này mình sẽ chia bố cục Vue thành các Components và lát nữa đây ở file app.js mình sẽ render vào element #app
Trước hết các bạn xây dựng giúp mình bố cục components của Vue trông như sau

Tiếp theo mình cần sửa lại một chút ở resources/js/app.js

Nội dung file App.vue chỉ vỏn vẹn như này thôi 😄

Viết 1 chút nội dung ở các file content nào tí nữa mình sẽ dùng vue-router kết nối chúng lại sau 😄

HelloWorld.vue

ContentOne.vue

ContentTwo.vue

Giờ chúng ta sẽ tới phần định nghĩa các route tại routes.js

Ở trên các bạn có thể thấy khi người dùng truy cập path : “/” nó sẽ render ra component Index rồi nó thực hiện chuyển tới /home được định nghĩa phần children có component là HelloWorld. Tại sao nó lại nằm ở trong children nhỉ đơn giản thôi vì tí nữa file Index.vue mình sẽ chỉ định nghĩa bố cục trong đó có phần content là <router-view></router-view> Nó sẽ render ở trong cặp thẻ đó =))).

Nội dung Index.vue trông như này

Ta thấy là phần đầu nó sẽ include vào component tên là AppHeader được định nghĩa ở Header.vue
và phần content sẽ nằm trong cặp thẻ <main></main>
Mình có thêm 1 cặp thẻ là <transition></transition> Để khi chuyển trang nó có tí mờ ảo ấy mà =))))
Về css hay transition các bạn có thể tham khảo trên link này nhé https://vuejs.org/v2/guide/transitions.html

Giờ là file Header.vue

Đó bạn thấy không , ở trên các đường dẫn chuyển trang mình không dùng thẻ a trong html, mà mình dùng router-link , có tham số to là path bạn muốn chuyển , về router-link nó còn nhiều tham số khác như là path hay name . Các bạn có thể tìm hiểu tại đây
https://router.vuejs.org/api/

Chạy và xem thành quả

Chạy ứng dụng với 2 lệnh sau

Và truy cập http://localhost:8000 xem thành quả nhé 😄 đây là thành quả của mình

Các bạn cũng có thể tham khảo source tại đây https://github.com/hieudt/laravel-vuejs-handle-error/tree/framgia/spa

Các phần sau mình sẽ hướng dẫn các bạn làm chức năng đăng nhập xác thực bằng Laravel Passport
Chào thân ái !!! 😄

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo