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

Laravel + Vue Ads

Laravel API и Vue-клиент реализуют каталог объявлений: список, карточку, создание, удаление, поиск, сортировку и пагинацию. Контракты ответа и ошибок согласованы между слоями; demo CRUD изолирован по сессии, а API и изображения работают с того же домена.

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

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

Каталог: карточки и сортировка

01 / Задача

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

Публичный запуск требовал исправить base URL, контракты frontend/backend и валидацию форм, а также исключить влияние одного посетителя на данные другого.

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

Что делал

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

02 / Реализация

Что отличает реализацию

Один и тот же контракт покрывает desktop и mobile представление, серверную пагинацию и ошибки валидации. Сессия владеет созданными объявлениями, чужая запись возвращает 404, а сброс восстанавливает исходный набор без отдельной административной операции.

Скриншоты

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

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

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

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

Доли по размеру прикладных файлов Git в закреплённой версии. Каждый файл отнесён к одной подсистеме по правилам scripts/generate-stack-share.mjs; тесты, ассеты, зависимости и generated-файлы исключены. Округление — до 0,1%. Это состав кода, а не уровень владения технологиями.

Laravel / Eloquent

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

Vue

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

MySQL

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

04 / Решения

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

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

05 / Проверка

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

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

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

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

Ограничения

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

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

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

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