سلام دوستان
قبل از شروع این آموزش و بررسی آن که چرا استفاده از Livewire در Laravel 8 رو به افزایش است، قصد داریم مقداری در رابطه با Livewire آشنایی بیشتری رو پیدا کنیم، در نظر بگیرید امروزه برای ساخت وب اپلیکیشن های مدرن استفاده از ابزار های قدرتمندی مانند Vue و React بسیار متداول شده است، اما تسلط به این ابزار روند کار یک توسعه دنده فول استک را کند و دیوانه کننده میکند. Livewire یک فریم ورک قدرتمند بر پایه Ajax بوده که برای لاراول توسعه داده شده و به کمک آن ساختن رابط های پویا در پروژه شما ساده می گردد، بدون آنکه نیاز به نوشتن حتی یک خط کد Javascript داشته باشید می توانید از Livewire در پروژه های لاراول خود استفاده نمایید.

با در نظر گرفتن این مقدمه کوتاه می خواهیم با یک مثال استفاده از Livewire را بررسی کنیم به Livewire خوش آمدید.

مرحله اول: نصب Laravel و نصب Livewire

می توانید لاراول را با اجرای دستور زیر نصب کنید:

composer create-project --prefer-dist laravel/laravel learn-livewire

اکنون می توانیم livewire را در این پروژه نصب کنیم

composer require livewire/livewire

مرحله دوم: ایجاد یک Livewire Component

برای ایجاد یک counter component از دستور زیر استفاده کی کنیم:

php artisan make:livewire counter

با اجرای دستور فوق دو فایل با نام های Counter.php و counter.blade.php ایجاد می گردد.

Counter.php یک کلاس component است. و در آن متد render تعریف شده است، اگر از قبل با لاراول آشنایی داشته باشید فایل counter.blade.php باید برای شما آشنا باشد، بله درست متوجه شدید livewire از موتور Blade که ما به آن عادت داریم استفاده می کند، که می توان آن را در مسیر resources/views/livewire بررسی نمود.

فایل Counter.php را بصورت زیر تغییر دهید:

Counter.php
<?php

namespace App\Http\Livewire;
use Livewire\Component;

class Counter extends Component
{
    public function render()
    {
        return view('livewire.counter');
    }
}

همانطور که مشاهده می کنید Livewire دقیقا از قواعد و اصول Laravel تبعیت میکند.

مرحله سوم: فایل Component View

محتویات فایل counter.blade.php بصورت زیر تغییر می دهیم

counter.blade.php
<div>
    <p>Counting ... 0</p>
    <button>+</button>
    <button>-</button>
</div>

حال برای لود کردن این Livewire در هر جای پروژه در View ها از کد زیر استفاده می کنیم

@livewire('counter')

برای استفاده از Livewire در Laravel 8 دستور زیر را اجرا و خروجی کار را بررسی فرمایید

php artisan serve

بسیار خوب تبریک می گم شما موفق شدین اولین Component را در Livewire با موفقیت اجرا کنید.

مرحله چهارم: داینامیک کردن Component

در این مرحله برای داینامیک کردن Component فایل Counter.php را بصورت زیر ویرایش می کنیم:

counter.php
<?php

namespace App\Http\Livewire;
use Livewire\Component;

class Counter extends Component
{
    public $count = 0;
    public function increment() {
        $this->count += 1;
    }
    public function decrement() {
        $this->count -= 1;
    }
    public function render()
    {
        return view('livewire.counter');
    }
}

و نیز فایل counter.blade.php را بصورت زیر ویرایش می کنیم

counter.blade.php
<div>
    <p>Counting ... {{$count}}</p>
    <button wire:click='increment'>+</button>
    <button wire:click='decrement'>-</button>
</div>

مجددا پروژه را اجرا نمایید و از خروجی ار خود لذت ببرید، امیدوارم این اموزش ساده براتون مفید واقع شده باشه و بتونه دریچه ای به دنیای زیبای Livewire برای شما باز کنه.
موفق و پیروز باشید.

علاقه ام از سالها قبل برنامه نویسی تحت وب بوده و هست ، همیشه سعی می کنم علاقه مندی های خودم رو در ضمیه برنامه نویسی با همه به اشتراک بذارم، مطالب اینجا بتونه مشکل یه نفر رو هم برطرف کنه اون حس خوب رضایت رو در من بوجود میاره ;)

2 نظر برای استفاده از Livewire در Laravel 8 ارسال شده است.

  1. نادر

    عمل نکرد.چرا؟

  2. نادر

    اسکریپت لایووایر رو صدا باید بکنیم.الان شد

ارسال نظر