Быстрый старт с Laravel 5.5 + Vue.js: простой CRUD

Vue.js становится все более популярным, его преимущества состоят в том, что с ним очень быстро начать разработку. Статья демонстрирует создание CRUD-приложения (Create/Read/Update/Delete) для управления списком компаний.

Этап 1: Базовый проект Laravel

Инициализируем проект через Composer:

composer create-project laravel/laravel="5.5.*" laravuecrud

Создаём базовую аутентификацию:

php artisan make:auth

Затем создаём шаблон resources/views/admin/companies/index.blade.php с базовой структурой панели.

Этап 2: База данных и API

Создаём модель и миграцию:

php artisan make:model Company -m

Модель содержит поля: name, address, website, email. Контроллер API создаётся командой:

php artisan make:controller Api/V1/CompaniesController --resource

Маршруты в routes/api.php:

Route::group(['prefix' => '/v1', 'namespace' => 'Api\\V1'], function () {
    Route::resource('companies', 'CompaniesController',
    ['except' => ['create', 'edit']]);
});

Этап 3: Инициализация Vue.js

Vue уже добавлен при сборке фронтенда в Laravel. Устанавливаем Vue Router и компилируем фронтенд:

npm install vue-router
npm run watch

Этап 4: Vue Router и компоненты

В шаблоне добавляем точки монтирования для Vue Router:

Файл resources/assets/js/app.js настраивается для маршрутизации трёх компонентов: CompaniesIndex, CompaniesCreate, CompaniesEdit.

Этап 5: Компоненты Create и Edit

CompaniesCreate.vue содержит форму для добавления компании с полями name, address, website, email. При отправке вызывает:

axios.post('/api/v1/companies', newCompany)

CompaniesEdit.vue похож на Create, но загружает данные при монтировании и обновляет их через PATCH-запрос при сохранении формы.

axios.get('/api/v1/companies/' + id)

Заключение

Приложение готово к использованию. После отправки формы Vue.js перезагрузит таблицу с содержимым, но без перезагрузки всей страницы — это и есть главное преимущество SPA-подхода.