Как мы разрабатывали веб-платформу на Laravel и Vue.js
В нашей команде появилась задача разработать веб-сайт для компании, включающий:
Адаптивный лендинг
Форму обратной связи
Административную панель для управления отзывами
Проект нужно было выполнить быстро, но при этом с удобной архитектурой и перспективой на дальнейшее развитие. Мы выбрали Laravel (PHP) на бэкенде, Vue.js на фронтенде и InertiaJS для их связи, что позволило нам разработать полноценное SPA (Single Page Application) в монолитной архитектуре.
Почему мы выбрали этот стек?
Laravel — мощный PHP-фреймворк с удобным инструментарием для работы с базами данных, аутентификацией и API.
Vue.js — легковесный, но гибкий фреймворк, который отлично работает в сочетании с Laravel.
InertiaJS — инструмент, который убрал необходимость писать REST API, позволив передавать данные напрямую между Laravel и Vue.
Vuetify — UI-библиотека, которая ускорила разработку адаптивного интерфейса.
PostgreSQL — надёжная база данных с хорошей поддержкой сложных запросов.
Nginx на VPS — для стабильного хостинга и хорошей производительности.
Как это помогло ускорить разработку?
Благодаря InertiaJS нам не пришлось делать отдельный API, а значит, фронтенд и бэкенд взаимодействовали проще.
Laravel и Vue.js отлично сочетаются и позволяют быстро прототипировать админку и клиентскую часть.
Vuetify позволил минимизировать время на стилизацию UI-компонентов.
PostgreSQL обеспечил удобное хранение и быстрый доступ к данным.
Этот стек технологий позволил нам реализовать проект быстро, без лишних сложностей, но с возможностью масштабирования в будущем.
Разработка адаптивного лендинга и формы обратной связи
Как мы делали адаптивный лендинг и форму обратной связи
Верстка и адаптация под мобильные устройства
Лендинг создавался с учётом мобильной аудитории. Мы использовали Flexbox и Grid, а также Vuetify, чтобы интерфейс автоматически подстраивался под разные экраны.
Реализация формы обратной связи
Форма включала:
Поля "Имя", "Email", "Сообщение"
Валидацию (например, проверку корректности email)
Отправку данных через InertiaJS в Laravel
Защиту от спама с помощью Google reCAPTCHA
После отправки формы администратор мог просматривать отзывы через панель управления.
Админка для управления отзывами: Vue.js + InertiaJS + Laravel
Как мы сделали удобную админку для отзывов
Взаимодействие между клиентом и сервером
Laravel отвечает за обработку данных и аутентификацию
Vue.js отображает интерфейс администратора
InertiaJS передаёт данные без REST API
Функциональность админки
Просмотр списка отзывов
Удаление и скрытие отзывов
Фильтрация и сортировка
Развёртывание и настройка проекта на VPS
Как мы настраивали сервер
Развернули Ubuntu 22.04 на VPS
Установили Nginx, PostgreSQL, PHP 8.1
Настроили Supervisor для работы очередей Laravel
Автоматизировали деплой с помощью Git и Laravel Forge
Проект был развернут, настроен SSL и обеспечена безопасность.
Выводы и уроки из проекта
Что мы вынесли из этого проекта?
InertiaJS сильно упрощает разработку Laravel + Vue
Vuetify экономит время на UI
PostgreSQL отлично работает с Laravel
Деплой на VPS через Nginx и Supervisor удобен и надёжен
Этот проект показал, как можно быстро разработать SPA с монолитной архитектурой.
Если у вас есть вопросы, задавайте в комментариях!