Sử dụng Jetstream trong Laravel 8 là gì?

Laravel Jetstream là một giàn giáo ứng dụng được thiết kế đẹp mắt cho Laravel. Jetstream cung cấp điểm khởi đầu hoàn hảo cho ứng dụng Laravel tiếp theo của bạn và bao gồm đăng nhập, đăng ký, xác minh email, xác thực hai yếu tố, quản lý phiên, hỗ trợ API qua Laravel Sanctum và quản lý nhóm tùy chọn

Jetstream được thiết kế bằng Tailwind CSS và cung cấp cho bạn lựa chọn giàn giáo Livewire hoặc Inertia

Tài liệu chính thức

Tài liệu về Jetstream có thể được tìm thấy trên trang web của Jetstream

Đóng góp

Cảm ơn bạn đã cân nhắc đóng góp cho Jetstream. Bạn có thể đọc hướng dẫn đóng góp tại đây

quy tắc ứng xử

Để đảm bảo rằng cộng đồng Laravel chào đón tất cả mọi người, vui lòng xem xét và tuân thủ

Lỗ hổng bảo mật

Vui lòng xem lại chính sách bảo mật của chúng tôi về cách báo cáo lỗ hổng bảo mật

Giấy phép

Laravel Jetstream là phần mềm mã nguồn mở được cấp phép theo giấy phép MIT

Laravel là một khung công tác PHP hiện đại cho phép các nhà phát triển xây dựng các ứng dụng web ở mọi quy mô. Với rất nhiều gói hỗ trợ và tiện ích mở rộng tạo nên hệ sinh thái của nó, Laravel đã trở thành một lựa chọn phổ biến để cho phép các nhà phát triển tập trung vào các tính năng ứng dụng của họ thay vì dành thời gian cho các tác vụ là một phần của quá trình khởi động ứng dụng

Ngoài các tính năng tích hợp đi kèm với khung, một số tiện ích mở rộng có thể tăng tốc thời gian phát triển - đó là trường hợp của Laravel JetStream mới. Trích dẫn các tài liệu chính thức

Laravel Jetstream là một giàn giáo ứng dụng được thiết kế đẹp mắt cho Laravel. Jetstream cung cấp điểm khởi đầu hoàn hảo cho ứng dụng Laravel tiếp theo của bạn và bao gồm đăng nhập, đăng ký, xác minh email, xác thực hai yếu tố, quản lý phiên, hỗ trợ API qua Laravel Sanctum và quản lý nhóm tùy chọn

Trong hướng dẫn này, tôi sẽ chia sẻ những gì tôi đã học được trong tuần trước khi làm việc trên một dự án hackaton với Laravel + JetStream. Chúng tôi sẽ xây dựng một ứng dụng công việc đơn giản bằng cách sử dụng các hành động Livewire trong một khu vực được bảo mật

1. Cài đặt môi trường

Trước tiên, bạn cần cài đặt Laravel trên máy cục bộ hoặc môi trường phát triển của mình. Dưới đây là một số tài nguyên có thể giúp bạn thiết lập

• Cách cài đặt và chạy Laravel với LEMP trên Ubuntu
• Cách cài đặt và chạy Laravel trên container với Docker Compose

Nếu bạn đã có môi trường phát triển PHP đang hoạt động với Composer, bạn có thể tạo một ứng dụng Laravel hoàn toàn mới với

composer create-project --prefer-dist laravel/laravel mytodo

Ngoài ra, bạn sẽ cần NPM để cài đặt các mô-đun theo yêu cầu của Jetstream/Livewire. Để cài đặt nó trên môi trường phát triển dựa trên Linux cục bộ, hãy chạy

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

Nếu bạn đang sử dụng thiết lập dựa trên Docker, bạn có thể đưa dòng sau vào Dockerfile của mình để cài đặt NPM

# Install NPM for Livewire
RUN curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

Dockerfile đầy đủ để tham khảo

Khi bạn có bản cài đặt Laravel đang hoạt động mà bạn có thể truy cập từ trình duyệt của mình, bạn có thể tiếp tục với phần còn lại của hướng dẫn này

2. Cài đặt Jetstream

Với việc cài đặt Laravel đang hoạt động và đang chạy, bước tiếp theo là cài đặt Jetstream với Composer. Trong trường hợp bạn đang chạy chương trình này với Docker Compose, đừng quên thêm tiền tố vào các lệnh tiếp theo bằng

# Install NPM for Livewire
RUN curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

1

composer require laravel/jetstream

Thiết lập Jetstream để sử dụng Livewire

php artisan jetstream:install livewire

Tiếp theo, cài đặt và xây dựng các phụ thuộc NPM

npm install && npm run dev

Cuối cùng, di chuyển cơ sở dữ liệu để tạo tất cả các bảng cần thiết

php artisan migrate

Bây giờ bạn có thể truy cập ứng dụng của mình và đăng ký người dùng mới tại

# Install NPM for Livewire
RUN curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

2. Đăng nhập có sẵn tại

# Install NPM for Livewire
RUN curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

3. Sau khi đăng ký người dùng và đăng nhập, bạn sẽ được chuyển hướng đến bảng điều khiển ứng dụng của mình

Ở góc trên cùng bên phải, bạn sẽ tìm thấy phần "hồ sơ", chứa cài đặt người dùng của bạn, bao gồm cả cấu hình 2fa

2. Tạo Di chuyển cơ sở dữ liệu cho danh sách việc cần làm

Chúng tôi sẽ cần một cái bàn để chứa các công việc cần làm của chúng tôi. Điều này sẽ yêu cầu một mô hình và di chuyển cơ sở dữ liệu. Bạn có thể sử dụng lệnh trợ giúp sau

# Install NPM for Livewire
RUN curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

4 để tạo một mô hình mới

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

1

Để giảm thiểu độ phức tạp, chúng ta sẽ tạo một bảng đơn giản không có khóa ngoại/mối quan hệ. Tuy nhiên, nếu bạn dự định triển khai ứng dụng này vào sản xuất, bạn nên đảm bảo rằng các mục trong danh sách được liên kết với người dùng đã tạo chúng, vì biểu mẫu đăng ký được mở theo mặc định

Thay thế nội dung của tệp di chuyển được tạo bằng lớp di chuyển sau

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

2

Bạn sẽ cần chạy di chuyển ngay bây giờ với

php artisan migrate

3. Tạo một phần Bảng điều khiển mới

Bây giờ là phần thú vị nhất của công việc và cũng là thử thách nhất, vì khoảng cách giữa việc sẵn sàng thiết lập ban đầu và hiểu tất cả các thành phần được cài đặt là khá lớn - trừ khi bạn đã quen với những thứ như Livewire và TailwindCSS, mà tôi

Jetstream sử dụng cả hai thành phần và Livewire, điều này có thể khiến một số người nhầm lẫn. Từ kinh nghiệm ngắn của tôi khi tìm ra tất cả những điều này, tôi tin rằng các thành phần Blade đi kèm chủ yếu là cấu trúc để bạn có thể tiếp tục và tạo các trang bảng điều khiển mới của mình bằng Livewire. Điều này sẽ cho phép bạn tích hợp các hành động javascript mà không cần viết một dòng JS nào

Chúng tôi sẽ tạo một phần mới trong bảng điều khiển để quản lý các mục việc cần làm. Sao chép chế độ xem trang tổng quan để sử dụng làm cơ sở cho trang mới của bạn

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

0

Tiếp theo, tạo hai thành phần Livewire.

# Install NPM for Livewire
RUN curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

5 và

# Install NPM for Livewire
RUN curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

6

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

1

Nếu bạn kiểm tra các thư mục ứng dụng của mình ngay bây giờ, bạn sẽ tìm thấy một thư mục

# Install NPM for Livewire
RUN curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

7 mới bên trong

# Install NPM for Livewire
RUN curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

8. Đây là những bộ điều khiển thành phần. Các chế độ xem đã tạo được đặt tại

# Install NPM for Livewire
RUN curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

9

Các thành phần này sẽ được hiển thị thông qua

composer require laravel/jetstream

0 mới. Mở tệp đó ngay bây giờ và thay thế phần

composer require laravel/jetstream

1 bằng thẻ Livewire để hiển thị thành phần

composer require laravel/jetstream

2. Chúng tôi cũng sẽ bao gồm thành phần biểu mẫu ở trên cùng. Đây là giao diện được cập nhật sẽ trông như thế nào

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

2

Ngoài ra, hãy cập nhật tệp

composer require laravel/jetstream

3 để bao gồm phần mới của bạn. Đây là cách mã

composer require laravel/jetstream

4 được cập nhật của tôi trông như thế nào

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

3

Bây giờ thêm một tuyến đường được bảo vệ mới vào

composer require laravel/jetstream

5. Tôi vừa sao chép lộ trình bảng điều khiển và cập nhật cho phù hợp

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

4

Nếu bạn truy cập trang tổng quan của mình ngay bây giờ, bạn sẽ thấy liên kết mới trong menu điều hướng. Nó sẽ hiển thị một trang trống, vì chúng tôi chưa tùy chỉnh các thành phần của mình

Tiếp theo, chúng tôi sẽ tùy chỉnh các thành phần của chúng tôi

4. Tạo biểu mẫu mục việc cần làm và liệt kê các mục trong bảng điều khiển

Để bao gồm các mục mới trong danh sách, chúng tôi sẽ cần tạo một biểu mẫu. Tin xấu là không có lệnh để khởi động điều đó cho bạn, nhưng tin tốt là bạn có thể sử dụng các mẫu hồ sơ đi kèm tại

composer require laravel/jetstream

6 làm cơ sở cho công việc của mình

Mở tệp

composer require laravel/jetstream

7 và thay thế nội dung bằng nội dung sau

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

5

Biểu mẫu đã sẵn sàng, nhưng chúng ta vẫn cần thiết lập hành động sẽ xử lý biểu mẫu này. Mở tệp

composer require laravel/jetstream

8 và cập nhật nó để bao gồm phương thức

composer require laravel/jetstream

9

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

6

Cập nhật bộ điều khiển thành phần "hiển thị" để đưa các mục Việc cần làm vào dạng xem, sau khi lấy chúng bằng lệnh gọi Eloquent. Chúng tôi cũng đã triển khai ở đây một trình xử lý sự kiện sẽ được kích hoạt khi một mục mới được lưu, để làm mới danh sách các mục

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

7

Cập nhật chế độ xem thành phần "hiển thị" để liệt kê các mục có vòng lặp

php artisan jetstream:install livewire

0

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

8

5. Tạo các hành động Livewire để cập nhật và xóa các mục

Cuối cùng nhưng không kém phần quan trọng, chúng tôi cần có thể xóa các mục và đánh dấu chúng là "xong" [hoặc "hoàn tác"]. Chúng tôi có thể thực hiện những điều này khá dễ dàng bằng cách sử dụng các hành động Livewire

Trước tiên, hãy cập nhật bộ điều khiển thành phần

php artisan jetstream:install livewire

1 của bạn để bao gồm ba phương thức ngắn.

php artisan jetstream:install livewire

2,

php artisan jetstream:install livewire

3 và

php artisan jetstream:install livewire

4

curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

9

Cuối cùng, hãy cập nhật chế độ xem của bạn để bao gồm các nút hoạt động cho những hành động đó

# Install NPM for Livewire
RUN curl -sL //deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -yq nodejs build-essential

0

Và ta-da. Cũng giống như vậy, không cần viết bất kỳ Javascript thực tế nào, bạn có các thành phần động gọi bộ điều khiển bên ngoài và tự động làm mới. Đây là phần yêu thích của tôi trong tất cả

Đi đâu từ đây

Sau thử nghiệm ban đầu này, bạn có thể muốn tìm hiểu sâu hơn về Livewire và TailwindCSS để tùy chỉnh giao diện của ứng dụng cũng như triển khai các hành động và chế độ xem phức tạp hơn

Nếu bạn chưa quen với Laravel và muốn cải thiện ứng dụng demo này để làm cho nó hoạt động đầy đủ, một thử nghiệm tốt là cập nhật di chuyển các mục việc cần làm và mô hình Eloquent để bao gồm một người dùng sở hữu mục đó. Sau đó, cập nhật hành động

composer require laravel/jetstream

2 tương ứng để chỉ lọc các mục cho người dùng đã đăng nhập đó

đường dẫn nhanh

• Tài liệu Laravel
• Tài liệu Livewire
• Tài liệu TailwindCSS

Vui lòng để lại nhận xét nếu bạn có câu hỏi, tôi vẫn đang tìm hiểu những điều này nhưng tôi hy vọng sẽ viết thêm về Laravel và Jetstream;]

Jetstream Livewire là gì?

Laravel Jetstream có miễn phí không?

Làm cách nào để tạo Laravel Jetstream?

Tôi có nên sử dụng Laravel không?