Làm cách nào để sử dụng Bootstrap auth trong Laravel 8?

Giả sử bạn là người mới làm quen với Laravel 8, tôi có thể hỗ trợ bạn cài đặt bootstrap 4 trong Laravel 8. đó là một cách cực kỳ đơn giản để cài đặt bằng cách sử dụng gói tác giả Laravel ui. Gói Laravel ui thêm Trợ giúp về Laravel 8

Laravel ui đưa ra cách tiếp cận để cài đặt bootstrap, vue và thiết lập phản ứng. họ cũng cung cấp khung xác thực để đăng nhập và đăng ký. Laravel 8 cung cấp một cách tiếp cận đơn giản để làm việc với bootstrap, vue và phản ứng

Để cài đặt bootstrap 4 trong các dự án Laravel 8 của bạn thì bạn phải cài đặt gói trình soạn thảo Laravel ui sau đây để nhận lệnh

Composer require Laravel/ui

Sau khi cài đặt thành công gói trên, chúng tôi đã sẵn sàng cài đặt bootstrap 4 với ứng dụng của mình

chúng ta có thể cài đặt theo hai cách, một là cài đặt thiết lập bootstrap 4 đơn giản và cách khác là cài đặt bootstrap 4 bằng auth. Vì vậy, làm thế nào về chúng ta thấy cả hai cách

Trong hướng dẫn này, tôi sẽ chia sẻ cách thiết lập Laravel Fortity với Bootstrap 4 trong ứng dụng Laravel 8. chúng tôi sẽ bao gồm

• thiết lập ứng dụng laravel
• Đăng ký người dùng
• đăng nhập
• đặt lại mật khẩu
• Email xác thực

Cài đặt dự án Laravel 8

composer create-project --prefer-dist laravel/laravel lara8auth
cd lara8auth

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Mở dự án mới tạo của bạn trong IDE bạn chọn, tôi sẽ sử dụng Visual Studio Code

Cấu hình cơ sở dữ liệu

trong bạn. env cập nhật các biến cấu hình cơ sở dữ liệu để ứng dụng laravel của bạn biết cơ sở dữ liệu nào sẽ sử dụng

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=lara8auth
DB_USERNAME=root
DB_PASSWORD=

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cài đặt Fortify

composer require laravel/fortify

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tiếp theo, chúng tôi sẽ xuất bản tài nguyên của Fortify

php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tiếp theo, chúng tôi sẽ di chuyển cơ sở dữ liệu

php artisan migrate

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cài đặt bootstrap

Chúng tôi cũng sẽ cài đặt jquery và popper. js vì bootstrap yêu cầu các gói này

npm i
npm install --save bootstrap jquery popper.js cross-env

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhập gói vào resource/js/bootstrap. tập tin js

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Xóa thư mục resource/css và tạo ứng dụng. tệp scss trong tài nguyên/sass

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhập các gói trong tài nguyên/sass/ứng dụng. tập tin scss

// bootstrap
@import "~bootstrap/scss/bootstrap";

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Gói web cập nhật tiếp theo. pha trộn. js

composer create-project --prefer-dist laravel/laravel lara8auth
cd lara8auth

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Biên dịch tài sản

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=lara8auth
DB_USERNAME=root
DB_PASSWORD=

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Thêm lượt xem xác thực

Trong thư mục tài nguyên/lượt xem của bạn, hãy tạo hai thư mục auth và bố cục

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=lara8auth
DB_USERNAME=root
DB_PASSWORD=

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tiếp theo tạo các khung nhìn sau

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=lara8auth
DB_USERNAME=root
DB_PASSWORD=

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Mã cho các tệp được tạo ở trên được liệt kê bên dưới

Cập nhật nhà cung cấp Fortify

Tiếp theo, chúng ta sẽ cần cập nhật phương thức khởi động trong app/Providers/FortifyServiceProvider. Điều này là để cho fortify biết cách xác thực người dùng và vị trí của các chế độ xem mà chúng tôi đã tạo sớm

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=lara8auth
DB_USERNAME=root
DB_PASSWORD=

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tiếp theo đăng ký FortifyServiceProvider bằng cách thêm nó vào mảng nhà cung cấp trong config\app. php

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=lara8auth
DB_USERNAME=root
DB_PASSWORD=

Trong ứng dụng/Mô hình/Người dùng của bạn. php đảm bảo lớp thực hiện MustVerifyEmail

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=lara8auth
DB_USERNAME=root
DB_PASSWORD=

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi cũng cần thông báo cho fortify rằng chúng tôi muốn bật xác minh email. Trong ứng dụng/tăng cường. tệp php bỏ ghi chú dòng có nội dung

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=lara8auth
DB_USERNAME=root
DB_PASSWORD=

Nếu bạn muốn kiểm tra xác minh email, bạn sẽ cần cập nhật các biến email của mình trong. env. Bạn có thể sử dụng mailtrap máy chủ thư miễn phí. io

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=lara8auth
DB_USERNAME=root
DB_PASSWORD=

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cuối cùng, chúng tôi sẽ thêm tuyến đường về nhà vào tuyến đường/web. tập tin php

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=lara8auth
DB_USERNAME=root
DB_PASSWORD=

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng tôi đã hoàn thành thiết lập của chúng tôi. Bạn nên có một hệ thống xác thực đang hoạt động bằng cách sử dụng laravel fortify và bootstrap

Phần kết luận

Để tìm hiểu thêm về các tính năng của laravel fortify, bạn có thể truy cập kho lưu trữ github Fortify

Cảm ơn đã đọc vui lòng bình luận bên dưới và chia sẻ nếu bạn thấy bài viết này hữu ích

Trong bài viết tiếp theo của tôi, tôi sẽ đề cập đến việc cập nhật thông tin hồ sơ người dùng và thay đổi mật khẩu của bạn từ trang hồ sơ

Làm cách nào để tạo auth trong Laravel 8 bằng bootstrap?

Làm cách nào để cài đặt Bootstrap auth trong Laravel?

Làm cách nào để sử dụng auth trong Laravel 8?

Laravel 8 có đi kèm với bootstrap không?