Демка · 7 сентября 2026

Laravel + Vue Ads

Каталог, карточка и форма создания объявления. Vue ходит в Laravel API на том же домене. Есть сортировка, пагинация и валидация. Записи посетителей разделены по сессиям.

Демка ↗Документация →Исходники ↗

Backend и Vue-клиент: апрель 2024. Обновление публичного демо: 7 сентября 2026.Версия 54f1be9a13 кадров интерфейса

01 / Задача

Объявления на Laravel и Vue

Список и карточка использовали расходящиеся контракты API. Нужно было свести поля, пагинацию и валидацию, а в демке ещё отделить записи разных посетителей.

Сценарий: Просмотр и размещение объявлений.

Что делал

Laravel API и Vue-клиент.
Правки контрактов списка, карточки, описания и изображений.
Обновление до Laravel 12, валидация, signed cookie и CRUD с ограничениями для демки.

Скриншоты

Экраны, формы, ошибки

Скриншоты, схемы и исходные материалы сохранены на языке оригинала; подписи и описание переведены.

02 / Технологии

Что использовано

Laravel / Eloquent

Валидация, owner scope, CRUD и expiry.

Vue

Маршруты каталога, карточки, формы, сортировки и пагинации.

MySQL

Объявления, DECIMAL-цены и срок хранения.

03 / Решения

Как устроен проект

Клиент и API работают на одном origin без внешнего backend URL.
24 исходных объявления общие, созданные посетителем записи фильтруются по владельцу.
Фото выбирается из фиксированных локальных SVG, произвольные URL и mass assignment исключены.
Цена хранится DECIMAL(10,2), API возвращает согласованный scalar meta для пагинации.

04 / Проверка

Сценарии демки

Откройте каталог, измените сортировку и перейдите на следующую страницу.
Посмотрите карточку и создайте объявление с локальным изображением.
Проверьте валидацию пустого/ошибочного ввода.
Откройте чужой ID во второй сессии: получите 404. Удалите своё объявление и сбросьте пример.

Результаты проверок

Сохранено 13 содержательных кадров фактического интерфейса.
Дата, сценарий и версия указаны у каждого кадра.
Максимум RAM контейнеров в коротком тесте: 39.76 MiB. Общие службы учитываются отдельно; магазин включает свою БД.
Измерено 6 повторений сценария; медиана 1605.5 мс, максимум 2981 мс. Время включает браузер и HTTPS; методика и ограничения приложены.

Ограничения

Все объявления и изображения учебные. Продажи и произвольные загрузки отключены.
20 собственных объявлений на сессию, 1000 суммарно; TTL один час и cleanup timer каждые пять минут.
Legacy инструменты Vue-сборки имеют известные dev-зависимости; полный переход frontend tooling не выполнялся.

Технические заметки

Модули, API, схема данных, запуск и результаты проверок.

Документация →Материалы ↓