- Давайте знакомиться с Livewire!
- Необходимые условия для запуска Livewire
- Установка Livewire
- Создание компонента в Livewire
- Написание класса Livewire
- Написание представления Livewire.
- Регистрация маршрута Laravel для компонента Livewire
- Создание макета шаблона Livewire
- Тестируем приложение Livewire
Давайте знакомиться с Livewire!
Чтобы начать знакомство с Livewire, рассмотрим простой компонент "счетчик" и отобразим его в браузере. Этот пример — отличный способ для первого знакомства с Livewire, так как он демонстрирует его "живость" в самой простой форме.
Необходимые условия для запуска Livewire
Перед началом работы убедитесь, что у вас установлено следующее:
Установка Livewire
Из корневого каталога приложения Laravel выполните следующую команду Composer:
composer require livewire/livewireСоздание компонента в Livewire
Для быстрого создания новых компонентов в Livewire предусмотрена удобная команда Artisan. Выполните следующую команду, чтобы создать новый компонент Counter:
php artisan make:livewire counterЭта команда создаст два новых файла в этом проекте:
app/Livewire/Counter.phpresources/views/livewire/counter.blade.php
Написание класса Livewire
Откройте файл app/Livewire/Counter.php и замените его содержимое на следующее:
<?php
namespace App\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 1;
public function increment()
{
$this->count++;
}
public function decrement()
{
$this->count--;
}
public function render()
{
return view('livewire.counter');
}
}Краткое пояснение к приведенному выше коду:
public $count = 1;- Объявляет публичное свойство
$countс начальным значением1.
- Объявляет публичное свойство
public function increment()- Объявляет публичный метод с именем
increment(), который при каждом вызове увеличивает значение свойства$count. - Подобные публичные методы могут вызываться из браузера различными способами, в том числе и при нажатии пользователем кнопки.
- Объявляет публичный метод с именем
public function render()- Объявляет метод
render(), который возвращает представление Blade. - Это представление Blade будет содержать HTML-шаблон нашего компонента.
- Объявляет метод
Написание представления Livewire
Откройте файл resources/views/livewire/counter.blade.php и замените его содержимое на следующее:
<div>
<h1>{{ $count }}</h1>
<button wire:click="increment">+</button>
<button wire:click="decrement">-</button>
</div>Этот код будет отображать значение свойства $count и две кнопки, увеличивающие и уменьшающие свойство $count соответственно.
Регистрация маршрута Laravel для компонента Livewire
Откройте файл routes/web.php в вашем приложении Laravel и добавьте следующий код:
use App\Livewire\Counter;
Route::get('/counter', Counter::class);Теперь наш компонент счетчика назначен маршруту /counter, так что при переходе пользователя по адресу /counter в вашем приложении этот компонент будет отображаться в браузере.
Создание макета шаблона Livewire
Прежде чем перейти к странице /counter в браузере, необходимо создать HTML-макет, в котором будет отображаться наш компонент. По умолчанию Livewire автоматически ищет файл макета с именем: resources/views/components/layouts/app.blade.php
Этот файл можно создать, если он еще не существует, выполнив следующую команду:
php artisan livewire:layoutЭта команда создаст файл с именем resources/views/components/layouts/app.blade.php со следующим содержимым:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? 'Page Title' }}</title>
</head>
<body>
{{ $slot }}
</body>
</html>Компонент counter будет выведен на место переменной $slot в приведенном выше шаблоне.
Возможно, вы уже заметили, что Livewire не предоставляет никаких JavaScript или CSS ресурсов. Это связано с тем, что Livewire 3 и выше автоматически подставляет все необходимые ему ресурсы для фронтенда.
Тестируем приложение Livewire
После установки класса и шаблонов наш компонент готов к тестированию!
Перейдите в браузере по ссылке /counter, и на экране должно появиться число с двумя кнопками для его увеличения и уменьшения.
Нажав на одну из кнопок, вы заметите, что счетчик обновляется в режиме реального времени, без перезагрузки страницы. В этом и заключается магия Livewire: динамические фронтенд-приложения, написанные полностью на PHP.
Это только начало того, на что способен Livewire. Продолжайте читать документацию, чтобы увидеть все, что может предложить Livewire.
Перевод с английского официальной документации Livewire 3:
https://livewire.laravel.com/docs/quickstart
