Laravel livewire چیست

sajjad

۲ سال پیش

Laravel Livewire چیست - همیشه در توسعه وب به دنبال ابزار‌ها، کتابخانه‌ها و فریمورک‌هایی برای توسعه سریع‌تر و راحت‌تر پروژه‌هایمان هستیم. همین مسئله برای توسعه‌دهندگان لاراول نیز صدق می‌کند. یکی از چالش‌های برنامه‌نویسی وب، نیاز به توسعه دو سمت Frontend و Backend به صورت همزمان است. همانطور که می‌دانید، توسعه همزمان توسط یک شخص نیاز به داشتن دانش زیاد در هر دو سمت توسعه UI و توسعه سمت سرور است.

Laravel برای توسعه سمت فرانت‌اند پیشنهاد می‌کند که از Vue.js استفاده کنید. همچنین کامپوننت‌ها و ابزار‌های زیادی را در اختیار شما قرار می‌دهد که توسعه همزمان پروژه Vue با لاراول راحت‌تر شود؛ اما مسئله از آنجایی شروع می‌شود که یادگیری Vue.js نیاز دانش زیادی است تا بتوان در آن حرفه‌ای شد. حجم مستندات Vue.js زیاد است و بنابراین برای یک برنامه‌نویس Backend احتمالا کار دشواری باشد تا بتواند به صورت عمیق و حرفه‌ای آن را یاد بگیرد.

در چنین شرایطی برای توسعه‌دهندگان لاراول یک ابزار ساده‌تر که بتواند پاسخ نیاز‌های ما را بدهد و با آن بتواند اپلیکیشن‌های واکنش‌گرایی را ساخت، ارائه شده است.

در این آموزش لایو وایر، به شما یاد خواهیم داد که این ابزار چطور می‌تواند به یک توسعه‌دهنده Laravel کمک کند تا بتواند به یک فول استک وب تبدیل شود و بتواند توسعه رابط کاربری (UI) را بدون نیاز به نوشتن کامل کد جاوا اسکریپت پیاده کند. همه چیز با همان ابزار‌هایی که از قبل با آن‌ها آشنایی دارید، انجام خواهد شد.

نحوه استفاده از livewire با یک مثال

برای اینکه در عمل کاربرد لایووایر را ببینید بیایید یک پروژه خیلی کوچک را بنویسیم.

بعد از نصب لاراول با استفاده از کامپوزر لایووایر را نصب کنید.

composer require livewire/livewire

فایل های css و js مخصوص لایووایر را در صفحه قرار دهید.
@livewireStyles قبل از پایان تگ head و @livewireScripts قبل از پایان تگ body

    @livewireStyles
</head>
<body>
    ...
 
    @livewireScripts
</body>
</html>

برای استفاده از لایووایر باید یک کامپوننت بسازیم. کامپوننت می تواند هرچیزی باشد. از یک تگ div ساده تا یک صفحه html کامل. برای این مثال قرار است دو تا فیلد بسازیم که مقدار داخل آنها با هم جمع شود و نمایش داده شود.

اسم کامپوننت را گذاشتم Calculator.

php artisan make:livewire Calculator

لایووایر با اجرای این دستور دو فایل درست می‌کند:

counter.blade.php در پوشه resources/views/livewire
Counter.php در پوشه app/Http/Livewire

اولی خود کامپوننت است و دومی هم یک کلاس php که کدهای محاسبات و پردازش کامپوننت در آن قرار می گیرد.

در داخل فایل blade حتما کدهای کامپوننت باید داخل یک تگ div قرار بگیرند.

داخل این فایل دو فیلد input اضافه می کنم تا یک ماشین حساب ساده با لایو وایر بسازیم.

<div>
    <input type="text" >
    <span>+</span>
    <input type="text" >

    <div>
        Sum Result: 
    </div>
</div>

قرار است هرچیزی در کادر اول و دوم نوشتیم بدون فشار دادن دکمه یا استفاده از تگ form با هم جمع شود و نتیجه نمایش داده شود.

حالا باید کامپوننت را در صفحه لود کنیم :

@livewire(calculator)

عبارت داخل پرانتز اسم کامپوننت است. در واقع اسم فایل blade ایجاد شده را باید اینجا بنویسیم.

لایووایر مشابه Vue.js یک سری attribute به تگها اضافه می‌کند. مثلا من می خواهم مقدار اینپوت در یک متغیر ذخیره شود. input را این شکلی مینویسم.

<input wire:model="number1" type="text" >
    <span>+</span>
<input wire:model="number2" type="text" >

به این wire:model می گویند دایرکتیو (directive). کار این دایرکتیو این است که مقدار input را در یک متغیر ذخیره می‌کند یا به اصلاح دقیق تر مقدار اینپونت به متغیر bind(متصل) می شود. با تغییر مقدار اینپوت مقدار متغیر هم عوض خواهد شد بدون نیاز به لود شدن دوباره صفحه.

هر متغیری که در فایل blade استفاده می کنید، باید حتما در کلاس کامپوننت به صورت public تعریف شده باشد. پس من هم این دو متغیر را در کلاس کامپوننت می نویسم.



namespace App\Http\Livewire;

use Livewire\Component;

class Calculator extends Component
{
    public $number1;
    public $number2;

    public function render()
    {
        return view('livewire.calculator');
    }
}

در نهایت فایل blade را هم به این شکل می نویسیم.

<div>
    <input wire:model="number1" type="text" >
    <span>+</span>
    <input wire:model="number2" type="text" >

    <div>
        Sum Result: {{(int)$number1 + (int)$number2}}
    </div>
</div>

اینپوت اول به متغیر $number1 بایند شده و اینپوت دوم به متغیر $number2 .

در آخر هر دو متغیر با هم جمع شده اند. اگر امتحان کنید می‌بینید که بعد از تایپ کردن نتیجه بلافاصله نمایش داده می شود.

از (int) پشت متغیرها استفاده کردم تا اگر غیر از عدد چیز دیگری وارد شد با خطا مواجه نشوم. اسم این کار cast کردن است.

پشت صحنه لایووایر چه اتفاقی می افتد؟

لایووایر در پشت صحنه با استفاده از ریکوست ایجکس کار می‌کند. در واقع با هر بار تایپ در فیلد های bind شده یک ریکوئست ارسال می شود به سمت سرور که چک می‌کند که آیا چیزی تغییر کرده یا نه. قسمتی که تغییر کرده باشد را ویرایش می کند و نشان می دهد.

به راحتی می توانید این را در تب network در developer tools کروم مشاهده کنید.

چه چیزهایی با لایووایر می شود ساخت؟

تقریبا همه کارهایی که قبلا با استفاده از جی کوئری و ریکوئست های ایجکس انجام میدادیم با لایووایر بدون نوشتن کد جاوااسکریپت قابل انجام است.

در آخر پیشنهاد می کنیم سری به داکیومنت لایووایر بزنید. مثال های خوبی دارد.

سایت livewire چند ویدئوی آموزشی رایگان هم دارد. در آن ها کارهای روتینی که با لایووایر می شود انجام داد مثل validation و کار با فرم ها را توضیح داده.

Laravel livewire چیست

نحوه استفاده از livewire با یک مثال

پشت صحنه لایووایر چه اتفاقی می افتد؟

چه چیزهایی با لایووایر می شود ساخت؟

هنوز برای این پست نظری ثبت نشده است .

ارسال نظر و ثبت امتیاز