Пошаговое руководство для начинающих по разработке SPA на Laravel и Vue.js

Привет, Хабр. На связи Артем, Laravel-разработчик в Webest, и я написал инструкцию для начинающих разработчиков по созданию полноценного локального приложения с бэкендом на Laravel и фронтендом на Vue.js. 

Одностраничные приложения (SPA) стали стандартом для создания динамичных интерфейсов. Laravel и Vue.js — популярный стек, который позволяет быстро создавать и масштабировать приложения.

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

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

Практический пример

Рассмотрим пример создания SPA, где Laravel выступает в роли бэкенда, а Vue.js — фронтенда. Мы создадим простое приложение для управления списком продуктов.

Используем следующие технологии:

• PHP версии 8.3,

• Composer версии 2.7.4,

• Laravel версии 11.31,

• Node.js версии 18.20.6,

• Npm версии 10.8.2

• Vue.js версии 3.5.13.

В качестве базы данных используем SQLite, которая по умолчанию входит в начальную установку Laravel 11. SQLite хранит данные в файле базы данных внутри проекта (в папке database). Однако, если вам удобнее использовать другую базу данных (например, MySQL, PostgreSQL или MariaDB), вы можете легко настроить её в файле .env. Laravel поддерживает множество популярных СУБД.

1. Настройка Laravel

Установка проекта.

Для начала создаем новый проект Laravel. Эта команда создаст свежую установку Laravel с последними зависимостями и структурами:

composer create-project laravel/laravel laravel-vue-spa

После завершения установки перейдём в папку проекта:

cd laravel-vue-spa  

Теперь, находясь в папке проекта, выполним следующие команды.

Генерация ключа приложения.

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

php artisan key:generate  

Создание модели, миграции и контроллера.

Далее создаём модель Product, миграцию и контроллер с помощью одной команды. Это позволит быстро создать все необходимые компоненты для работы с продуктами:

php artisan make:model Product -mc

Добавление полей в миграцию.

Откроем миграцию database/migrations/create_products_table и добавим необходимые поля для продуктов, такие как имя, описание и цена.

public function up() {     Schema::create('products', function (Blueprint $table) {         $table->id();         $table->string('name');         $table->text('description')->nullable();         $table->decimal('price', 8, 2);         $table->timestamps();     }); }

Теперь нужно выполнить миграцию, чтобы создать таблицу products в базе данных:

php artisan migrate

Добавление заполняемых полей в модель

Без указания fillable Laravel запретит массовое заполнение полей, что приведет к ошибке при создании или обновлении модели. Чтобы этого избежать, необходимо разрешить заполнение определённых полей.

Откройте файл app/Models/Product.php и добавьте:

namespace App\Models;  use Illuminate\Database\Eloquent\Model;  class Product extends Model {     protected $fillable = [         'name',         'description',         'price',     ]; }

Добавление методов в контроллер

В контроллере app/Http/Controllers/ProductController создаём методы для работы с продуктами: получение всех продуктов, создание, получение данных одного продукта, обновление и удаление:

namespace App\Http\Controllers;  use App\Models\Product; use Illuminate\Http\Request;  class ProductController extends Controller {     public function index()     {         return Product::all();     }      public function store(Request $request)     {         return Product::create($request->all());     }      public function show(Product $product)     {         return $product;     }      public function update(Request $request, Product $product)     {         $product->update($request->all());         return $product;     }      public function destroy(Product $product)     {         $product->delete();         return response()->noContent();     } }

Создание маршрутов API

В Laravel 11 по умолчанию отсутствует файл маршрутов api.php. Вместо этого его можно создать с помощью простой команды Artisan:

php artisan install:api

Добавим маршруты в routes/api.php:

use Illuminate\Support\Facades\Route; use App\Http\Controllers\ProductController;  Route::apiResource('products', ProductController::class);

Обработка маршрутов для SPA в web.php

При использовании одностраничных приложений с Vue.js, важно, чтобы Laravel корректно обрабатывал все пути, включая те, которые относятся к внутренним маршрутам Vue Router. Например, при обновлении страницы создания продукта /products/create, Laravel по умолчанию будет пытаться обработать этот запрос на сервере, что приведет к ошибке 404, так как такой маршрут не существует в файле маршрутов Laravel. Чтобы избежать этой проблемы, необходимо настроить один универсальный маршрут, который будет обрабатывать все запросы и отдавать только одну страницу, на которой будет загружаться весь интерфейс Vue.js.

В файле routes/web.php замените стандартный маршрут:

Route::get('/', function () {     return view('welcome'); });

На следующий код:

Route::get('/{any}', function () {     return view('welcome'); })->where('any', '.*');

2. Настройка Vue.js

Установим Vue.js, Vue Router и Axios через npm:

npm install vue@latest vue-router@latest axios

Редактирование welcome.blade.php

Файл welcome.blade.php – это шаблон, который Laravel использует по умолчанию для отображения главной страницы при запуске приложения. В стандартной установке Laravel он содержит статический контент, но для работы с Vue.js нам нужно заменить его на динамический шаблон, который будет служить точкой монтирования для Vue-приложения.

Редактируя этот файл, мы создаем базовую HTML-структуру, в которой подключаем Vue и Vite, а также определяем контейнер #app, в который будет загружаться наше приложение.

Обновленный resources/views/welcome.blade.php:

<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">      <title>Vue Laravel App</title>      @vite(['resources/css/app.css', 'resources/js/app.js']) </head> <body>     <div id="app"></div>      <script type="module" src="{{ Vite::asset('resources/js/app.js') }}"></script> </body> </html>

Установка и настройка Vite для Vue

Vite — это современный инструмент для сборки фронтенда, который значительно ускоряет разработку благодаря горячей перезагрузке и быстрой компиляции. Для работы с Vue в Vite требуется специальный плагин. Установим его:

npm install @vitejs/plugin-vue --save-dev

Vite требует явного подключения плагинов. Откроем файл vite.config.js и добавим конфигурацию для Laravel и Vue:

import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import vue from '@vitejs/plugin-vue';  export default defineConfig({     plugins: [         laravel({             input: ['resources/css/app.css', 'resources/js/app.js'],             refresh: true,         }),         vue(),     ], });

Настройка bootstrap.js

Файл resources/js/bootstrap.js предназначен для настройки глобальных зависимостей, таких как Axios и Vue.

Откроем его и добавим базовую конфигурацию:

import axios from 'axios'; import { createApp } from 'vue'; import App from './App.vue'; import router from './router';  // Настройка Axios для отправки AJAX-запросов window.axios = axios; window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';  // Инициализация Vue и подключение маршрутизации const app = createApp(App); app.use(router); app.mount('#app');

Создание App.vue

В Vue.js компонент App.vue является корневым компонентом приложения, который служит точкой входа для всех остальных компонентов. В нем мы подключаем Vue Router и определяем, где будет отображаться содержимое страниц.

Создадим файл resources/js/App.vue и добавим в него следующий код:

<template>   <div id="app">     <router-view></router-view>   </div> </template>  <script> export default {   name: 'App', }; </script>

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

Vue-компоненты позволяют разбивать интерфейс на небольшие переиспользуемые части, что упрощает поддержку и масштабируемость приложения. В нашем случае каждый компонент будет отвечать за отдельную часть функционала: список продуктов, редактирование и создание новых записей.

Создадим компонент для отображения списка продуктов resources/js/components/ProductList.vue:

<template>   <div>     <h1>Product List</h1>     <ul>       <li v-for="product in products" :key="product.id">         <strong>{{ product.name }}</strong> - {{ product.price }}₽         <router-link :to="`/products/${product.id}/edit`">Edit</router-link>         <button @click="deleteProduct(product.id)" class="delete-btn">Delete</button>       </li>     </ul>     <router-link to="/products/create" class="create-btn">Create New Product</router-link>   </div> </template>  <script> import axios from 'axios';  export default {   data() {     return {       products: [],     };   },   async created() {     const response = await axios.get('/api/products');     this.products = response.data;   },   methods: {     async deleteProduct(id) {       if (confirm('Are you sure you want to delete this product?')) {         await axios.delete(`/api/products/${id}`);         this.products = this.products.filter(product => product.id !== id);       }     },   }, }; </script>  <style scoped> .create-btn, .delete-btn {   margin-left: 10px;   padding: 5px 10px;   border: none;   cursor: pointer; } .delete-btn {   background-color: red;   color: white; } .create-btn {   display: block;   margin-top: 20px;   background-color: green;   color: white;   text-align: center;   text-decoration: none;   padding: 8px 12px; } </style>

Создадим компонент для редактирования продукта в resources/js/components/EditProduct.vue:

<template>     <div>       <h1>Edit Product</h1>       <form @submit.prevent="updateProduct">         <label>Product Name:</label>         <input v-model="product.name" type="text" required />            <label>Description:</label>         <textarea v-model="product.description"></textarea>            <label>Price (₽):</label>         <input v-model="product.price" type="number" step="0.01" required />                 <button type="submit" class="save-btn">Save</button>         <router-link to="/" class="cancel-btn">Cancel</router-link>       </form>     </div>   </template>      <script>   import axios from 'axios';      export default {     data() {       return {         product: {},       };     },     async created() {       const response = await axios.get(`/api/products/${this.$route.params.id}`);       this.product = response.data;     },     methods: {       async updateProduct() {         await axios.put(`/api/products/${this.product.id}`, this.product);         this.$router.push('/');       },     },   };   </script>      <style scoped>   form {     display: flex;     flex-direction: column;     gap: 10px;   }   input, textarea {     width: 100%;     padding: 8px;   }   button {     margin-top: 10px;     padding: 8px 12px;     cursor: pointer;   }   .save-btn {     background-color: blue;     color: white;   }   .cancel-btn {     background-color: gray;     color: white;     text-decoration: none;     display: inline-block;     padding: 8px 12px;     text-align: center;   }   </style>

Создадим компонент для создания нового продукта в resources/js/components/CreateProduct.vue:

<template>   <div>     <h1>Create Product</h1>     <form @submit.prevent="createProduct">       <label>Product Name:</label>       <input v-model="product.name" type="text" required />        <label>Description:</label>       <textarea v-model="product.description"></textarea>        <label>Price (₽):</label>       <input v-model="product.price" type="number" step="0.01" required />       <button type="submit" class="create-btn">Create</button>       <router-link to="/" class="cancel-btn">Cancel</router-link>     </form>   </div> </template>  <script> import axios from 'axios';  export default {   data() {     return {       product: {         name: '',         description: '',         price: 0,       },     };   },   methods: {     async createProduct() {       await axios.post('/api/products', this.product);       this.$router.push('/');     },   }, }; </script>  <style scoped> form {   display: flex;   flex-direction: column;   gap: 10px; } input, textarea {   width: 100%;   padding: 8px; } button {   margin-top: 10px;   padding: 8px 12px;   cursor: pointer; } .create-btn {   background-color: green;   color: white; } .cancel-btn {   background-color: gray;   color: white;   text-decoration: none;   display: inline-block;   padding: 8px 12px;   text-align: center; } </style>

Настройка маршрутизации с Vue Router

Vue Router позволяет управлять навигацией в нашем SPA, обеспечивая удобную работу с различными страницами без перезагрузки. Мы создадим маршруты для отображения списка продуктов, их редактирования и создания новых записей.

Создаем файл resources/js/router/index.js и настраиваем маршруты:

import { createRouter, createWebHistory } from 'vue-router'; import ProductList from '../components/ProductList.vue'; import EditProduct from '../components/EditProduct.vue'; import CreateProduct from '../components/CreateProduct.vue';  const routes = [   {     path: '/',     component: ProductList,   },   {     path: '/products/create',     component: CreateProduct,   },   {     path: '/products/:id/edit',     component: EditProduct,   }, ];  const router = createRouter({   history: createWebHistory(),   routes, });  export default router;

Подключение Vue Router к приложению

Далее импортируем и подключаем Vue Router в resources/js/app.js:

import { createApp } from 'vue'; import App from './App.vue'; import router from './router';  createApp(App).use(router).mount('#app');

3. Запуск приложения

Соберем фронтенд:

npm run build

Запустим сервер Laravel:

php artisan serve

Если вы откроете браузер по адресу http://localhost:8000, то увидите список продуктов, загруженных с сервера. Вы можете создавать, редактировать и удалять продукты, и всё это будет происходить без перезагрузки страницы.

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