Тендеры и лиды
Информация
Одностраничные приложения (SPA) стали стандартом для создания динамичных интерфейсов. Laravel и Vue.js — популярный стек, который позволяет быстро создавать и масштабировать приложения.
Пошагово разберем, как настроить среду разработки, создать API на Laravel, реализовать динамический интерфейс с использованием Vue.js и связать эти две части в единое приложение.
После прочтения статьи вы сможете развернуть свое собственное SPA и использовать его как основу для реализации своих идей по функционалу. Этот пример станет отличной отправной точкой для создания более сложных проектов.
Рассмотрим пример создания SPA, где Laravel выступает в роли бэкенда, а Vue.js — фронтенда. Мы создадим простое приложение для управления списком продуктов.
Используем следующие технологии:
В качестве базы данных используем SQLite, которая по умолчанию входит в начальную установку Laravel 11. SQLite хранит данные в файле базы данных внутри проекта (в папке database). Однако, если вам удобнее использовать другую базу данных (например, MySQL, PostgreSQL или MariaDB), вы можете легко настроить её в файле .env. 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 и добавим необходимые поля для продуктов, такие как имя, описание и цена.
Теперь нужно выполнить миграцию, чтобы создать таблицу products в базе данных:
php artisan migrate
Без указания fillable Laravel запретит массовое заполнение полей, что приведет к ошибке при создании или обновлении модели. Чтобы этого избежать, необходимо разрешить заполнение определённых полей.
Откройте файл app/Models/Product.php и добавьте:
В контроллере app/Http/Controllers/ProductController создаём методы для работы с продуктами: получение всех продуктов, создание, получение данных одного продукта, обновление и удаление:
В Laravel 11 по умолчанию отсутствует файл маршрутов api.php. Вместо этого его можно создать с помощью простой команды Artisan:
php artisan install:api
Добавим маршруты в routes/api.php:
При использовании одностраничных приложений с Vue.js, важно, чтобы Laravel корректно обрабатывал все пути, включая те, которые относятся к внутренним маршрутам Vue Router. Например, при обновлении страницы создания продукта /products/create, Laravel по умолчанию будет пытаться обработать этот запрос на сервере, что приведет к ошибке 404, так как такой маршрут не существует в файле маршрутов Laravel. Чтобы избежать этой проблемы, необходимо настроить один универсальный маршрут, который будет обрабатывать все запросы и отдавать только одну страницу, на которой будет загружаться весь интерфейс Vue.js.
В файле routes/web.php замените стандартный маршрут:
На следующий код:
Установим Vue.js, Vue Router и Axios через npm:
npm install vue@latest vue-router@latest axios
Файл welcome.blade.php – это шаблон, который Laravel использует по умолчанию для отображения главной страницы при запуске приложения. В стандартной установке Laravel он содержит статический контент, но для работы с Vue.js нам нужно заменить его на динамический шаблон, который будет служить точкой монтирования для Vue-приложения.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
12730 тендеров
проведено за восемь лет работы нашего сайта.
Редактируя этот файл, мы создаем базовую HTML-структуру, в которой подключаем Vue и Vite, а также определяем контейнер #app, в который будет загружаться наше приложение.
Обновленный resources/views/welcome.blade.php:
Vite — это современный инструмент для сборки фронтенда, который значительно ускоряет разработку благодаря горячей перезагрузке и быстрой компиляции. Для работы с Vue в Vite требуется специальный плагин. Установим его:
npm install @vitejs/plugin-vue --save-dev
Vite требует явного подключения плагинов. Откроем файл vite.config.js и добавим конфигурацию для Laravel и Vue:
Файл resources/js/bootstrap.js предназначен для настройки глобальных зависимостей, таких как Axios и Vue.
Откроем его и добавим базовую конфигурацию:
В Vue.js компонент App.vue является корневым компонентом приложения, который служит точкой входа для всех остальных компонентов. В нем мы подключаем Vue Router и определяем, где будет отображаться содержимое страниц.
Создадим файл resources/js/App.vue и добавим в него следующий код:
Vue-компоненты позволяют разбивать интерфейс на небольшие переиспользуемые части, что упрощает поддержку и масштабируемость приложения. В нашем случае каждый компонент будет отвечать за отдельную часть функционала: список продуктов, редактирование и создание новых записей.
Создадим компонент для отображения списка продуктов resources/js/components/ProductList.vue:
Создадим компонент для редактирования продукта в resources/js/components/EditProduct.vue:
Создадим компонент для создания нового продукта в resources/js/components/CreateProduct.vue:
Vue Router позволяет управлять навигацией в нашем SPA, обеспечивая удобную работу с различными страницами без перезагрузки. Мы создадим маршруты для отображения списка продуктов, их редактирования и создания новых записей.
Создаем файл resources/js/router/index.js и настраиваем маршруты:
Подключение Vue Router к приложению
Далее импортируем и подключаем Vue Router в resources/js/app.js:
Соберем фронтенд:
npm run build
Запустим сервер Laravel:
php artisan serve
Если вы откроете браузер по адресу http://localhost:8000, то увидите список продуктов, загруженных с сервера. Вы можете создавать, редактировать и удалять продукты, и всё это будет происходить без перезагрузки страницы.
Теперь у нас есть основа, которую можно дополнять авторизацией, загрузкой изображений, фильтрацией данных и другими возможностями.
Получите максимум практического контента и реальных кейсов по разработке цифровых решений и автоматизации бизнес-процессов на нашем сайте: https://webest.ru/
