О проекте
Список и карточка использовали расходящиеся контракты API. Нужно было свести поля, пагинацию и валидацию, а в демке ещё отделить записи разных посетителей.
Каталог, карточка и форма создания объявления. Vue ходит в Laravel API на том же домене. Есть сортировка, пагинация и валидация. Записи посетителей разделены по сессиям.
- Все объявления и изображения учебные. Продажи и произвольные загрузки отключены.
- 20 собственных объявлений на сессию, 1000 суммарно; TTL один час и cleanup timer каждые пять минут.
- Legacy инструменты Vue-сборки имеют известные dev-зависимости; полный переход frontend tooling не выполнялся.
Скриншоты, схемы и исходные материалы сохранены на языке оригинала; подписи и описание переведены.
Архитектура и схемы
- Клиент и API работают на одном origin без внешнего backend URL.
- 24 исходных объявления общие, созданные посетителем записи фильтруются по владельцу.
- Фото выбирается из фиксированных локальных SVG, произвольные URL и mass assignment исключены.
- Цена хранится DECIMAL(10,2), API возвращает согласованный scalar meta для пагинации.
Code-map: файлы и связи
Карта привязана к версии 54f1be9aa105. В таблице — экран или API, связанный модуль и данные.
| Функция | Экран / API | Модуль | Данные / проверка |
|---|---|---|---|
| Каталог, поиск, сортировка | AdList / GET api/ad | AdController::index | ads, owner scope |
| Карточка | AdItem / GET api/ad/id | AdController::show | seed или своя запись |
| Создание | AdNew / POST api/ad | Validator, Eloquent | allowlist + session_id + expires_at |
| Удаление и сброс | AdItem / DELETE, POST demo/reset | AdController, DemoSession | только своя сессия |
| Очистка | CLI demo:cleanup | scheduled command | expired rows |
Как работать с картой
- Перед изменением найти функцию и пройти связи до API, состояния и хранилища.
- Проверить входы, ошибки, повторные события и зависимые сценарии.
- После изменения обновить карту и затронутые схемы вместе с кодом.
- Выполнить связанные проверки и привязать новые материалы к версии исходников.
Сценарии и API
- Откройте каталог, измените сортировку и перейдите на следующую страницу.
- Посмотрите карточку и создайте объявление с локальным изображением.
- Проверьте валидацию пустого/ошибочного ввода.
- Откройте чужой ID во второй сессии: получите 404. Удалите своё объявление и сбросьте пример.
Проверка опубликованной версии
CI: Vue: production-сборка /catalog/ ↗ · ba775c53 · исторический запуск другой версии · 2026-09-07
- Повторный полный production QA каталога на /catalog/: создание, удаление, поиск, сортировка, пагинация, сессии и мобильный вид — passed. В исходной Chrome-сессии страница открывается с включённым блокировщиком.
- Sorting, pagination, search, empty state
- Required form validation
- Signed Secure HttpOnly cookie; cross-session GET/DELETE both 404
- Server rejects negative price, short text and external image URL
- Cancel, delete and restored seed count
- Подтверждённого GitHub CI для этого SHA нет; перечислены выполненные локальные проверки и сценарии опубликованной версии. Исторические CI-ссылки, если есть, отмечены отдельно.
Эти проверки относятся к указанной версии. Коммерческие показатели и качество моделей на независимой выборке здесь не измерялись.
Измерения
- Сохранено 13 содержательных кадров фактического интерфейса.
- Дата, сценарий и версия указаны у каждого кадра.
- Максимум RAM контейнеров в коротком тесте: 39.76 MiB. Общие службы учитываются отдельно; магазин включает свою БД.
- Измерено 6 повторений сценария; медиана 1605.5 мс, максимум 2981 мс. Время включает браузер и HTTPS; методика и ограничения приложены.
Запуск и эксплуатация
Обновление 7 сентября 2026: frontend опубликован по /catalog/ на основном домене. Старый ads-поддомен перенаправляет сюда, поскольку браузерный блокировщик рекламы блокировал его JS/CSS. Backend Laravel сохранён.
Кейс объединяет laravel-sandbox и laravel-sandbox-ui. Это один проект с двумя репозиториями; SHA обоих сохраняются в release metadata.
Сборка выполняется вне VPS через Dockerfile.portfolio и отдельный build context ads-ui. Версии фиксируются composer.lock и package-lock.json.
Nginx → localhost:18402 → Apache/Laravel. БД ads и пользователь отдельные. Проверять /healthz, GET /api/ad, POST /api/ad, чтение/удаление своего ID. Команда php artisan demo:cleanup вызывается системным таймером; сброс не удаляет seed и чужие записи.
Сборка вне VPS, на сервер уходят готовые файлы и образы с фиксированной версией. Секреты отдельно. Логи ротируются; после изменения log options контейнер нужно пересоздать. Общий docker prune не используется.
Code-map связывает экран или API с модулем и данными. При правке нужно проверить эти связи, обновить карту и прогнать затронутые сценарии: обычный проход, ошибку, повтор, сброс. Схема может устареть, поэтому её версия указана рядом.
Откат проверен 2026-09-07T01:00:33.586236+00:00: 20260907-verified → 20260907b → 20260907-verified. После каждого переключения подтверждены HTTPS, readiness и SHA. Это проверка конфигурации и артефактов на одном проверенном SHA; обратная миграция БД не выполнялась.
Стек
| Laravel / Eloquent | Валидация, owner scope, CRUD и expiry. |
|---|---|
| Vue | Маршруты каталога, карточки, формы, сортировки и пагинации. |
| MySQL | Объявления, DECIMAL-цены и срок хранения. |
Материалы и исходники
Vue: каталог и формы ↗ · версия ba775c53a6b3
Backend и Vue-клиент: апрель 2024. Обновление публичного демо: 7 сентября 2026.
Архив материалов на языке оригинала.