Hướng dẫn laravel 8 inertia bootstrap - khởi động quán tính laravel 8
Câu hỏi đầu tiên ở đây;) Show Tôi đang học quán tính JS với Laravel 8 với Vue JS (2.6) và tạo ra một hệ thống Auth cơ bản. Bây giờ vấn đề tôi đang gặp phải rằng có một trang bootstrap mẫu hoạt động tốt khi tải trang (làm mới). Nhưng khi tôi gọi bài đăng đăng nhập và chuyển hướng nó trở lại nhà, giao diện người dùng đã bị phá hủy và một khi tôi làm mới, giao diện người dùng hoạt động tốt như vậy? Vì vậy, có bất kỳ cách giải quyết hoặc quán tính nào không tương thích với Twitter Bootstrap? EDIT: Cũng đã thử với Tailwind CSS 2.x nhưng có kết quả tương tự tại sao UI bị phá hủy. UI với làm mới UI sau khi đăng nhập chuyển hướng Đã hỏi ngày 14 tháng 12 năm 2021 lúc 17:11Dec 14, 2021 at 17:11
4 Chú ý !! Tôi đã thử trong một chiếc Laravel mới và mọi thứ đều có tác dụng Không có vấn đề gì bây giờ. Có thể là một số tổng hợp CSS đã sai. Tôi đã thử mà không / với Laravel UI 3.0 và hoạt động tốt ngay bây giờ. Cảm ơn người bạn đời đã trả lời ☺ Đã trả lời ngày 19 tháng 12 năm 2021 lúc 7:33Dec 19, 2021 at 7:33
Chào các bạn, như tiêu đề ở trên thì trong bài viết này mình sẽ hướng dẫn các bạn cách tích hợp bootstrap vào trong Laravel. Nếu như bạn là người mới biết đến Laravel hoặc chưa biết cách tích hợp Boostrap vào Laravel thì bạn có thể làm theo các bước ở bên dưới. Trước khi đi vào chi tiết thì mình sẽ giải thích một chút. Chúng ta sẽ dùng một package tên là laravel/ui để tích hợp bootstrap vào Laravel 8. Chắc hẳn bạn đang khá là thắc mắc tại sao bootstrap thôi mà cũng phải cần đến cả cái package đúng ko?laravel/ui để tích hợp bootstrap vào Laravel 8. Chắc hẳn bạn đang khá là thắc mắc tại sao bootstrap thôi mà cũng phải cần đến cả cái package đúng ko? Thật ra laravel/ui còn nhiều tác dụng khác nữa. Ngoài bootstrap ra thì nó còn được sử dụng để giúp các bạn setup, tích hợp Vue/React vào Laravel một cách dễ nhất nữa đó. Với lại hiện tại Laravel không tích hợp sẵn command tạo bộ Auth (make:auth) nên bạn cũng có thể dùng thằng này để tạo ra giao diện cho Auth luôn được.
Cài đặt laravel/uiTích hợp Bootstrap vào Laravel composer require laravel/ui Vì đây là package nên các bạn phải cài đặt trước mơi dùng được nhé. Cài bằng lệnh sau: Sau khi mà các bạn cài xong thì qua phần tiếp để dùng nhé. php artisan ui bootstrap Chạy lệnh sau để cài bootstrap: php artisan ui bootstrap --auth Chạy lệnh sau để cài bootstrap kèm theo auth: npm install Sau khi chạy lệnh để tích hợp rồi việc cần làm tiếp theo là dùng npm để chạy. Nếu bạn chưa cài các dependencies của npm thì chạy lệnh sau: npm run dev Tiếp theo là lệnh sau: Điều hướng bài viết
Bạn mới nghe qua Notion và chưa biết nó là gì? Bạn muốn tìm hiểu các tính năng sử dụng… InertiaJS là gìTheo như lời tác giả thì ông ấy muốn có một thứ gì đó có thể trộn lẫn được phần hay nhất của một app server-side và phần hay nhất của single-page-app. Và dựa trên mục đích ấy đã đưa ông ấy đến với ý tưởng một pattern khá thú vị - InertiaJS. Nói tóm lại thì tác đã tạo ra một thư viện lấy cảm hứng từ Turbolinks, giúp tạo ra các single page app có phần điều khiển máy chủ khá dễ dàng. Ứng dụng làm phần đăng nhập, đăng xuất.Mình sẽ tiến hành áp dụng thử InertiaJs với một project có phần server dùng framework laravel và phía client sử dụng VueJs Cài đặt.Đầu tiên là setup một project laravel, mình sẽ không nhắc lại các bước cơ bản nữa và đi vào thực hiện cài đặt thư viện inertia. Để thực hiện sử dụng Inertia trên server
Về phía client cụ thể là vue mình dùng npm
Rồi bình thường khi làm single page app, controller sẽ chỉ về một file app.blade có id là app sau đó thằng đó sẽ được render thành App component nhờ file app.js và nhiệm vụ của mình là dùng vue-router để xem với link tương ứng nào sẽ trả về component nào nhưng với Inertia thì mình sẽ không làm như vậy. Đại loại trên server sẽ gọi thẳng đến component luôn và nhiệm vụ ở app.js là xem xét xem controller gọi đến component nào thì render động thằng đó. Để làm cái này mình cần một thư viện là plugin-syntax-dynamic-import. Thằng này thực hiện import động component khi render ở file app.js
Và nhớ, thêm một file .babelrc ở dưới thư mục gốc của project có nội dung như sau
À mình cần dùng thêm một thư viện nữa để từ file vue có thể dùng name của route gọi đến route thay vì phải dùng đường dẫn của nó như bình thường
Với Inertia mình vẫn phải dùng đến một file blade cũng tương tự như với single page app thông thường.
Lưu ý để có thể gọi route với tên của nó bên js cần đặt @route trên header, còn @inertia chỉ đơn giản là để tạo ra một base div, bao gồm thuộc tính data-page chứa thông tin bao đầu của page. Đại loại nó sẽ trông như sau
Bước cuối cùng để hoàn thiện bước setup và đi vào thực hiện authenticate đó là chỉnh sửa file app.js
Nhìn chung thì trong file này có phần đặc biệt nhất là render component cho vue. Cái ${name} chính là thằng truyền vào khi render từ controller. và từ đó ta sẽ lấy đường dẫn để import và render component chỉ định. À quên @_components là mình đã định danh cho thư mục components trong resource/js nhé. Bạn cũng nên sử dụng định danh này để sử dụng đường dẫn tuyệt đối đến các file vue hoặc js, css, scss trong project. Làm điều này cực kì dễ, thêm những dòng sau vào file webpack.mix.js
Ở trên đây mình đã thực hiện định danh cho ba thư mục resources/js, resources/js/components và resources/sass. Thông thường với một single page app phía controller sẽ trả về api và các route sẽ được định nghĩa trong file api.php nhưng với inertia mọi thứ sẽ dễ dàng hơn nhiều, bạn có thể làm và trả về dữ liệu cho client một cách đơn giản y như bạn đang làm một cái web sử dụng blade của laravel vậy. Chính vì vậy phần đăng ký đăng nhập bạn hoàn toàn không cần sử dụng đến JWT mà sử dung phần đăng nhập đăng ký của Laravel hỗ trợ mà bên client vẫn có thể sử dụng được những thông tin về auth đó một cách đơn giản. Và như vậy các route bạn sẽ định nghĩa trong file web.php nhé. Các bước cài đặt cơ bản đã xong bây giờ mình thực hiện làm thử nhé. Phần đăng ký.Routephp artisan ui bootstrap0 Mình khá kém trong việc đặt tên mong các bạn thông cảm nhé. ControllerVề cơ bản thì phần controller sẽ sử dụng lại các thành phần có trước trong laravel chỉ là thay vì trả về giao diện view('auth.register') thì mình dùng inertia để trả về. Trong RegisterController viết lại function showRegistrationForm như sau php artisan ui bootstrap1 à đừng quên phải khai báo thằng Inertia nhé. không là nó không biết sử dụng cái gì đâu php artisan ui bootstrap2 VueTạo thư mục mới tên là auth trong thư mục components. Sau đó tạo một file là Register.vue Mình là người làm giao diện khá kém nên mình sẽ lên https://bootsnipp.com và kiếm về một cái giao diện để sử dụng nhé. Mình đã chọn được cái này https://bootsnipp.com/snippets/3522X. Nhiệm vụ là đưa phần html vào template và tạo một file scss để đưa css vào. Sau một hồi mò mẫm và đưa nó về với đúng dạng của vue để có thể sử dụng thì phần template sẽ trông như sau php artisan ui bootstrap3 À ở trên đây mình có dụng i18n cho vue các bạn có thể tham khải bài viết này của mình để hiểu hơn về cách sử dụng nhé https://viblo.asia/p/i18n-trong-vuejs-YWOZr8Dw5Q0 Trông loằng ngoằng trên kia nhưng thực chất nó sẽ chạy ra rất xấu đấy, cần phải thêm css cho nó nữa. Vì phần css khá dài nên mình sẽ không viết css vào trong file vue nữa trông sẽ cực kì kinh dị. Mình định nghĩa một file register.scss trong thư mục resources/sass và đưa toàn bộ css định nghĩa cho file trang Register vào trong này : php artisan ui bootstrap4 Trong phần style của Regiser.vue import nội dung của nó vào như sau php artisan ui bootstrap5 Mình import như vậy là đã có định danh cho thằng sass trong webpack.mix.js như phía trên rồi nhé. Cuối cùng là đến đoạn script rồi. Đây mới là phần đáng lưu tâm khi nói về Inertia nè. php artisan ui bootstrap6 Đại loại các phần hầu hết phần này đều viết như Vue thông thường như có hai điều đáng lưu tâm, thứ nhất mính đang dùng đến một cái biến this.$page.app.name: đây chính là một biến public được server trả về. Thứ hai đó là thay vì mình dùng axios để gọi đến server và nhận về một response dưới dạng json thì mình sử dụng this.$inertia.post. Ví dụ với trường hợp phần thông tin gửi lên bị lỗi validator mọi thứ sẽ thật phức tạp khi bạn phải handle exception và viết nguyên một cái api validator exception trả về phía client. Client lại phải xử lý thông tin lỗi để hiện thị lên trên giao diện. Với cách gọi đến server của Inertia thế kia bạn chỉ việc share errors trong service provider và tạo props mới cũng là props thì đã xong. Hai thằng errors này sẽ được map với nhau khi bạn khai báo như vậy, và lỗi errors trả về từ server bây giờ đã là errors ở vue rồi. Lấy nó và in ra như blade phía trên thôi. php artisan ui bootstrap7 Ở phần script phía trên mình còn gọi đến một giá trị share khác của Inertia là php artisan ui bootstrap --auth3, biến này còn có thể sử dụng cả trên blade để check điều kiện nữa. Điều này hỗ trợ bạn khá nhiều ví dụ như với blade của laravel bạn có thể lấy thông tin của thằng auth dễ dàng để làm layout thì bây giờ bạn cũng có thể làm điều hoàn toàn tương tự. Trên đây là cách mà controller đưa thông tin public để nhiều trang khác nhau dưới client có thể sử dụng. Ngoài ra bạn có thể truyền dữ liệu từ controller xuống client như sau. php artisan ui bootstrap8 Rồi nhìn như trên thì để sử dụng được biến filters hay organizations bạn cũng chỉ cần khai báo thêm props filters và organizations ở Vue là được rồi. Cái này không liên quan đến project đâu, mình cho vào để các bạn biết thêm thôi :v. Mình chạy thử thôi nhỉ. Thử trường hợp lỗi trước nhé xem thằng errors chạy có ngon không? Có vẻ ổn rồi nhỉ. Đến trường hợp đăng ký thành công nhé. À quên khi đăng nhập thành công sẽ gọi đến trang chủ Home. Trong HomeController dùng inertia để đưa về Home vue như sau nhé php artisan ui bootstrap9 Rồi bây giờ mình sẽ đưa code phần đăng nhập và đăng xuất các bạn hãy tự ghép vào project của mình nhé. php artisan ui bootstrap --auth0 php artisan ui bootstrap --auth1 À thằng Login có dùng đến php artisan ui bootstrap --auth4 nó cũng tương tự như Vue-Router thực hiện các yêu cầu XHR để tải trang được yêu cầu. php artisan ui bootstrap --auth2 Cuối cùng chúc bạn thực hiện thử với Inertia thành công nhé Tài liệu tham khảo
|