Trong blog này, tôi muốn chia sẻ với các bạn cách tích hợp select2 livewire vào ứng dụng laravel. Tôi sẽ chỉ cho bạn một ví dụ hoàn chỉnh cho ví dụ đa select2 với laravel livewire
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. Livewire chỉ dựa vào các yêu cầu AJAX để thực hiện tất cả các giao tiếp với máy chủ của nó
Ở đây tôi sẽ đưa ra ví dụ đầy đủ cho select2 trong laravel livewire, Vì vậy, hãy làm theo bước dưới đây
Bước 1. Cài đặt ứng dụng Laravel
Ở bước đầu tiên, chúng ta cần tải ứng dụng phiên bản laravel mới bằng cách sử dụng lệnh dưới đây. Vì vậy, hãy mở terminal và chạy lệnh dưới đây
composer create-project --prefer-dist laravel/laravel blog
Bước 2. Thiết lập cấu hình cơ sở dữ liệu
Sau khi cài đặt thành công ứng dụng laravel, sau đó định cấu hình thiết lập cơ sở dữ liệu. Chúng tôi sẽ mở ". env" và thay đổi tên cơ sở dữ liệu, tên người dùng và mật khẩu trong tệp env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
Bước 3. Cài đặt Livewire
Trong bước này, Bạn sẽ chỉ cần cài đặt livewire vào ứng dụng laravel của mình bằng lệnh bên dưới
composer require livewire/livewire
Bước 4. Tạo bảng bài viết
Trong bước này, chúng tôi phải tạo di chuyển cho bảng sản phẩm bằng lệnh thủ công dưới đây. Vì vậy, hãy mở terminal và chạy lệnh bello
php artisan make:model Product -m
database/migrations/2021_06_05_044246_create_products_table. php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up[]
{
Schema::create['products', function [Blueprint $table] {
$table->id[];
$table->string['name'];
$table->string['category'];
$table->timestamps[];
}];
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down[]
{
Schema::dropIfExists['products'];
}
}
Ứng dụng/Mô hình/Sản phẩm. php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
protected $fillable = ['name','category'];
}
Bước 5. Tạo thành phần
Bây giờ, Bạn có thể tạo thành phần livewire bằng lệnh dưới đây, Vì vậy, hãy chạy lệnh dưới đây để tạo thành phần biểu mẫu Select2
php artisan make:livewire Select2
Bây giờ họ đã tạo tệp trên cả hai đường dẫn
app/Http/Livewire/Select2.php
resources/views/livewire/select2.blade.php
Bây giờ, tệp đầu tiên chúng tôi sẽ cập nhật dưới đây cho Select2. tập tin php
ứng dụng/Http/Livewire/Select2. php
________số 8_______Bước 6. Thêm tuyến đường
Bây giờ, chúng ta cần thêm route để tạo dropdown select2 và tạo sản phẩm trong ứng dụng laravel. vì vậy hãy mở "tuyến đường/web. php" và thêm tuyến đường sau
tuyến đường/web. php
Route::view['select2','livewire.home'];
Bước 8. Tạo Chế độ xem
Ở đây, chúng ta sẽ tạo file blade cho call route. trong tệp này, chúng tôi sẽ sử dụng @livewireStyles, @livewireScripts và @livewire['posts']. vì vậy hãy thêm nó
Bài đăng này sẽ cung cấp cho bạn ví dụ về ví dụ select2 của laravel livewire. bạn có thể xem ví dụ thả xuống laravel livewire select2. bạn sẽ tìm hiểu trình đơn thả xuống laravel livewire với tìm kiếm. Chúng ta sẽ xem xét ví dụ về menu thả xuống tìm kiếm livewire của laravel. Hãy xem ví dụ dưới đây select2 ví dụ về laravel livewire
Vài ngày trước, tôi đã tìm hiểu về laravel livewire và thấy, có nhiều vấn đề với triển khai select2 của laravel livewire. Vì vậy, ở đây tôi sẽ cung cấp cho bạn từng bước ví dụ đơn giản về select2 laravel livewire, bạn có thể sử dụng với phiên bản laravel 6, laravel 7, laravel 8 và laravel 9
Vì vậy, hãy làm theo bước dưới đây và bạn sẽ nhận được bố cục dưới đây
Bước 1. Cài đặt Laravel 8
trước hết chúng ta cần tải ứng dụng phiên bản Laravel 8 mới bằng cách sử dụng lệnh dưới đây, Vì vậy, hãy mở dấu nhắc lệnh terminal OR của bạn và chạy lệnh dưới đây
composer create-project --prefer-dist laravel/laravel blog
Bước 2. Cài đặt Livewire
Bây giờ trong bước này, chúng ta sẽ chỉ cần cài đặt livewire vào ứng dụng laravel 8 của mình bằng cách sử dụng lệnh dưới đây
composer require livewire/livewire
Bước 3. Tạo thành phần
Bây giờ ở đây chúng ta sẽ tạo thành phần livewire bằng lệnh của họ. vì vậy hãy chạy lệnh dưới đây để tạo thành phần select2
php artisan make:livewire select2
Bây giờ họ đã tạo tệp trên cả hai đường dẫn
app/Http/Livewire/Select2.php
resources/views/livewire/select2.blade.php
Bây giờ cả hai tệp chúng tôi sẽ cập nhật dưới đây cho biểu mẫu liên hệ với chúng tôi
ứng dụng/Http/Livewire/Select2. php
namespace App\Http\Livewire;
use Livewire\Component;
class Select2 extends Component
{
public $selCity = '';
public $cities = [
'Rajkot',
'Surat',
'Baroda',
];
/**
* Write code on Method
*
* @return response[]
*/
public function render[]
{
return view['livewire.select2']->extends['layouts.app'];
}
}
tài nguyên/lượt xem/livewire/select2. lưỡi. php
Laravel Livewire Select2 Example - ItSolutionStuff.com
Select2 Dropdown: {{ $selCity }}
@foreach[$cities as $city] @endforeach
@push['scripts']
@endpush
Bước 4. Tạo tuyến đường
bây giờ chúng tôi sẽ tạo một tuyến đường để gọi ví dụ của chúng tôi, vì vậy hãy thêm tuyến đường mới vào web. tập tin php như dưới đây
tuyến đường/web. php
use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Select2;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get['select2', Select2::class];
Bước 5. Tạo Xem tập tin
ở đây, chúng ta sẽ tạo file blade cho call form route. trong tệp này, chúng tôi sẽ sử dụng @livewireStyles, @livewireScripts. vì vậy hãy thêm nó