Как разработчики, мы всегда ищем инструменты, библиотеки и фреймворки, которые сделают нашу жизнь проще. Это ничем не отличается для разработчиков Laravel. Вот почему мы любим этот фреймворк с самого начала, так как для нас все упрощается, что позволяет нам сосредоточиться на создании потрясающих приложений, а не увязнуть в том, как реализовать материал.
В этом уроке мы рассмотрим еще один инструмент, который может облегчить вашу жизнь как разработчика Laravel. В частности, мы рассмотрим Livewire, полнофункциональную платформу для Laravel, которая позволяет нам создавать динамические интерфейсы без написания большого количества JavaScript. По сути, все делается с помощью инструментов, с которыми вы уже знакомы как разработчик Laravel.
Что такое LiveWire?
Livewire — это библиотека, которая позволяет нам создавать реактивные и динамические интерфейсы с помощью Blade и небольшого количества JavaScript. Я говорю «немного», потому что мы собираемся написать JavaScript только для передачи данных через события браузера и ответа на них.
Вы можете использовать Livewire для реализации следующих функций без перезагрузки страницы:
нумерация страниц
проверка формы
уведомления
предварительный просмотр загрузки файлов
Обратите внимание, что Livewire не ограничивается перечисленными выше функциями. Вы можете использовать его для гораздо большего. Вышеуказанные функции являются наиболее распространенными, которые вы, возможно, захотите реализовать в своих приложениях.
Livewire против Vue
Vue всегда был предпочтительным интерфейсным фреймворком для разработчиков Laravel для добавления интерактивности в свои приложения. Если вы уже используете Vue для управления своими приложениями, изучение Livewire не является обязательным. Но если вы новичок в создании внешнего интерфейса в Laravel и рассматриваете Livewire как замену Vue, то да, вы можете использовать Livewire в качестве замены Vue. Кривая обучения
не будет такой крутой, как изучение Vue, поскольку вы в основном будете использовать Blade для написания файлов шаблонов.
Для получения дополнительной информации о сравнении Livewire и Vue ознакомьтесь с разделом «Laravel Livewire vs Vue «.
Обзор приложения
Мы собираемся создать живое приложение CRUD. Так что это в основном приложение CRUD без перезагрузки страницы. Livewire будет обрабатывать все запросы AJAX, необходимые для обновления пользовательского интерфейса. Это включает в себя фильтрацию результатов через поле поиска, сортировку по заголовку столбца и простую разбивку на страницы (предыдущая и следующая). Для создания и редактирования пользователей будут использоваться модальные окна Bootstrap.
Живой CRUD
Вы можете просмотреть исходный код этого проекта в его репозитории GitHub.
Предпосылки
В этом руководстве предполагается, что у вас есть опыт разработки приложений PHP. Опыт работы с Laravel приветствуется, но не обязателен. Вы все еще можете следовать, если вы знаете только простой PHP или другой
В этом руководстве предполагается, что на вашем компьютере установлено следующее программное обеспечение:
PHP
MySQL
Nginx
Композитор
Узел и нпм
Если вы работаете на Mac, более удобным вариантом вместо установки MySQL и NGINX будет установка DBngin и Laravel Valet.
Настройка проекта
Теперь вы можете создать новый проект Laravel:
composer
Перейдите в livecrudпапку, которую он сгенерирует. Это будет корневая папка проекта, в которой вы будете выполнять все команды в этом руководстве.
Следующим шагом является создание базы данных MySQL с помощью выбранного вами инструмента управления базами данных. Назовите базу данных как livecrud.
Установите внутренние зависимости
У нас есть только одна зависимость для серверной части, и это Livewire. Установите его с помощью следующей команды:
composer require livewire/livewire:2.3
Примечание: мы устанавливаем конкретную версию, которую я использовал при создании демо. Если вы будете читать это в будущем, рекомендуется установить самую последнюю версию. Не забудьте проверить журнал изменений проекта в их репозитории GitHub, чтобы убедиться, что вы ничего не пропустили.
Настройка базы данных
Обновите миграцию по умолчанию для создания usersтаблицы и добавьте настраиваемые поля, которые мы собираемся использовать:
// database/migrations/
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 () ;
}) ;
}
Затем обновите database/factories/UserFactory.phpфайл и введите значения в настраиваемые поля, которые мы добавили:
// database/factories/UserFactory.php
public function definition ()
{
return [
'name’ => $this→faker→name,
'email’ => $this→faker→unique () →safeEmail,
'email_verified_at’ => now (),
'password’ => '$2y$$1092IXUNpkjO0rOQ5byMi.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,
];
}
Наконец, откройте database/seeders/DatabaseSeeder.phpфайл и раскомментируйте вызов для создания фиктивных пользователей:
// database/seeders/DatabaseSeeder.php
public function run ()
{
\App\Models\User: factory (100) →create () ;
}
Не забудьте обновить свой.envфайл тестовой базой данных, которую вы собираетесь использовать. В этом случае я назвал базу данных как livecrud. Как только это будет сделано, запустите миграцию и сидер, чтобы заполнить базу данных:
php artisan migrate
php artisan db: seed
Настройка внешних зависимостей
Для упрощения мы собираемся использовать скаффолд Laravel для Bootstrap. Чтобы использовать это, вам сначала нужно установить laravel/uiпакет:
composer require laravel/ui
Затем установите Bootstrap 4. Это добавит конфигурацию в ваш webpack.mix.jsфайл и создаст файлы resources/js/app.jsи resources/sass/app.scss:
php artisan ui bootstrap
resources/sass/app.scssЗатем добавьте в файл Font Awsome. По умолчанию там уже должны быть шрифты, переменные и импорт начальной загрузки:
// Fonts
@import url («https: //fonts.googleapis.com/css? family=Nunito») ;
// Variables
@import «variables»;
// Bootstrap
@import «~bootstrap/scss/bootstrap»;
// add these:
@import «~@fortawesome/
@import «~@fortawesome/
@import «~@fortawesome/
@import «~@fortawesome/
Как только это будет сделано, установите все зависимости:
npm install @fortawesome/
npm install
Создайте компонент Livewire
Вы можете использовать make: livewireкоманду для создания нового компонента Livewire:
php artisan make: livewire LiveTable
Это создаст следующие файлы:
app/Http/Livewire/LiveTable.php— контроллер для компонента
resources/views/livewire/
Откройте resources/views/livewire/
Это много кода, поэтому давайте разберем его сверху вниз.
Позже в коде класса компонента LiveTable вы увидите связанную переменную, как в приведенном ниже коде. В Livewire они называются свойствами. Если вы исходите из Vue, то это эквивалент состояния. Только publicсвойства могут быть доступны непосредственно из внешнего интерфейса:
// app/Http/Livewire/LiveTable.php
<? php
class LiveTable extends Component
{
public $search = ''; // don’t add this yet
}
Далее у нас есть заголовки таблицы. Здесь мы используем wire: click.preventдля прослушивания событий щелчка в элементе ссылки. В Livewire это называется действиями. По сути, они позволяют вам прослушивать события браузера, но реагировать на них с помощью методов в бэкэнде. Использование.preventпредотвращает действие браузера по умолчанию. Значение, которое вы указываете для этого, является именем метода, который вы хотите выполнить в классе компонента. В данном случае это sortBy. Затем мы передаем имя столбца, который хотим отсортировать:
Name
@include ('includes.
Вот как выглядит соответствующий метод в классе компонента. Мы добавим код для этого позже:
// app/Http/Livewire/LiveTable.php
public function sortBy ($field)
{
//
}
В приведенном выше коде мы включили еще один файл представления с именем
@if ($sortField≠= $field)
@elseif ($sortAsc)
@else
@endif
Это в значительной степени все для разметки. Остальной код в основном такой же, как и ваш стандартный шаблон Blade. Таким образом, мы
Теперь перейдем к классу компонента. Откройте app/Http/Livewire/LiveTable.phpфайл и обновите его, чтобы он содержал следующий код:
<? php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\User;
class LiveTable extends Component
{
use WithPagination;
public $sortField = 'name’; // default sorting field
public $sortAsc = true; // default sort direction
public $search = '';
public function sortBy ($field)
{
if ($this→sortField === $field) {
$this→sortAsc =! $this→sortAsc;
} else {
$this→sortAsc = true;
}
$this→sortField = $field;
}
public function render ()
{
return view ('livewire.
'users’ => User: search ($this→search)
→orderBy ($this→sortField, $this→sortAsc? 'asc’: 'desc’)
→simplePaginate (10),
]) ;
}
}
Как упоминалось ранее, мы привязали значение searchпеременной к определенному текстовому полю на стороне клиента через файл wire: model. Таким образом, каждый раз, когда пользователь
User: search ($this→search)
→orderBy ($this→sortField, $this→sortAsc? 'asc’: 'desc’)
→simplePaginate (10)
Метод sortBy () — это то, что мы используем для обновления поля для сортировки таблицы пользователей. Каждое поле можно отсортировать по возрастанию или по убыванию. По умолчанию при нажатии на поле сортировки оно сортируется по возрастанию. Повторный щелчок просто сделает обратное:
public function sortBy ($field)
{
if ($this→sortField === $field) {
$this→sortAsc =! $this→sortAsc; // if field is already sorted, use the opposite instead
} else {
$this→sortAsc = true; // sort selected field by ascending by default
}
$this→sortField = $field;
}
При фильтрации usersтаблицы используем search () метод. Но мы еще не добавили это. Обновите app/Models/User.phpфайл, чтобы включить search () метод. Это фильтрует таблицу пользователей, чтобы возвращать только пользователей типа user. Тогда остальные условия будут полями, которые мы хотим использовать для фильтрации поля поиска:
protected $casts = [
//
];
public static function search ($query)
{
return empty ($query)? static: query () →where ('user_type’, 'user’)
: static: where ('user_type’, 'user’)
→where (function ($q) use ($query) {
$q
→where ('name’, 'LIKE’, '%'. $query. '%')
→orWhere ('email’, 'LIKE’, '%'. $query. '%')
→orWhere ('address’, 'LIKE ', '%'. $query. '%') ;
}) ;
}
Использование компонента Livewire
Как только это будет сделано, функции поиска и сортировки должны быть готовы к работе. Откройте routes/web.phpфайл и замените существующий маршрут следующим:
Route: get ('/', function () {
return view ('index’) ;
}) ;
Затем создайте resources/views/index.blade.phpфайл и добавьте следующее. Здесь мы используем созданный нами компонент Live Table. Мы можем отобразить его на странице так же, как и со стандартным компонентом. Единственное отличие состоит в том, что нам нужно добавить префикс к имени компонента livewire:, а также использовать @livewireScriptsего для рендеринга
<! DOCTYPE html>
На этом этапе вы можете запустить приложение. Самый простой способ — обслуживать проект с помощью Artisan:
php artisan serve
Затем войдите в приложение в браузере по адресу http: //127.0.0.1:8000/.
Если вы настроили локальный домен с помощью Laravel Valet или другого инструмента, вы также можете использовать его.
Удаление пользователей
Далее реализуем удаление пользователей. Как и раньше, мы используем wire: clickдля прослушивания событий щелчка по кнопке удаления. Только на этот раз мы не будем вызывать метод в классе компонента напрямую. Это потому, что это операция удаления. Мы не хотим, чтобы пользователи по ошибке удалили
Откройте resources/views/livewire/
Затем мы можем прослушивать это событие либо на сервере, либо на стороне клиента. Поскольку все, что мы хотим, это показать подтверждение, когда это событие запускается, мы прослушиваем его на стороне клиента. Создайте resources/js/users.jsфайл и добавьте следующее. Как видите, мы получаем доступ к idи nameпользователя через аргументы, переданные слушателю:
Livewire.on («deleteTriggered», (id, name) => {
const proceed = confirm (`Are you sure you want to delete ${name}`) ;
if (proceed) {
Livewire.emit («delete», id) ;
}
}) ;
Как только пользователь соглашается, мы создаем событие, которое фактически удаляет пользователя. Чтобы прослушивать события в серверной части, создайте $listenersмассив, содержащий имена слушателей и методы класса, на которые они сопоставляются. В этом случае имя события и метода совпадают, поэтому мы просто добавим delete... Затем delete () метод удалит пользователя с соответствующим id:
// app/Http/Livewire/LiveTable.php
protected $listeners = ['delete’];
public function sortBy ($field)
{
//
}
public function delete ($id)
{
User: find ($id)
→delete () ;
}
Если вам нужно
User: find ($id)
→delete () ;
$this→dispatchBrowserEvent ('
Затем на стороне клиента прослушивайте это событие с помощью стандартного API прослушивателя событий браузера. Здесь мы просто показываем предупреждение, содержащее имя удаленного пользователя:
// resources/js/users.js
window.addEventListener («
alert (`${event.detail.user_name} was deleted! `) ;
}) ;
Наконец, не забудьте добавить users.jsфайл в webpack.mix.js:
// webpack.mix.js
mix.js («resources/js/app.js», «public/js»)
.sass («resources/sass/app.scss», «public/css»)
.js («resources/js/users.js», «public/js») // add this
.sourceMaps () ;
На этом этапе удаление пользователей должно работать, если вы попробуете это в своем браузере.
Создание новых пользователей
Приступим к созданию новых пользователей. Откройте resources/views/livewire/
@if ($users→count ())
@endif
Затем в вашем resources/js/users.jsфайле прослушайте это событие и откройте модальное окно:
Livewire.on («triggerCreate», () => {
$ («#
}) ;
Примечание: приведенный выше код на самом деле не является способом работы «Livewire Purist». Обычно, если вы используете Livewire, вы хотите, чтобы вся интерактивность обрабатывалась Livewire, включая модальные окна. В этом случае мы используем jQuery для открытия модального окна. Это простительно, поскольку это всего лишь одна строка кода. Но если вы хотите использовать Livewire, правильный способ сделать это — использовать Livewire для всего. Вы не можете смешивать и сочетать его с jQuery. Это поможет упростить задачу, когда вам понадобится позже добавить внешние тесты.
На самом деле мы еще не создали компонент Livewire, так что давайте продолжим и сделаем это:
php artisan make: livewire UserForm
Как и в случае с Live Table, здесь создается класс компонента, а также файл представления:
app/Http/Livewire/UserForm.php
resources/views/livewire/
Сначала откройте файл представления и добавьте следующее. Этот код покажется вам знакомым, потому что большая его часть представляет собой стандартный шаблон Blade для рендеринга формы. Единственное отличие состоит в том, что мы добавили в него некоторые атрибуты Livewire, с которыми вы уже знакомы:
На данный момент вы уже знаете, что wire: submit.prevent="save"будет запущено при нажатии кнопки сохранения...preventпредотвращает действие по умолчанию, которое является фактической отправкой формы. Затем мы используем wire: modelдля привязки каждого поля к определенному свойству в классе компонента.
Еще одна вещь с этим кодом: это стандартный код шаблона Blade для отображения ошибок формы. Вам может быть интересно, что он здесь делает, когда мы находимся в компоненте Livewire. Ну, ответ заключается в том, что Livewire также может использовать этот код, чтобы показать нам ошибки формы. Таким образом, если пользователь не указал значение в определенном поле при отправке формы, сервер выдаст крик и вызовет появление следующих ошибок:
@error ('name’) {{ $message }} @enderror
Затем откройте resources/views/index.blade.phpфайл и добавьте разметку для модального окна:
Теперь, когда у нас есть код для внешнего интерфейса, давайте взглянем на внутренний. Откройте app/Http/Livewire/UserForm.phpи добавьте следующее:
<? php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\User; // add this
class UserForm extends Component
{
// add these
public $name;
public $email;
public $age;
public $address;
public function render ()
{
return view ('livewire.
}
// add this
public function save ()
{
$validated = $this→validate ([
'name’ => 'required|min:10',
'email’ => 'required|email|min:10',
'age’ => 'required|integer’,
'address’ => 'required|min:10',
]) ;
User: create (array_merge ($validated, [
'user_type’ => 'user’,
'password’ => bcrypt ($this→email)
]));
$this→resetForm () ;
$this→dispatchBrowserEvent ('
$this→emitTo ('
}
public function resetForm ()
{
$this→user_id = null;
$this→name = null;
$this→email = null;
$this→age = null;
$this→address = null;
}
}
Это много, но большая часть уже должна быть вам понятна, так как мы уже использовали их ранее. Поэтому я не буду подробно их рассматривать. Вместо этого давайте просто обсудим, почему я закодировал его определенным образом.
$validated = $this→validate ([
'name’ => 'required|min:10',
'email’ => 'required|email|min:10',
'age’ => 'required|integer’,
'address’ => 'required|min:10',
]) ;
Далее идет этот кусок кода. Здесь мы используем emitTo () вместо emit (). Это дает возможность различным компонентам взаимодействовать друг с другом посредством событий. Он принимает имя компонента в качестве первого аргумента и имя события в качестве второго:
$this→dispatchBrowserEvent ('
$this→emitTo ('
Почему мы используем два отдельных события (одно событие браузера и одно событие Livewire), когда мы можем использовать только одно? Ну, это правда, что мы можем использовать только одно событие. Проблема в том, что нам также нужно обновить таблицу данных после создания пользователя. В настоящее время я не знаю, как вызвать перезагрузку определенного компонента со стороны клиента, поэтому я использовал два отдельных события — одно для скрытия модального окна и отображения предупреждения, а другое — для обновления таблицы данных.
Теперь, когда вы знаете причину кода, давайте приступим к обработчикам этих событий. Добавьте в resources/js/users.jsфайл следующее:
window.addEventListener («
$ («#
alert (`User ${event.detail.user_name} was ${event.detail.action}! `) ;
}) ;
Затем в классе компонентов LiveTable добавьте прослушиватель для triggerRefresh. Это немного отличается от deleteпрослушивателя, поскольку мы указываем на $refreshфункцию, которую нам на самом деле не нужно объявлять как метод класса. Это потому, что это встроенный метод для всех классов компонентов Livewire, который позволяет нам перезагружать весь компонент:
// app/Http/Livewire/LiveTable.php
protected $listeners = ['delete’, 'triggerRefresh’ => '$refresh’];
Теперь пользователей можно создавать, когда вы пробуете это в своем браузере.
Обновление существующих пользователей
Последняя часть функциональности, которую мы будем реализовывать, — это обновление пользователей. Обновите кнопку редактирования в resources/views/livewire/
Чтобы прослушать triggerEditсобытие, откройте app/Http/Livewire/UserForm.phpфайл и добавьте следующее. userВ эту функцию передается отдельный объект, и мы используем его для заполнения полей формы значениями. Обратите внимание, что вместо объекта вы получаете доступ к отдельным полям, как в массиве. Как только это будет сделано, создайте dataFetchedсобытие:
protected $listeners = ['triggerEdit’];
public function resetForm ()
{
//
}
public function triggerEdit ($user)
{
$this→user_id = $user['id’];
$this→name = $user['name’];
$this→email = $user['email’];
$this→age = $user['age’];
$this→address = $user['address’];
$this→emit ('dataFetched’, $user) ;
}
Слушайте dataFetchedсобытие на стороне клиента. Поскольку на тот момент мы уже заполнили отдельные поля значениями, мы можем просто открыть модальное окно:
// resources/js/users.js
Livewire.on («dataFetched», (user) => {
$ («#
}) ;
Наконец, обновите save () метод в классе компонента UserForm, чтобы он также обрабатывал обновления. Для этого проверьте значение user_idполя. Если он имеет значение, это означает, что пользователь в настоящее время обновляется. В противном случае мы создаем его:
// app/Http/Livewire/UserForm.php
public function save ()
{
$validated = $this→validate ([
'name’ => 'required|min:10',
'email’ => 'required|email|min:10',
'age’ => 'required|integer’,
'address’ => 'required|min:10',
]) ;
if ($this→user_id) {
User: find ($this→user_id)
→update ([
'name’ => $this→name,
'email’ => $this→email,
'age’ => $this→age,
'address’ => $this→address,
]) ;
$this→dispatchBrowserEvent ('
} else {
User: create (array_merge ($validated, [
'user_type’ => 'user’,
'password’ => bcrypt ($this→email)
]));
$this→dispatchBrowserEvent ('
}
$this→resetForm () ;
$this→emitTo ('
}
На данный момент данные пользователя теперь можно редактировать, когда вы пробуете это в своем браузере.
Оптимизации
В этом разделе мы рассмотрим некоторые оптимизации, которые вы можете сделать, чтобы ваше приложение не использовало больше ресурсов сервера, чем ему нужно.
Поле поиска
Как вы, возможно, уже заметили, ввод в поле поиска почти сразу инициирует запрос AJAX, который извлекает обновленные данные с сервера. Это отправляет запрос в базу данных каждый раз, так что это не совсем идеально. По умолчанию Livewire применяет к входам дребезг на 150 мс. Мы хотим увеличить эту задержку, чтобы Livewire не отправлял запрос на сервер, пока пользователь все еще печатает. В приведенном ниже коде добавлено устранение дребезга на 800 мс, поэтому задержка заметна. Поэкспериментируйте с этим значением, чтобы обеспечить идеальный баланс:
Поля формы
Еще одна быстрая оптимизация, которую мы могли бы сделать, — это обновление полей формы в пользовательской форме. Как и в случае с полем поиска, запрос отправляется на сервер почти мгновенно, как только вы
Вывод
Вот и все! В этом руководстве вы изучили основы использования Livewire, чтобы сделать ваши приложения Laravel более динамичными, не написав целую кучу JavaScript для получения и отправки данных на сервер.
В частности, мы создали простое
