Inertia.js, Vue.js и Laravel — это мощные инструменты, которые можно комбинировать для создания современных и эффективных CRUD-приложений (создание, чтение, обновление и удаление). В этой статье мы рассмотрим различные методы и примеры кода для создания CRUD-приложения с использованием этих технологий.

Предварительные требования:
Прежде чем приступить к реализации, убедитесь, что у вас есть базовое представление о Laravel и Vue.js. Знакомство с фреймворком Laravel и его концепциями, такими как маршрутизация, контроллеры и модели, будет полезным. Кроме того, будут полезны знания основ Vue.js и разработки на основе компонентов.

Метод 1: настройка проекта
Чтобы начать, создайте новый проект Laravel, выполнив в терминале следующую команду:

laravel new inertia-crud-app

Далее перейдите в каталог проекта:

cd inertia-crud-app

Установите необходимые зависимости с помощью Composer:

composer require inertiajs/inertia-laravel

Метод 2: создание базы данных
Создайте новую базу данных MySQL для вашего приложения CRUD. Обновите файл .envв каталоге проекта Laravel, указав соответствующие учетные данные базы данных.

Метод 3: создание ресурса CRUD
Используйте команду Laravel Artisan, чтобы создать каркас ресурсов для ваших операций CRUD. Например, предположим, что мы хотим создать ресурс CRUD для управления «Продуктами»:

php artisan make:crud Product

Эта команда создаст необходимые файлы, включая контроллер, модель, миграцию и представления для ресурса «Продукт».

Метод 4: определение маршрутов
В файле маршрутов Laravel (routes/web.php) определите маршруты для операций CRUD. Вот пример:

use App\Http\Controllers\ProductController;
Route::get('/products', [ProductController::class, 'index'])->name('products.index');
Route::get('/products/create', [ProductController::class, 'create'])->name('products.create');
Route::post('/products', [ProductController::class, 'store'])->name('products.store');
Route::get('/products/{product}/edit', [ProductController::class, 'edit'])->name('products.edit');
Route::put('/products/{product}', [ProductController::class, 'update'])->name('products.update');
Route::delete('/products/{product}', [ProductController::class, 'destroy'])->name('products.destroy');

Метод 5: Создание компонентов Vue
Создайте компоненты Vue для операций CRUD. Например, у вас могут быть такие компоненты, как ProductIndex.vue, ProductCreate.vue, ProductEdit.vueи т. д. Эти компоненты будут обрабатывать пользовательский интерфейс и взаимодействовать с API Laravel.

Метод 6: привязка компонентов Vue с помощью Laravel
В ваших компонентах Vue используйте Inertia.js, чтобы связать их с маршрутами Laravel. Вот пример привязки компонента ProductIndex.vue:

<template>
  <div>
    <!-- Your component markup -->
  </div>
</template>
<script>
  import { usePage } from '@inertiajs/inertia-vue3';
  export default {
    setup() {
      const { data } = usePage();
      return {
        products: data.products,
      };
    },
  };
</script>

Метод 7: выполнение запросов API
Внутри ваших компонентов Vue используйте Axios или встроенные методы Inertia.js для отправки запросов API к серверной части Laravel. Вот пример получения и отображения товаров в компоненте ProductIndex.vue:

<template>
  <div>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.name }}</li>
    </ul>
  </div>
</template>
<script>
  import { usePage } from '@inertiajs/inertia-vue3';
  export default {
    setup() {
      const { data } = usePage();
      return {
        products: data.products,
      };
    },
    mounted() {
      this.fetchProducts();
    },
    methods: {
      async fetchProducts() {
        try {
          const response = await this.$inertia.get('/products');
          this.products = response.data;
        } catch (error) {
          console.error(error);
        }
      },
    },
  };
</script>

В этой статье мы рассмотрели различные методы создания CRUD-приложения с использованием Inertia.js, Vue.js и Laravel. Мы рассмотрели настройку проекта, создание базы данных, генерацию ресурсов CRUD, определение маршрутов, создание компонентов Vue, привязку их к Laravel и выполнение запросов API. Объединив эти мощные технологии, вы можете создавать надежные и эффективные CRUD-приложения.

Не забывайте следовать передовым практикам в области безопасности, проверки и обработки ошибок при реализации приложения CRUD.