Как вставить данные в базу данных с помощью Livewire

Привет, Гурприт, снова с новым материалом. В этой статье я хотел бы поделиться своими сегодняшними знаниями. До этого я работал с Laravel Breeze + JQuery. Но после просмотра многих видео на Youtube и изучения открытых источников я увидел, что большинство разработчиков используют livewire. Поэтому я решил перейти на livewire. Это первый раз, когда я использовал livewire, и после использования livewire я решил, что буду использовать livewire как можно больше, потому что JQuery не так уж полезен для меня (личное мнение).

Это самая большая причина, по которой я собираюсь использовать Livewire — вам не нужно писать Javascript в вашем блейде или где-либо еще. Вам просто нужно использовать методы компонентов Livewire для выполнения действий.

Я использовал Jetstream вместе с Livewire, но действие, которое я собираюсь выполнить, является действием для начинающих, и вам не нужно рассматривать какой-либо пакет аутентификации. Поэтому я хотел бы поделиться с вами тем, как я начинаю это делать.

Я предполагаю, что вы установили Laravel с помощью следующей команды или другой команды.

composer create-project laravel/laravel blog
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы собираетесь использовать Jetstream. Тогда учтите, что перед ним не должен быть установлен никакой другой пакет, так как это может привести к ошибкам.

Установленный Jetstream

На самом деле, это первый день, когда я начал работать с Jetstream. Я слышал, что он предоставляет более широкие возможности, чем Breeze. Но если вы новичок, не стоит зацикливаться на пакете Jetstream, я бы рекомендовал начать с Breeze. Потому что он предоставляет очень простой способ настроить проект и двигаться дальше. Сначала я установил Jetstream.

composer require laravel/jetstream

php artisan jetstream:install livewire

OR

php artisan jetstream:install livewire --teams//when you do work with big projects/team.

Вход в полноэкранный режим Выход из полноэкранного режима

Установка зависимостей и перенос базы данных

Итак, теперь, после установки Jetstream и livewire, пришло время собрать зависимости NPM.

-> npm install 

-> npm run build
Войти в полноэкранный режим Выход из полноэкранного режима

Еще один момент, который я хотел упустить: когда вы выполняете эту команду NPM npm install, она предоставляет вам пользовательский интерфейс tailwind CSS.

Миграция и модель

Итак, как я уже говорил, мы будем вставлять данные поста в базу данных, поэтому для этого нам нужна таблица базы данных, а для нашей логики Laravel нам нужен файл миграции и модель. Давайте создадим миграцию и модель.

php artisan make:model Post --migration
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь у нас будет модель под названием Post и файл миграции в каталоге базы данных под названием create_post_table. Теперь сначала создадим миграцию.

Файл миграции

    <?php

use IlluminateDatabaseMigrationsMigration;
use IlluminateDatabaseSchemaBlueprint;
use IlluminateSupportFacadesSchema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title')->nullable();
            $table->string('author')->nullable();
            $table->string('content')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
};

Войти в полноэкранный режим Выйти из полноэкранного режима

Файл модели (Post)

В файл модели я бы рекомендовал добавить заполняемый массив с тремя такими колонками.

<?php

namespace AppModels;

use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;

class Post extends Model
{
    use HasFactory;

    protected $fillable = ['title', 'author', 'content'];
}

Войти в полноэкранный режим Выйти из полноэкранного режима

После выполнения этих команд не забудьте выполнить команду migrate, чтобы база данных была готова.

Настройте детали вашей базы данных в файле .Env, чтобы нижеприведенные команды могли хорошо работать.

php artisan migrate 
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, теперь мы переходим к основному пункту, в котором вы узнаете о вставке данных в базу данных путем передачи из формы в компонент Livewire.

Добавление компонента Livewire и страницы

В Livewire вы в основном играете с компонентами и передаете данные через компоненты. Итак, сейчас я собираюсь создать компонент post. Я покажу вам, как я сделал это сегодня. Это было интересно, потому что, не думая об Ajax/API, я легко сохранил данные поста с помощью Livewire.

Создание компонента

Прежде всего, я создам компонент livewire, и когда вы создаете компонент livewire, вы также получаете класс с этим компонентом. Это не большая разница, просто немного отличается от того, что мы делаем в основном Laravel.

php artisan make:livewire createpost //this is how we create livewire component
Вход в полноэкранный режим Выход из полноэкранного режима

Вы можете проверить сгенерированные файлы по пути ниже.

your-projectresourcesviewslivewirecreatepost.blade.php //component

your-projectappHttpLivewireCreatepost.php //generated class for component
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь у нас есть класс и компоненты livewire.

Вы можете проверить, работает ваше приложение или нет, выполнив начальную команду «php artisan serve».

Если вы установили пакет аутентификации, то у вас может появиться приборная панель, где будет страница с названием dashboard.

Теперь давайте добавим туда еще одну страницу для создания сообщения или вставки сообщения.

Создание файла представления

Теперь перейдем к папке view и создадим еще одну папку под папкой view, которая будет папкой admin.

your-project/resource/view/admin //should be in this way
Вход в полноэкранный режим Выйдите из полноэкранного режима

Создайте еще один файл в этой папке с именем posts.blade.php Это будет страница, на которой мы будем отображать некоторые компоненты, связанные с постами.

your-project/resource/view/admin/posts.blade.php //should be in this way
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь мы расширим эту страницу с помощью макета нашего приложения. После расширения этой страницы с помощью нашего макета приложения мы увидим, как мы можем отобразить компонент.

posts.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Posts') }}
        </h2>
    </x-slot>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg py-4 px-4">
                This is post page.
            </div>
        </div>
    </div>
</x-app-layout>
Вход в полноэкранный режим Выход из полноэкранного режима

Перейдите в папку layouts в view, которая будет макетом вашего приложения. Перейдите к app.blade.php и увидите, что он будет рендерить @livewire('navigation-menu'), затем перейдите к компоненту navigation-menu.blade.php и добавьте еще одну страницу с именем Create _ Post _.

<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
   <x-jet-nav-link href="{{ route('posts') }}" :active="request()-routeIs('posts')">
                        {{ __('Create Post') }}
   </x-jet-nav-link>
</div>
Войдите в полноэкранный режим Выход из полноэкранного режима

Теперь создадим маршрут для этой страницы и перейдем в web.php.

Route::middleware([
    'auth:sanctum',
    config('jetstream.auth_session'),
    'verified'
])->group(function () {
    Route::get('/dashboard', function () {
        return view('dashboard');
    })->name('dashboard');
    Route::get('/posts', function () {
        return view('admin.posts');
    })->name('post');
});
Войдите в полноэкранный режим Выйти из полноэкранного режима

Примечание: Я использовал Создать пост в навигации, так что это не является большой разницей.


страница постов

Дизайн компонента

Теперь мы почти подошли к созданию контента. Но теперь, как вы можете видеть «страницу выше», мы должны заменить компонент на «Это страница поста».

Как я уже сказал, у нас есть компонент под названием createpost.blade.php пришло время отобразить этот компонент и использовать кнопку для открытия модели для создания всего этого.

Createpost.blade.php Файл компонента

<div>
    <x-jet-button wire:click="showCreatePostModal"> //explained below
        {{ __('Create') }}
    </x-jet-button>
<!-- Create post modal -->
<x-jet-dialog-modal wire:model="createPostModal"> //explained below
    <x-slot name="title">
        {{ __('Create Post') }}
    </x-slot>
    <x-slot name="content">
        <div class="col-span-6 sm:col-span-4">
            <x-jet-label for="title" value="{{ __('Title') }}" />
            <x-jet-input id="title" type="text" class="mt-1 block w-full" autofocus />
            <x-jet-input-error for="title" class="mt-2" />
        </div>
        <div class="col-span-6 sm:col-span-4">
            <x-jet-label for="author" value="{{ __('Author') }}" />
            <x-jet-input id="author" type="text" class="mt-1 block w-full" autofocus />
            <x-jet-input-error for="author" class="mt-2" />
        </div>
        <div class="col-span-6 sm:col-span-4">
            <x-jet-label for="content" value="{{ __('Content') }}" />
            <x-jet-input id="content" type="text" class="mt-1 block w-full" autofocus />
            <x-jet-input-error for="content" class="mt-2" />
        </div>
    </x-slot>
    <x-slot name="footer">
        <x-jet-secondary-button>
            {{ __('save') }}
        </x-jet-secondary-button>
    </x-slot>
</x-jet-dialog-modal>
</div>
Вход в полноэкранный режим Выйти из полноэкранного режима

Вызов компонента в файле Post

Мы создали компонент и теперь нам нужно вызвать этот компонент в родительском файле, который мы создали в папке admin.

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Posts') }}
        </h2>
    </x-slot>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg py-4 px-4 justify-end flex">
            <livewire:createpost/>
            </div>
        </div>
    </div>
</x-app-layout>
Войти в полноэкранный режим Выйти из полноэкранного режима

Я скопировал некоторые уже созданные компоненты, потому что в этом случае мне не нужно их стилизовать. Вы также можете использовать его, если не хотите писать Tailwind.

В приведенном выше коде я использовал wire:model=»createPostModal» и wire:click=»showCreatePostModal». Итак, что это такое?

Позвольте мне объяснить, у нас есть компонент create button в верхней части и если мы хотим открыть модал, то мы должны использовать wire:click и в этом мы нацелились на метод модели, в котором мы будем показывать и скрывать модель.

Я сделал все это в классе компонента.

<?php

namespace AppHttpLivewire;

use LivewireComponent;

class Createpost extends Component
{
    public $createPostModal = false;

    public function showCreatePostModal()
    {
        $this->createPostModal = true;
    }

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

Вход в полноэкранный режим Выйти из полноэкранного режима

После этого у нас будет интерфейс, как на видео ниже.

Модальный показ с помощью livewire

Вставка содержимого в базу данных с помощью Livewire

Я изменил все файлы и добавил некоторые функциональные возможности, которыми я собираюсь поделиться с вами.

В классе компонента createpost.php я добавил два метода и три свойства.

  public $title;
  public $author;
  public $content;

public function create()
    {
        Post::create($this->modelData());
        $this->createPostModal = false; //here we are hiding the modal aftersaving the data.
    }
    public function modelData()
    {
        return [
            'title' => $this->title,
            'author' => $this->author,
            'content' => $this->content,
        ];
    }
Вход в полноэкранный режим Выйти из полноэкранного режима
  1. createmethod() Я создал для сохранения данных в базе данных.

Целевые методы с кнопками в файле компонента

Вот окончательный вид файла лезвия.

<div>
    <x-jet-button wire:click="showCreatePostModal">
        {{ __('Create') }}
    </x-jet-button>
    <x-jet-dialog-modal wire:model="createPostModal">
        <x-slot name="title">
            {{ __('Create Post') }}
        </x-slot>
        <x-slot name="content">
            <div class="col-span-6 sm:col-span-4">
                <x-jet-label for="title" value="{{ __('Title') }}" />
                <x-jet-input id="title" type="text" class="mt-1 block w-full" autofocus
                    wire:model.debounce.1000ms="title" />
                <x-jet-input-error for="title" class="mt-2" />
            </div>
            <div class="col-span-6 sm:col-span-4">
                <x-jet-label for="author" value="{{ __('Author') }}" />
                <x-jet-input id="author" type="text" class="mt-1 block w-full" autofocus
                    wire:model.debounce.1000ms="author" />
                <x-jet-input-error for="author" class="mt-2" />
            </div>
            <div class="col-span-6 sm:col-span-4">
                <x-jet-label for="content" value="{{ __('Content') }}" />
                <x-jet-input id="content" type="text" class="mt-1 block w-full" autofocus
                    wire:model.debounce.1000ms="content" />
                <x-jet-input-error for="content" class="mt-2" />
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-jet-secondary-button wire:click="create"> // to target the create method
                {{ __('Save') }}
            </x-jet-secondary-button>
        </x-slot>
    </x-jet-dialog-modal>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

Если вы новичок, который только пытается изучить Laravel, то вы можете узнать, как сделать CRUD в Laravel.

Вы можете прочитать о wire:model.debounce на официальном сайте «Livewire debounce explained».

Заключение

После внесения этого небольшого изменения я уверен, что теперь я могу начать строить свой блог дальше, используя Livewire. Видите ли, таким образом я забыл о jQuery, и мне нравится, насколько это просто, вы можете себе представить. У него есть много других функциональных возможностей. Которые я хотел бы изучить и поделиться с вами в следующих блогах.

Спасибо за прочтение.

The post How To Insert Data Into Database Using Livewire appeared first on Larachamp.

Сообщение Как вставить данные в базу данных с помощью Livewire появились сначала на Larachamp.

Оцените статью
devanswers.ru
Добавить комментарий