Tìm hiểu về Livewire trong Laravel
- Tram Ho
Giới Thiệu
Livewire là một full-stack framework cho Laravel giúp việc xây dựng các giao diện động trở nên đơn giản hơn. Đây là một stack tuyệt vời để lựa chọn nếu bạn muốn xây dựng một SPA nhưng cảm thấy khó khăn khi tìm hiểu về các framework như React.js và Vue.js.
Để hiểu rõ hơn về Livewire và cách hoạt động của nó thì chúng ta cùng xây một ứng dụng live search user. Chúng ta cùng bắt đầu ngay nào.
Install project và tạo database
Phiên bản Livewire 2.x hiện tại yêu cầu laravel 7.0 nên chúng ta sẽ tạo một project laravel 7
1 2 | composer create-project --prefer-dist laravel/laravel:^7.0 livewire |
Sử dụng seeder và factory để tạo ra dữ liệu cho bảng user
1 2 3 4 5 6 7 8 | class DatabaseSeeder extends Seeder { public function run() { factory(App\User::class, 20)->create(); } } |
Tiến hành chạy migrate và seeder để tạo dữ liệu
1 2 3 | php artisan migrate php artisan db:seed |
Install Livewire
Install package livewire thông qua câu lệnh
1 2 | composer require livewire/livewire |
Tạo file config của livewire
1 2 | php artisan livewire:publish --config |
Tạo tệp assets của livewire trong public
1 2 | php artisan livewire:publish --assets |
Tạo component và triển khai ứng dụng
Chúng ta sẽ tạo một component Search để phục vụ cho việc search và hiển thị danh sách các user
1 2 | php artisan make:livewire Search |
Khi tạo component Search thì Livewire sẽ tạo ra hai file:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Livewire</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Livewire<span class="token punctuation">\</span>Component</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">Search</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'livewire.search'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
1 2 3 4 | <span class="token operator"><</span>div<span class="token operator">></span> <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
Nhìn vào code của hai file chúng ta có thể thấy hàm render của class Search dùng để hiển thị view của component search.
Chúng ta cần chỉnh sửa hai file trên để thực hiện chức năng live search
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Livewire</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Livewire<span class="token punctuation">\</span>Component</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>User</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name">Search</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span> <span class="token keyword">public</span> <span class="token variable">$search</span> <span class="token operator">=</span> <span class="token single-quoted-string string">''</span><span class="token punctuation">;</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">view</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'livewire.search'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'users'</span> <span class="token operator">=</span><span class="token operator">></span> User<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'name'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'like'</span><span class="token punctuation">,</span><span class="token single-quoted-string string">'%'</span><span class="token punctuation">.</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">search</span><span class="token punctuation">.</span><span class="token single-quoted-string string">'%'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
1 2 3 4 5 6 7 8 9 10 | <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>input wire<span class="token punctuation">:</span>model<span class="token operator">=</span><span class="token double-quoted-string string">"search"</span> type<span class="token operator">=</span><span class="token double-quoted-string string">"text"</span> placeholder<span class="token operator">=</span><span class="token double-quoted-string string">"Search users..."</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>ul<span class="token operator">></span> @<span class="token keyword">foreach</span><span class="token punctuation">(</span><span class="token variable">$users</span> <span class="token keyword">as</span> <span class="token variable">$user</span><span class="token punctuation">)</span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">name</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> @<span class="token keyword">endforeach</span> <span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> |
Chúng ta có thể thấy được từ khóa quan trọng là wire:model="search", đây là một directive của Livewire. Nó hoạt động mỗi khi giá trị trong thẻ input thay đổi thì thuộc tính search trong class Search sẽ thay đổi theo giá trị của thẻ input với điều kiện thuộc tính search là public. Ví dụ chúng ta nhập vào ô input một chuỗi "Quang" thì giá trị $search = "Quang" và $search sẽ được cập nhật liên tục khi ta nhập vào.
Khi $search thay đổi có nghĩa là Livewire đã gửi một ajax request tới server, khi đó hàm render() sẽ chạy và cập nhật lại danh sách user tìm được theo biến $search và trả dữ liệu về cho component search
Tạo một file list-user.blade.php và một route để hiển thị ô input và danh sách user.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token operator"><</span>html<span class="token operator">></span> <span class="token operator"><</span>head<span class="token operator">></span> @livewireStyles <span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span> <span class="token operator"><</span>body<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"container"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"row justify-content-center"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"col-md-8"</span><span class="token operator">></span> @<span class="token function">livewire</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'search'</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> @livewireScripts <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span> |
1 2 3 4 | Route::get('/users', function () { return view('list-user'); }); |
Trong đó @livewireStyles và @livewireScripts dùng để include css và js của Livewire vào trong trang web, còn @livewire('search') dùng để include component search.
Bạn hãy mở trình duyệt lên và xem kết quả đã thực hiện được.
Nếu như bạn gặp vấn đề trang web không hoạt động có thể trang web của bạn không thể khởi tạo new Livewire() do quá trình nhúng javascript của livewire vào trang web bị lỗi, không tìm được đường dẫn chính xác tới file js. Hãy vào file
config/livewire.phpvà chỉnh sửa key'asset_url' = env('APP_URL'), có thể thayenv('APP_URL')bằng một đường link cụ thể tương ứng với project của bạn.
Một số Directive thường dùng của Livewire
wire:click="foo"Nhận sự kiện click chuột và chạy hàm foo bên trong component.wire:keydown.enter="foo"Nhận sự kiện keydown của phím enter và chạy hàm foo bên trong Component.wire:foo="bar"Lắng nghe một sự kiện của trình duyệt được gọi là “foo”. (Bạn có thể lắng nghe bất kỳ sự kiện DOM nào của trình duyệt – không chỉ những sự kiện do Livewire kích hoạt).wire:model="foo"Giả sử$foolà một thuộc tính công khai trên lớp thành phần, mỗi khi một phần tử input với chỉ thị này được cập nhật, thuộc tính sẽ đồng bộ hóa với giá trị của nó.wire:init="foo"Chạy phương thức foo() trong component ngay sau khi nó hiển thị trên trang web.
Tổng Kết
Vậy là chúng ta đã hoàn thành một ứng dụng live search đơn giản với live wire. Qua quá trình thực hiện thì có thể thấy Livewire là một frame work mạnh mẽ khá dễ sử dụng và có nhiều tính năng, đáng để nghiên cứu trong tương lai. Cảm ơn các bạn đã theo dõi bài viết, hy vọng chúng ta sẽ gặp lại ở những bài viết tiếp theo.
Tài liệu tham khảo: https://laravel-livewire.com/