Работающее демо · подготовлено 7 сентября 2026

Laravel + Vue Ads

Каталог, карточка и создание объявления через same-origin API. Исправленные контракты и сессионная изоляция позволяют безопасно показывать полный CRUD-сценарий.

Открыть демо ↗Технический разбор →Исходники ↗

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

01 / Задача

Каталог объявлений с изолированным CRUD

Список и карточка должны одинаково понимать поля API, а создание объявления — проверять ввод и не затрагивать данные другого посетителя.

Для кого: Пользователи каталогов и разработчики Laravel/Vue-приложений.

Мой вклад

Laravel API и отдельный Vue-клиент каталога.
Согласование пагинации, карточки, описания и изображений.
Переход на Laravel 12, проверка полей, signed cookie и ограниченный demo 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 не выполнялся.

Нужны детали реализации?

Архитектура, code-map, API, проверка, развёртывание и реальные измерения.

Открыть документацию →Скачать материалы ↓