Работа с базами данных в Livewire компонентах Laravel

Livewire предоставляет удобные инструменты для работы с базами данных в Laravel, позволяя вам легко создавать, обновлять, удалять и извлекать данные из вашей базы данных прямо из компонентов. В этой статье мы рассмотрим, как использовать Livewire для взаимодействия с базой данных в примере создания простого CRUD (Create, Read, Update, Delete) приложения.

Шаг 1: Установка Livewire

Если вы еще не установили Livewire, выполните следующую команду в корневой директории вашего проекта Laravel:

composer require livewire/livewire

Шаг 2: Создание модели и миграции

Допустим, мы создаем приложение для управления задачами (tasks). Сначала создайте модель и миграцию:

php artisan make:model Task -m

Откройте созданный файл миграции в database/migrations и добавьте необходимые поля:

public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('description')->nullable();
        $table->boolean('completed')->default(false);
        $table->timestamps();
    });
}

Затем выполните миграцию:

php artisan migrate

Шаг 3: Создание компонента Livewire

Создайте компонент Livewire для управления задачами:

php artisan make:livewire tasks

Это создаст два файла: класс компонента в app/Http/Livewire/Tasks.php и представление компонента в resources/views/livewire/tasks.blade.php.

Шаг 4: Реализация компонента

Откройте файл app/Http/Livewire/Tasks.php и добавьте следующий код:

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Task;

class Tasks extends Component
{
    public $tasks, $title, $description, $task_id;
    public $isOpen = 0;

    public function render()
    {
        $this->tasks = Task::all();
        return view('livewire.tasks');
    }

    public function create()
    {
        $this->resetInputFields();
        $this->openModal();
    }

    public function openModal()
    {
        $this->isOpen = true;
    }

    public function closeModal()
    {
        $this->isOpen = false;
    }

    private function resetInputFields(){
        $this->title = '';
        $this->description = '';
        $this->task_id = '';
    }

    public function store()
    {
        $this->validate([
            'title' => 'required',
            'description' => 'required',
        ]);

        Task::updateOrCreate(['id' => $this->task_id], [
            'title' => $this->title,
            'description' => $this->description
        ]);

        session()->flash('message', 
            $this->task_id ? 'Task Updated Successfully.' : 'Task Created Successfully.');

        $this->closeModal();
        $this->resetInputFields();
    }

    public function edit($id)
    {
        $task = Task::findOrFail($id);
        $this->task_id = $id;
        $this->title = $task->title;
        $this->description = $task->description;

        $this->openModal();
    }

    public function delete($id)
    {
        Task::find($id)->delete();
        session()->flash('message', 'Task Deleted Successfully.');
    }
}

Шаг 5: Создание представления

Откройте файл resources/views/livewire/tasks.blade.php и добавьте следующий код:

<div>
    <button wire:click="create()" class="btn btn-success">Create Task</button>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Title</th>
                <th>Description</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($tasks as $task)
                <tr>
                    <td>{{ $task->title }}</td>
                    <td>{{ $task->description }}</td>
                    <td>
                        <button wire:click="edit({{ $task->id }})" class="btn btn-primary">Edit</button>
                        <button wire:click="delete({{ $task->id }})" class="btn btn-danger">Delete</button>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>

    @if($isOpen)
        @include('livewire.create')
    @endif
</div>

Шаг 6: Использование компонента

Чтобы использовать созданный компонент в вашем приложении, добавьте следующий код в нужный вам Blade шаблон:

@livewire('tasks')

Заключение

С помощью Livewire вы можете легко создавать, обновлять, удалять и извлекать данные из базы данных прямо из компонентов Laravel. Это позволяет вам быстро и эффективно создавать интерактивные интерфейсы для работы с данными.