programming

Làm cách nào để thêm Livewire vào trang chào mừng của Laravel?

Là nhà phát triển, chúng tôi luôn tìm kiếm các công cụ, thư viện và khung giúp cuộc sống của chúng tôi dễ dàng hơn. Không có gì khác biệt đối với các nhà phát triển Laravel. Đó là lý do tại sao chúng tôi yêu thích khuôn khổ này ngay từ đầu, vì mọi thứ đều trở nên dễ dàng đối với chúng tôi — cho phép chúng tôi tập trung vào việc xây dựng các ứng dụng tuyệt vời thay vì sa lầy vào cách triển khai mọi thứ

Trong hướng dẫn này, chúng ta sẽ xem xét một công cụ khác có thể giúp cuộc sống của bạn trở nên dễ dàng hơn với tư cách là nhà phát triển Laravel. Cụ thể, chúng ta sẽ xem xét Livewire, một full-stack framework cho Laravel cho phép chúng ta xây dựng các giao diện động mà không cần viết nhiều JavaScript. Mọi thứ về cơ bản được thực hiện với các công cụ mà bạn đã quen thuộc với tư cách là nhà phát triển Laravel

Livewire là gì?

Livewire là một thư viện cho phép chúng tôi xây dựng các giao diện động và phản ứng bằng Blade và một chút JavaScript. Tôi nói “một chút” bởi vì chúng tôi sẽ chỉ viết JavaScript để truyền dữ liệu qua các sự kiện trình duyệt và phản hồi chúng

Bạn có thể sử dụng Livewire để triển khai chức năng sau mà không cần tải lại trang

phân trang
xác thực biểu mẫu
thông báo
xem trước tập tin tải lên

Lưu ý rằng Livewire không giới hạn ở chức năng trên. Bạn có thể sử dụng nó cho nhiều hơn nữa. Các tính năng trên chỉ là tính năng phổ biến nhất mà bạn có thể muốn triển khai trong ứng dụng của mình

Livewire vs Vue

Vue luôn là framework giao diện người dùng ưa thích cho các nhà phát triển Laravel để thêm tính tương tác vào ứng dụng của họ. Nếu bạn đã sử dụng Vue để tăng sức mạnh cho ứng dụng của mình, Livewire là tùy chọn để bạn tìm hiểu. Nhưng nếu bạn còn khá mới với việc làm giao diện người dùng trong Laravel và bạn đang xem Livewire như một giải pháp thay thế Vue, thì vâng, bạn có thể sử dụng Livewire như một giải pháp thay thế cho Vue. Quá trình học
sẽ không khó khăn như học Vue, vì bạn sẽ chủ yếu sử dụng Blade để viết các tệp mẫu của mình.

Để biết thêm thông tin về cách so sánh Livewire và Vue, hãy xem “Laravel Livewire vs Vue”

tổng quan về ứng dụng

Chúng tôi sẽ tạo một ứng dụng CRUD trực tiếp. Vì vậy, về cơ bản, đây là một ứng dụng CRUD mà không cần tải lại trang. Livewire sẽ xử lý tất cả các yêu cầu AJAX cần thiết để cập nhật giao diện người dùng. Điều này bao gồm lọc kết quả qua trường tìm kiếm, sắp xếp theo tiêu đề cột và phân trang đơn giản [trước và sau]. Tạo và chỉnh sửa người dùng sẽ sử dụng Bootstrap Modals

Bạn có thể xem mã nguồn của dự án này trên repo GitHub của nó

điều kiện tiên quyết

Hướng dẫn này giả định rằng bạn có kinh nghiệm phát triển ứng dụng PHP. Kinh nghiệm về Laravel là hữu ích nhưng không bắt buộc. Bạn vẫn có thể làm theo nếu bạn chỉ biết PHP đơn giản hoặc PHP framework khác

Hướng dẫn này giả định rằng bạn đã cài đặt phần mềm sau trên máy của mình

PHP
mysql
NGINX
nhà soạn nhạc
Nút và npm

Nếu bạn đang sử dụng máy Mac, một tùy chọn thuận tiện hơn thay vì cài đặt MySQL và NGINX là cài đặt DBngin và Laravel Valet.

Thiết lập dự án

Bây giờ bạn có thể tạo một dự án Laravel mới

composer create-project laravel/laravel livecrud

Điều hướng bên trong thư mục

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

7 mà nó sẽ tạo. Đây sẽ là thư mục gốc của dự án nơi bạn thực hiện tất cả các lệnh trong hướng dẫn này

Bước tiếp theo là tạo cơ sở dữ liệu MySQL bằng công cụ quản lý cơ sở dữ liệu bạn chọn. Đặt tên cơ sở dữ liệu là

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

Cài đặt các phụ thuộc back-end

Chúng tôi chỉ có một phụ thuộc cho phần cuối và đó là Livewire. Cài đặt nó bằng lệnh sau

composer require livewire/livewire:2.3

Ghi chú. chúng tôi đang cài đặt phiên bản cụ thể mà tôi đã sử dụng để tạo bản trình diễn. Nếu bạn đang đọc phần này trong tương lai, bạn nên cài đặt phiên bản mới nhất. Đừng quên kiểm tra nhật ký thay đổi của dự án trên repo GitHub của họ để đảm bảo bạn không bỏ lỡ bất cứ điều gì

Thiết lập cơ sở dữ liệu

Cập nhật di chuyển mặc định để tạo bảng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

9 và thêm các trường tùy chỉnh mà chúng tôi sẽ sử dụng

// database/migrations/_create_users_table.php
public function up[]
{
    Schema::create['users', function [Blueprint $table] {
        $table->id[];
        $table->string['name'];
        $table->string['email']->unique[];
        $table->enum['user_type', ['admin', 'user']]->default['user']; // add this
        $table->tinyInteger['age']; // add this
        $table->string['address']->nullable[]; // add this
        $table->timestamp['email_verified_at']->nullable[];
        $table->string['password'];
        $table->rememberToken[];
        $table->timestamps[];
    }];
}

Tiếp theo, cập nhật tệp

php artisan migrate
php artisan db:seed

0 và cung cấp giá trị cho các trường tùy chỉnh mà chúng tôi đã thêm

// database/factories/UserFactory.php
public function definition[]
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique[]->safeEmail,
        'email_verified_at' => now[],
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random[10],

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween[18, 60],
        'address' => $this->faker->address,
    ];
}

Cuối cùng, mở tệp

php artisan migrate
php artisan db:seed

1 và bỏ ghi chú cuộc gọi để tạo người dùng giả

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

Đừng quên cập nhật tệp

php artisan migrate
php artisan db:seed

2 của bạn với cơ sở dữ liệu thử nghiệm mà bạn sẽ sử dụng. Trong trường hợp này, tôi đã đặt tên cơ sở dữ liệu là

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

7. Khi đã xong, hãy chạy các lần di chuyển và trình gieo hạt để điền vào cơ sở dữ liệu

php artisan migrate
php artisan db:seed

Thiết lập phụ thuộc front-end

Để đơn giản hóa mọi thứ, chúng tôi sẽ sử dụng giàn giáo Laravel cho Bootstrap. Để sử dụng nó, trước tiên bạn cần cài đặt gói

php artisan migrate
php artisan db:seed

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

Tiếp theo, cài đặt Bootstrap 4. Điều này thêm cấu hình vào tệp

php artisan migrate
php artisan db:seed

5 của bạn và tạo tệp

php artisan migrate
php artisan db:seed

6 và

php artisan migrate
php artisan db:seed

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

Tiếp theo, thêm Phông chữ Tuyệt vời vào tệp ________ 67. Theo mặc định, phải có phông chữ, biến và nhập bootstrap trong đó

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

Khi đã xong, hãy cài đặt tất cả các phụ thuộc

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

Tạo thành phần Livewire

Bạn có thể sử dụng lệnh

php artisan migrate
php artisan db:seed

9 để tạo thành phần Livewire mới

composer require livewire/livewire:2.3

Điều này sẽ tạo ra các tập tin sau

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

40 — bộ điều khiển cho thành phần

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

41 — tệp xem cho thành phần

Mở tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

41 và thêm vào như sau

composer require livewire/livewire:2.3

Đó là rất nhiều mã, vì vậy hãy chia nhỏ mã từ trên xuống dưới. Đầu tiên, chúng tôi có trường tìm kiếm để tìm kiếm người dùng. Chúng tôi muốn người dùng có thể xem kết quả truy vấn của họ khi họ nhập. Cách chúng tôi thực hiện điều đó là bằng cách sử dụng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

43. Điều này cho phép chúng tôi chuyển tên của biến từ lớp thành phần [

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

44]. Bất cứ điều gì người dùng nhập vào trường này sau đó sẽ được đồng bộ hóa với giá trị cho biến đó. Trong trường hợp này, chúng ta ràng buộc biến

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

composer require livewire/livewire:2.3

Sau này trong mã cho lớp thành phần LiveTable, bạn sẽ thấy biến ràng buộc như trong mã bên dưới. Chúng được gọi là thuộc tính trong Livewire. Nếu bạn đến từ Vue, thì điều này tương đương với trạng thái. Chỉ có thể truy cập trực tiếp các thuộc tính

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

46 từ giao diện người dùng

composer require livewire/livewire:2.3

Tiếp theo, chúng ta có các tiêu đề bảng. Ở đây, chúng tôi đang sử dụng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

47 để lắng nghe các sự kiện nhấp chuột trong thành phần liên kết. Đây được gọi là các hành động trong Livewire. Về cơ bản, chúng cho phép bạn lắng nghe các sự kiện của trình duyệt nhưng phản hồi nó bằng các phương thức ở mặt sau. Sử dụng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

48 ngăn hành động mặc định của trình duyệt. Giá trị bạn cung cấp cho đây là tên của phương thức bạn muốn thực thi trong lớp thành phần. Trong trường hợp này là

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

49. Sau đó, chúng tôi chuyển vào tên của cột mà chúng tôi muốn sắp xếp

composer require livewire/livewire:2.3

Đây là phương thức tương ứng trong lớp thành phần trông như thế nào. Chúng tôi sẽ thêm mã cho điều này sau

composer require livewire/livewire:2.3

Trong đoạn mã trên, chúng tôi đã bao gồm một tệp xem khác có tên là

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

80. Tạo một tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

81 và thêm vào như sau. Thao tác này sẽ hiển thị biểu tượng sắp xếp hiện tại dựa trên cách sắp xếp hiện tại do người dùng chọn

composer require livewire/livewire:2.3

Đó là khá nhiều cho đánh dấu. Phần còn lại của mã về cơ bản giống như mẫu Blade tiêu chuẩn của bạn. Vì vậy, chúng tôi vẫn sử dụng phương pháp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

82 để hiển thị phân trang và chỉ thị

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

83 để hiển thị một cái gì đó có điều kiện

Bây giờ chúng ta chuyển sang lớp thành phần. Mở tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

40 và cập nhật nó để chứa đoạn mã sau

composer require livewire/livewire:2.3

Như đã đề cập trước đó, chúng ta đã ràng buộc giá trị của biến

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

45 với một trường văn bản cụ thể ở phía máy khách thông qua biến

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

43. Vì vậy, mỗi khi người dùng gõ một cái gì đó, biến

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

45 cũng được cập nhật. Và khi nó được cập nhật, thành phần này cũng được kết xuất lại. Điều này là do trong hàm

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

88, chúng tôi phụ thuộc vào giá trị của biến

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

45 để tìm nạp dữ liệu người dùng. Vì vậy, đối với mỗi lần nhấn phím, chúng tôi thực sự đang tìm nạp dữ liệu từ cơ sở dữ liệu bằng cách cung cấp truy vấn của người dùng và sắp xếp đã chọn [chúng tôi sẽ xem xét cách cải thiện điều này sau trong phần Tối ưu hóa]

composer require livewire/livewire:2.3

Phương pháp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

00 là phương pháp chúng tôi sử dụng để cập nhật trường để sắp xếp bảng người dùng. Mỗi trường có thể được sắp xếp theo thứ tự tăng dần hoặc giảm dần. Theo mặc định, nhấp vào một trường sắp xếp sẽ sắp xếp nó theo thứ tự tăng dần. Nhấp vào nó một lần nữa sẽ làm ngược lại

composer require livewire/livewire:2.3

Khi lọc bảng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

9, chúng tôi sử dụng phương pháp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

02. Nhưng chúng tôi chưa thêm điều đó. Cập nhật tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

03 để bao gồm phương pháp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

02. Điều này lọc bảng người dùng để chỉ trả lại người dùng loại

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

05. Sau đó, phần còn lại của các điều kiện sẽ là các trường chúng tôi muốn sử dụng để lọc trường tìm kiếm

// database/migrations/_create_users_table.php
public function up[]
{
    Schema::create['users', function [Blueprint $table] {
        $table->id[];
        $table->string['name'];
        $table->string['email']->unique[];
        $table->enum['user_type', ['admin', 'user']]->default['user']; // add this
        $table->tinyInteger['age']; // add this
        $table->string['address']->nullable[]; // add this
        $table->timestamp['email_verified_at']->nullable[];
        $table->string['password'];
        $table->rememberToken[];
        $table->timestamps[];
    }];
}

Sử dụng Thành phần Livewire

Khi đã xong, chức năng tìm kiếm và sắp xếp sẽ hoạt động tốt. Mở tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

06 của bạn và thay thế tuyến đường hiện có bằng tuyến đường sau

// database/migrations/_create_users_table.php
public function up[]
{
    Schema::create['users', function [Blueprint $table] {
        $table->id[];
        $table->string['name'];
        $table->string['email']->unique[];
        $table->enum['user_type', ['admin', 'user']]->default['user']; // add this
        $table->tinyInteger['age']; // add this
        $table->string['address']->nullable[]; // add this
        $table->timestamp['email_verified_at']->nullable[];
        $table->string['password'];
        $table->rememberToken[];
        $table->timestamps[];
    }];
}

Tiếp theo, tạo một tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

07 và thêm vào như sau. Đây là nơi chúng tôi sử dụng thành phần Bảng trực tiếp mà chúng tôi đã tạo. Chúng tôi có thể kết xuất nó vào trang giống như cách bạn làm với một thành phần tiêu chuẩn. Sự khác biệt duy nhất là chúng ta cần thêm tiền tố vào tên thành phần bằng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

08 và chúng ta cũng cần sử dụng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

09 để hiển thị tệp JavaScript Livewire

// database/migrations/_create_users_table.php
public function up[]
{
    Schema::create['users', function [Blueprint $table] {
        $table->id[];
        $table->string['name'];
        $table->string['email']->unique[];
        $table->enum['user_type', ['admin', 'user']]->default['user']; // add this
        $table->tinyInteger['age']; // add this
        $table->string['address']->nullable[]; // add this
        $table->timestamp['email_verified_at']->nullable[];
        $table->string['password'];
        $table->rememberToken[];
        $table->timestamps[];
    }];
}

Tại thời điểm này, bây giờ bạn có thể bắt đầu chạy ứng dụng. Cách dễ nhất là phục vụ dự án bằng Artisan

// database/migrations/_create_users_table.php
public function up[]
{
    Schema::create['users', function [Blueprint $table] {
        $table->id[];
        $table->string['name'];
        $table->string['email']->unique[];
        $table->enum['user_type', ['admin', 'user']]->default['user']; // add this
        $table->tinyInteger['age']; // add this
        $table->string['address']->nullable[]; // add this
        $table->timestamp['email_verified_at']->nullable[];
        $table->string['password'];
        $table->rememberToken[];
        $table->timestamps[];
    }];
}

Sau đó truy cập ứng dụng trong trình duyệt của bạn tại http. //127. 0. 0. 1. 8000/

Nếu bạn đã thiết lập một miền cục bộ, thông qua Laravel Valet hoặc một số công cụ khác, thì bạn cũng có thể sử dụng miền đó

Xóa người dùng

Tiếp theo, hãy thực hiện việc xóa người dùng. Giống như trước đó, chúng tôi sử dụng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

10 để lắng nghe các sự kiện nhấp chuột trên nút xóa. Chỉ lần này, chúng ta sẽ không gọi trực tiếp một phương thức trong lớp thành phần. Đó là bởi vì đây là thao tác xóa. Chúng tôi không muốn người dùng xóa nhầm ai đó nên chúng tôi cần hiển thị một số loại xác nhận trước khi tiến hành xóa. Đây là trường hợp sử dụng hoàn hảo cho Sự kiện Livewire. Điều này cho phép chúng tôi gửi và nhận các sự kiện cụ thể đến và từ máy chủ. Bạn có thể sử dụng nó bằng cách gọi phương thức

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

11. Đối số đầu tiên của nó sẽ là tên của sự kiện, trong khi các đối số tiếp theo là các đối số bạn muốn chuyển đến người nghe cho sự kiện đó. Trong trường hợp này, chúng tôi có sự kiện

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

12 và chúng tôi đang chuyển ID và tên của người dùng làm đối số cho người nghe

Mở tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

41 và cập nhật mã cho nút xóa

// database/migrations/_create_users_table.php
public function up[]
{
    Schema::create['users', function [Blueprint $table] {
        $table->id[];
        $table->string['name'];
        $table->string['email']->unique[];
        $table->enum['user_type', ['admin', 'user']]->default['user']; // add this
        $table->tinyInteger['age']; // add this
        $table->string['address']->nullable[]; // add this
        $table->timestamp['email_verified_at']->nullable[];
        $table->string['password'];
        $table->rememberToken[];
        $table->timestamps[];
    }];
}

Sau đó, chúng tôi có thể lắng nghe sự kiện đó trên máy chủ hoặc phía máy khách. Vì tất cả những gì chúng tôi muốn là hiển thị xác nhận khi sự kiện này được kích hoạt, nên chúng tôi lắng nghe nó ở phía máy khách. Tạo một tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

14 và thêm vào như sau. Như bạn có thể thấy, chúng tôi có quyền truy cập vào

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

15 và

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

16 của người dùng thông qua các đối số được truyền cho người nghe

// database/migrations/_create_users_table.php
public function up[]
{
    Schema::create['users', function [Blueprint $table] {
        $table->id[];
        $table->string['name'];
        $table->string['email']->unique[];
        $table->enum['user_type', ['admin', 'user']]->default['user']; // add this
        $table->tinyInteger['age']; // add this
        $table->string['address']->nullable[]; // add this
        $table->timestamp['email_verified_at']->nullable[];
        $table->string['password'];
        $table->rememberToken[];
        $table->timestamps[];
    }];
}

Khi người dùng đồng ý, chúng tôi sẽ phát ra sự kiện sẽ thực sự xóa người dùng. Để lắng nghe các sự kiện ở phía sau, hãy tạo một mảng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

17 chứa tên của người nghe và các phương thức lớp mà chúng ánh xạ tới. Trong trường hợp này, tên của sự kiện và phương thức giống nhau, vì vậy chúng tôi chỉ cần thêm

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

18 Phương thức

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

19 sau đó sẽ xóa người dùng bằng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

15 tương ứng

// database/migrations/_create_users_table.php
public function up[]
{
    Schema::create['users', function [Blueprint $table] {
        $table->id[];
        $table->string['name'];
        $table->string['email']->unique[];
        $table->enum['user_type', ['admin', 'user']]->default['user']; // add this
        $table->tinyInteger['age']; // add this
        $table->string['address']->nullable[]; // add this
        $table->timestamp['email_verified_at']->nullable[];
        $table->string['password'];
        $table->rememberToken[];
        $table->timestamps[];
    }];
}

Nếu bạn muốn một số loại thông báo khi người dùng bị xóa, bạn có thể gửi một sự kiện trình duyệt

// database/migrations/_create_users_table.php
public function up[]
{
    Schema::create['users', function [Blueprint $table] {
        $table->id[];
        $table->string['name'];
        $table->string['email']->unique[];
        $table->enum['user_type', ['admin', 'user']]->default['user']; // add this
        $table->tinyInteger['age']; // add this
        $table->string['address']->nullable[]; // add this
        $table->timestamp['email_verified_at']->nullable[];
        $table->string['password'];
        $table->rememberToken[];
        $table->timestamps[];
    }];
}

Sau đó, ở phía máy khách, hãy lắng nghe sự kiện này thông qua API trình nghe sự kiện tiêu chuẩn của trình duyệt. Ở đây, chúng tôi chỉ hiển thị một cảnh báo chứa tên của người dùng đã bị xóa

// database/migrations/_create_users_table.php
public function up[]
{
    Schema::create['users', function [Blueprint $table] {
        $table->id[];
        $table->string['name'];
        $table->string['email']->unique[];
        $table->enum['user_type', ['admin', 'user']]->default['user']; // add this
        $table->tinyInteger['age']; // add this
        $table->string['address']->nullable[]; // add this
        $table->timestamp['email_verified_at']->nullable[];
        $table->string['password'];
        $table->rememberToken[];
        $table->timestamps[];
    }];
}

Cuối cùng, đừng quên thêm tệp

composer require livewire/livewire:2.3

01 vào

php artisan migrate
php artisan db:seed

// database/migrations/_create_users_table.php
public function up[]
{
    Schema::create['users', function [Blueprint $table] {
        $table->id[];
        $table->string['name'];
        $table->string['email']->unique[];
        $table->enum['user_type', ['admin', 'user']]->default['user']; // add this
        $table->tinyInteger['age']; // add this
        $table->string['address']->nullable[]; // add this
        $table->timestamp['email_verified_at']->nullable[];
        $table->string['password'];
        $table->rememberToken[];
        $table->timestamps[];
    }];
}

Tại thời điểm này, việc xóa người dùng sẽ hoạt động nếu bạn dùng thử trên trình duyệt của mình

Tạo người dùng mới

Hãy tiến hành tạo người dùng mới. Mở tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

41 và thêm nút tạo người dùng mới. Một lần nữa, chúng tôi đang sử dụng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

10 để kích hoạt một sự kiện có tên là

composer require livewire/livewire:2.3

// database/factories/UserFactory.php
public function definition[]
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique[]->safeEmail,
        'email_verified_at' => now[],
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random[10],

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween[18, 60],
        'address' => $this->faker->address,
    ];
}

Sau đó, trong tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

14 của bạn, hãy lắng nghe sự kiện này và mở phương thức

// database/factories/UserFactory.php
public function definition[]
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique[]->safeEmail,
        'email_verified_at' => now[],
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random[10],

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween[18, 60],
        'address' => $this->faker->address,
    ];
}

Ghi chú. đoạn mã trên không thực sự là cách làm việc của "Livewire Purist". Thông thường, nếu bạn đang sử dụng Livewire, bạn muốn Livewire xử lý tất cả các hoạt động tương tác và bao gồm cả các phương thức. Trong trường hợp này, chúng tôi đang sử dụng jQuery để mở phương thức. Điều này có thể tha thứ được vì nó chỉ là một dòng mã. Nhưng nếu bạn muốn sử dụng Livewire, cách làm đúng là sử dụng Livewire cho mọi thứ. Bạn không thể trộn và kết hợp nó với jQuery. Điều này sẽ giúp mọi thứ trở nên dễ dàng hơn khi bạn cần thêm các bài kiểm tra giao diện người dùng sau này

Chúng tôi chưa thực sự tạo thành phần Livewire, vì vậy hãy tiếp tục và làm điều đó

// database/factories/UserFactory.php
public function definition[]
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique[]->safeEmail,
        'email_verified_at' => now[],
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random[10],

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween[18, 60],
        'address' => $this->faker->address,
    ];
}

Giống như Live Table, điều này tạo ra lớp thành phần cũng như tệp xem

```
composer require livewire/livewire:2.3
```
07
```
composer require livewire/livewire:2.3
```
08

Đầu tiên, mở tệp xem và thêm vào như sau. Mã này sẽ trông quen thuộc vì hầu hết nó chỉ là một mẫu Blade tiêu chuẩn để hiển thị một biểu mẫu. Điểm khác biệt duy nhất là chúng tôi đã thêm vào đó một số thuộc tính Livewire, tất cả những thuộc tính này bạn đã quen thuộc

// database/factories/UserFactory.php
public function definition[]
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique[]->safeEmail,
        'email_verified_at' => now[],
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random[10],

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween[18, 60],
        'address' => $this->faker->address,
    ];
}

Tại thời điểm này, bạn đã biết rằng

composer require livewire/livewire:2.3

09 sẽ được kích hoạt khi nhấp vào nút lưu.

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

48 ngăn chặn hành động mặc định, đó là việc gửi biểu mẫu thực tế. Sau đó, chúng tôi sử dụng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

43 để liên kết từng trường với một thuộc tính cụ thể trong lớp thành phần

Một điều khác với mã này. đây là mã mẫu Blade tiêu chuẩn để hiển thị lỗi biểu mẫu. Bạn có thể thắc mắc nó đang làm gì ở đây khi chúng ta đang ở trong thành phần Livewire. Chà, câu trả lời là Livewire cũng có thể sử dụng mã này để hiển thị cho chúng tôi các lỗi biểu mẫu. Vì vậy, nếu người dùng không cung cấp giá trị cho một trường cụ thể khi họ gửi biểu mẫu, thì máy chủ sẽ kêu bíp và nó sẽ kích hoạt các lỗi này xuất hiện

// database/factories/UserFactory.php
public function definition[]
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique[]->safeEmail,
        'email_verified_at' => now[],
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random[10],

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween[18, 60],
        'address' => $this->faker->address,
    ];
}

Tiếp theo, mở tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

07 và thêm đánh dấu cho phương thức

// database/factories/UserFactory.php
public function definition[]
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique[]->safeEmail,
        'email_verified_at' => now[],
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random[10],

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween[18, 60],
        'address' => $this->faker->address,
    ];
}

Bây giờ chúng ta đã có mã cho mặt trước, hãy xem mặt sau. Mở

composer require livewire/livewire:2.3

07 và thêm vào như sau

// database/factories/UserFactory.php
public function definition[]
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique[]->safeEmail,
        'email_verified_at' => now[],
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random[10],

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween[18, 60],
        'address' => $this->faker->address,
    ];
}

Đó là rất nhiều, nhưng hầu hết trong số đó đã có ý nghĩa với bạn, vì chúng tôi đã sử dụng chúng trước đây. Vì vậy, tôi sẽ không đi qua chúng một cách chi tiết. Thay vào đó, hãy xem qua lý do tại sao tôi đã mã hóa nó theo một cách nhất định

Đầu tiên là cách tôi xác thực biểu mẫu. Không có gì mới ở đây. Đây chỉ là mã xác thực mẫu Laravel tiêu chuẩn. Nhưng tại sao tôi lại sử dụng lớp này thay vì lớp Yêu cầu? . Về cơ bản, class Laravel Request chỉ hoạt động với HTTP request tiêu chuẩn. Điều này có nghĩa là nó chuyển hướng người dùng đến trang trước nếu có lỗi xác thực. Chúng tôi thực sự không thể có điều đó trong Livewire, vì mọi thứ được thực hiện thông qua AJAX

// database/factories/UserFactory.php
public function definition[]
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique[]->safeEmail,
        'email_verified_at' => now[],
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random[10],

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween[18, 60],
        'address' => $this->faker->address,
    ];
}

Tiếp theo là đoạn mã này. Ở đây chúng tôi đang sử dụng

composer require livewire/livewire:2.3

14 thay vì

composer require livewire/livewire:2.3

15. Điều này mang lại khả năng cho các thành phần khác nhau giao tiếp với nhau thông qua các sự kiện. Nó chấp nhận tên của thành phần làm đối số đầu tiên và tên của sự kiện làm đối số thứ hai

// database/factories/UserFactory.php
public function definition[]
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique[]->safeEmail,
        'email_verified_at' => now[],
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random[10],

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween[18, 60],
        'address' => $this->faker->address,
    ];
}

Tại sao chúng tôi sử dụng hai sự kiện riêng biệt [một sự kiện trình duyệt và một sự kiện Livewire] khi chúng tôi chỉ có thể sử dụng một sự kiện? . Vấn đề là chúng ta cũng cần làm mới bảng dữ liệu sau khi người dùng được tạo. Tôi hiện không biết cách kích hoạt tải lại một thành phần cụ thể từ phía máy khách, đó là lý do tại sao tôi sử dụng hai sự kiện riêng biệt — một để ẩn phương thức và hiển thị cảnh báo, và một để làm mới bảng dữ liệu

Bây giờ bạn đã biết lý do đằng sau mã, hãy tiếp tục với trình xử lý cho những sự kiện đó. Thêm phần sau vào tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

// database/factories/UserFactory.php
public function definition[]
{
    return [
        'name' => $this->faker->name,
        'email' => $this->faker->unique[]->safeEmail,
        'email_verified_at' => now[],
        'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
        'remember_token' => Str::random[10],

        // add these
        'user_type' => 'user',
        'age' => $this->faker->numberBetween[18, 60],
        'address' => $this->faker->address,
    ];
}

Sau đó, trong lớp thành phần LiveTable của bạn, hãy thêm trình nghe cho

composer require livewire/livewire:2.3

17. Điều này hơi khác một chút so với trình nghe

composer require livewire/livewire:2.3

18, vì chúng ta đang trỏ đến một hàm

composer require livewire/livewire:2.3

19 mà chúng ta thực sự không cần khai báo như một phương thức lớp. Đó là bởi vì nó là một phương thức tích hợp cho tất cả các lớp thành phần Livewire, cho phép chúng tôi tải lại toàn bộ thành phần

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

Tại thời điểm này, người dùng hiện có thể được tạo khi bạn dùng thử trên trình duyệt của mình

Cập nhật người dùng hiện có

Phần chức năng cuối cùng mà chúng tôi sẽ triển khai là cập nhật người dùng. Cập nhật nút chỉnh sửa trong tệp

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

41 với nội dung sau. Vì chúng tôi đang ở trong thành phần LiveTable và chức năng chỉnh sửa phải nằm trong thành phần UserForm, nên chúng tôi phải sử dụng

composer require livewire/livewire:2.3

21 để phát ra sự kiện

composer require livewire/livewire:2.3

22 cho thành phần UserForm. Không giống như trước đây, nơi chúng tôi chỉ cung cấp các giá trị riêng lẻ, ở đây chúng tôi cung cấp toàn bộ đối tượng

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

Để lắng nghe sự kiện

composer require livewire/livewire:2.3

22, hãy mở tệp

composer require livewire/livewire:2.3

07 và thêm phần sau. Đối tượng riêng lẻ

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

05 được chuyển đến hàm này và chúng tôi sử dụng nó để điền vào các trường biểu mẫu có giá trị. Lưu ý rằng thay vì một đối tượng, bạn truy cập các trường riêng lẻ giống như bạn làm trong một mảng. Khi đã xong, hãy phát ra sự kiện

composer require livewire/livewire:2.3

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

Lắng nghe sự kiện

composer require livewire/livewire:2.3

27 ở phía máy khách. Vì chúng tôi đã điền vào các trường riêng lẻ với các giá trị tại thời điểm đó, chúng tôi chỉ cần mở phương thức

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

Cuối cùng, cập nhật phương thức

composer require livewire/livewire:2.3

29 trong lớp thành phần UserForm để xử lý các bản cập nhật. Để làm điều đó, hãy kiểm tra giá trị của trường

composer require livewire/livewire:2.3

30. Nếu nó có giá trị thì có nghĩa là người dùng hiện đang được cập nhật. Nếu không, chúng tôi tạo ra nó

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

Tại thời điểm này, chi tiết người dùng hiện có thể được chỉnh sửa khi bạn dùng thử trên trình duyệt của mình

tối ưu hóa

Trong phần này, chúng ta sẽ xem qua một số cách tối ưu hóa mà bạn có thể thực hiện để đảm bảo ứng dụng của bạn không sử dụng nhiều tài nguyên máy chủ hơn mức cần thiết

trường tìm kiếm

Như bạn có thể đã nhận thấy, việc nhập vào trường tìm kiếm sẽ gần như ngay lập tức kích hoạt yêu cầu AJAX để lấy dữ liệu cập nhật từ máy chủ. Điều này sẽ gửi một truy vấn đến cơ sở dữ liệu mỗi lần, vì vậy nó không thực sự lý tưởng. Theo mặc định, Livewire áp dụng độ trễ 150 mili giây cho đầu vào. Chúng tôi muốn tăng độ trễ đó để Livewire không gửi yêu cầu đến máy chủ trong khi người dùng vẫn đang nhập. Đoạn mã dưới đây thêm thời gian gỡ lỗi 800 mili giây nên có độ trễ đáng chú ý. Chơi xung quanh với giá trị này để đảm bảo có sự cân bằng hoàn hảo

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

trường biểu mẫu

Một tối ưu hóa nhanh khác mà chúng tôi có thể thực hiện là cập nhật các trường biểu mẫu trong biểu mẫu người dùng. Cũng giống như trường tìm kiếm, yêu cầu được gửi đến máy chủ gần như ngay lập tức khi bạn nhập nội dung nào đó. Lần này, thay vì thêm một lần gỡ lỗi, chúng tôi sử dụng tính năng cập nhật lười biếng. Điều này sẽ chỉ gửi yêu cầu đến máy chủ khi người dùng tập trung ra khỏi trường văn bản

// database/seeders/DatabaseSeeder.php
public function run[]
{
    \App\Models\User::factory[100]->create[];
}

Sự kết luận

Đó là nó. Trong hướng dẫn này, bạn đã học những điều cơ bản về cách sử dụng Livewire để làm cho ứng dụng Laravel của bạn năng động hơn mà không cần viết cả đống JavaScript để tìm nạp và gửi dữ liệu đến máy chủ

Cụ thể, chúng tôi đã xây dựng một ứng dụng CRUD đơn giản sử dụng Livewire để loại bỏ nhu cầu về các gói giao diện người dùng như Datatables để thực hiện tìm kiếm và sắp xếp bảng. Chúng tôi cũng đã loại bỏ nhu cầu làm mới toàn bộ trang để gửi biểu mẫu. Cuối cùng, chúng tôi đã sử dụng cả sự kiện Livewire và sự kiện trình duyệt để giao diện người dùng và giao diện người dùng giao tiếp với nhau mà không cần viết mã AJAX

Bạn có thể xem mã nguồn dự án trên repo GitHub này

Chia sẻ bài viết này

Wern Ancheta

Wern là một nhà phát triển web đến từ Philippines. Anh ấy thích xây dựng mọi thứ cho web và chia sẻ những điều anh ấy đã học được bằng cách viết trên blog của mình. Khi anh ấy không viết mã hoặc học điều gì đó mới, anh ấy thích xem phim hoạt hình và chơi trò chơi điện tử

Làm cách nào để thêm Livewire vào Laravel?

Cài đặt Livewire. Bao gồm PHP. .

Tạo một thành phần. Chạy lệnh sau để tạo thành phần Livewire mới có tên là bộ đếm. .

Bao gồm các thành phần. Hãy nghĩ về các thành phần Livewire như Blade bao gồm. .

Xem nó trong trình duyệt. .

Thêm chức năng "bộ đếm". .

Xem nó trong trình duyệt

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

Laravel Livewire là một công cụ tuyệt vời để đạt được hành vi động trên trang mà không cần viết mã JavaScript trực tiếp . Và, giống như bất kỳ công cụ nào, nó có rất nhiều "viên ngọc ẩn", cả trong tài liệu chính thức và các mẹo bổ sung thiết thực do nhà phát triển cung cấp.

Là livewire cho ứng dụng trang đơn?

@mathewp bạn có thể xây dựng một thành phần chính duy nhất trong livewire và sử dụng thành phần đó làm nền tảng của ứng dụng một trang .

Làm cách nào để cài đặt Livewire Laravel 9?

Cài đặt .

Yêu cầu

Cài đặt gói

Bao gồm các tài sản

Xuất bản tệp cấu hình

Xuất bản nội dung giao diện người dùng

Định cấu hình URL cơ sở nội dung