Livewire là một full-stack framework dành cho Laravel giúp việc xây dựng các giao diện động trở nên đơn giản mà không làm mất đi sự thoải mái của Laravel [Tham khảo. Laravel Livewire]. Là nhà phát triển web, chúng tôi thường xây dựng ứng dụng Laravel theo hai cách khác nhau
- Bằng cách viết các mẫu Blade và hiển thị ứng dụng ở phía máy chủ
- Bằng cách viết API phụ trợ chấp nhận và phản hồi bằng JSON, sau đó có khung giao diện người dùng như Vue, React hoặc Angular sử dụng API và triển khai giao diện người dùng
Livewire cung cấp tùy chọn thứ ba không yêu cầu bạn rời khỏi Laravel. Trong bài viết này, chúng ta sẽ tìm hiểu những điều cơ bản về Livewire và trình bày chi tiết về chúng
Livewire hoạt động như thế nào?
Nói một cách đơn giản, quy trình Livewire diễn ra như sau
- Livewire hiển thị đầu ra thành phần ban đầu cho trang giống như một mẫu Blade điển hình
- Khi người dùng tương tác với ứng dụng, Livewire sẽ gửi yêu cầu AJAX tới máy chủ với dữ liệu được cập nhật
- Máy chủ kết xuất lại thành phần và phản hồi bằng HTML được cập nhật
- Livewire sau đó thay đổi DOM với các thay đổi
Về cơ bản, nhà phát triển Laravel có giao diện người dùng và phần phụ trợ ở cùng một nơi, không cần lặp lại logic
Cài đặt Livewire và thông tin cơ bản
Cài đặt Livewire rất đơn giản, chúng ta phải có sẵn Laravel 7. 0 hoặc dự án cao hơn và PHP 7. 2. 5 hoặc cao hơn. Lệnh cài đặt Livewire là
Sau khi cài đặt, chúng tôi phải đưa nội dung vào lưỡi chính của mình
Tạo một thành phần Livewire có thể được thực hiện bằng lệnh sau
Lệnh này sẽ tạo hai tệp trong
Việc kết xuất thành phần có thể được thực hiện theo hai cách
Các thuộc tính công khai trên các lớp thành phần của bạn được cung cấp cho dạng xem mẫu thành phần. Giá trị của thuộc tính được đồng bộ hóa theo thời gian thực với chế độ xem, sao cho khi bạn cập nhật giá trị của thuộc tính trong chế độ xem, nó sẽ tự động được cập nhật trong lớp thành phần, điều này rất giống với liên kết dữ liệu trong các khung như Vue và . Việc ràng buộc dữ liệu có thể được thực hiện với cú pháp sau
Vì vậy, việc liên kết dữ liệu với các thuộc tính công khai trên thành phần thật tuyệt vời, nhưng Livewire cũng cung cấp các sự kiện phía máy khách liên kết với các phương thức trong thành phần của chúng tôi. Livewire cung cấp một vài lệnh để làm cho việc lắng nghe các sự kiện phía máy khách trở nên đơn giản và định dạng phổ biến cho chúng là. dây điện. [sự kiện phía máy khách đã gửi]=”[hành động]” hoặc trong các ví dụ về HTML
Các thành phần Livewire có thể giao tiếp với nhau thông qua hệ thống sự kiện toàn cầu. Miễn là hai thành phần sống trên cùng một trang, chúng có thể giao tiếp bằng cách sử dụng các sự kiện và trình nghe. Có một số cách để kích hoạt sự kiện
Và trình lắng nghe sự kiện được đăng ký trong thành phần trong thuộc tính $listeners. Chúng đại diện cho các cặp khóa-giá trị trong đó khóa là sự kiện cần lắng nghe và giá trị là phương thức gọi thành phần
Và cuối cùng nhưng không kém phần quan trọng, chúng ta sẽ trải qua quy trình xác thực Livewire tương tự như quy trình xác thực biểu mẫu tiêu chuẩn của Laravel. Livewire cung cấp thuộc tính $rules để đặt quy tắc xác thực trên cơ sở từng thành phần và phương thức $this->validate[] để xác thực thuộc tính của thành phần bằng các quy tắc đó
Và trong lưỡi kiếm, chúng tôi có đoạn mã sau
Nếu quá trình xác thực không thành công, thì ValidationException tiêu chuẩn sẽ bị ném và túi $errors tiêu chuẩn có sẵn bên trong chế độ xem của thành phần. Và thế là xong, verify khá đơn giản giống như trong Laravel
Phần kết luận
Laravel Livewire hoạt động như một trình kết nối giữa frontend và backend, nhưng nó cũng rất tuyệt vời cho sự gắn kết xã hội của các nhà phát triển trong thời kỳ đại dịch khó khăn này. Chúng tôi nhận được những lợi ích của phản ứng thời gian thực mà không cần phải viết nhiều JavaScript. Nếu ứng dụng Laravel của bạn không yêu cầu nhiều phản ứng ở phía máy khách, phụ thuộc vào nhiều dữ liệu từ cơ sở dữ liệu và cần phải nhanh nhất có thể thì Livewire là cách tốt nhất. Khái niệm đó áp dụng cho các trang web như GitHub và Hey sử dụng Livewire vì lợi ích to lớn của họ
Nếu bạn muốn tìm hiểu thêm về Livewire, vui lòng xem tài liệu tuyệt vời của họ trên trang web của họ cũng như một vài khóa học khác nhau trên Laracasts. Nếu bạn muốn liên lạc với chúng tôi và thảo luận về chủ đề này, hãy liên hệ với chúng tôi qua biểu mẫu bên dưới
Tác giả
Igor Popovski
5 bài viết mới nhất từ Igor
- Cải thiện sự gắn kết xã hội trong COVID-19 bằng cách sử dụng Laravel
- Làm cách nào để cải thiện với tư cách là một nhà phát triển PHP trong khi thực hành giãn cách xã hội?
- Laravel Eloquent – Mẹo & thủ thuật
- Tính năng bảo mật của Laravel
- Kiểm tra API REST với khung Robot
Liên hệ chúng tôi
Email của bạn*
Tin nhắn của bạn*
Tôi đã đọc và chấp nhận Chính sách quyền riêng tư của ⋮IWConnect - Điều khoản & Điều kiện
Bài viết gần đây
06 Th02 2023
Gặp gỡ Aleksandra – Lập trình viên đầy tham vọng yêu thích thiết kế nội thất01 Th02 2023
Tăng trưởng nằm trong DNA của chúng tôi- Khai trương văn phòng khác ở Novi Sad01 Th02 2023
Tích hợp Zoom API vào Mule Workflow – Hướng dẫn từng bướclưu trữ- tháng 2 năm 2023
- Tháng Giêng 2023
- tháng 12 năm 2022
- Cuộc sống tại IW
- Công nghệ
Các bộ phận kinh doanh của bạn đã được tối ưu hóa hoàn toàn hay bạn đang đối mặt với những thách thức nhất định trong một số bộ phận đó?