В данной статье описан процесс разработки веб-платформы с использованием Laravel и Vue.js. Рассматриваются выбор технологий, архитектура проекта, создание адаптивного лендинга и формы обратной связи, разработка административной панели для управления отзывами, а также настройка и развертывание проекта на VPS. Приведены ключевые выводы и уроки, полученные в ходе реализации проекта.
Обзор проекта: выбор технологий и архитектура
В нашей команде появилась задача разработать веб-сайт для компании, включающий:
- Адаптивный лендинг
- Форму обратной связи
- Административную панель для управления отзывами
Проект нужно было выполнить быстро, но при этом с удобной архитектурой и перспективой на дальнейшее развитие. Мы выбрали 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 с монолитной архитектурой.
Если у вас есть вопросы, задавайте в комментариях!