Конфигуратор
Опции и расчёты связаны, итог отражает текущий выбор.
← Все технологии
Vue · BIG FISH
Разработка сайтов и веб-приложений на Vue.js
Разрабатываем кабинеты, конфигураторы и интерфейсы внутренних систем. Реактивная модель помогает держать формы, расчёты и итоговые состояния согласованными.
BIG FISH / VUE
01Поля конфигурации
02Реактивное состояние
03Вычисляемые значения
04Итог предложения
Дизайн × технология × ваш процесс
ВОЗМОЖНОСТИ ПРОДУКТА
Технология становится
рабочим инструментом.
Операционная система
Формы и таблицы для сотрудников, работающих с большим числом записей.
Личный кабинет
Понятные сценарии редактирования, отправки и проверки результата.
ЖИВОЙ ПРИМЕР
Проверьте сценарий.
Посмотрите результат.
Конфигуратор поставки оборудования: количество, исполнение и доставка формируют итог. Итог вычисляется из исходных значений, а не редактируется отдельно.
Учебный пример с условными данными. Действия остаются в браузере. Это модель сценария, а не подключённая CMS, сервер или база данных.
Vue
VueРезультат сценария
Учебный пример готов к запуску.
АРХИТЕКТУРА СЦЕНАРИЯ
У каждого шага
своя ответственность.
01
Поля конфигурации
02
Реактивное состояние
03
Вычисляемые значения
04
Итог предложения
| Слой | Результат |
|---|---|
| Интерфейс | Понятны ввод, ограничения, загрузка и ошибки. Доступно управление клавиатурой. |
| Данные | У значений есть владелец, формат и правила актуальности. |
| Выпуск | Проверены ключевые сценарии, резервирование и восстановление. |
BIG FISH · Vue.js
Сложные формы. Спокойная работа.
При разработке на Vue.js превращаем многошаговые процессы в последовательный интерфейс. Пользователь видит заполненные этапы, зависимые поля и предварительный результат: удобно собирать заявку, настраивать продукт или согласовывать документ.
Для CRM и личных кабинетов на Vue.js продумываем сохранение черновика, проверку данных и возврат к предыдущему шагу. Ошибка в одном поле не должна обнулять уже выполненную работу.
ПРАКТИЧЕСКОЕ РУКОВОДСТВО
Как устроен продукт
на Vue.
Архитектура, ограничения и проверяемые сценарии. Конкретную конфигурацию согласуем по требованиям проекта.
Vue / 01
Состояние и вычисления
В состоянии храним количество, вариант оборудования и способ доставки. Сумма зависит от них и вычисляется по одной формуле. Для производных значений используем подходящие вычисляемые свойства, а побочные действия отделяем от расчётов. Это уменьшает вероятность, что таблица, кнопка и итог показывают разные версии одной заявки.
Проверка на проекте
Итог всегда равен сумме его составляющих.
Vue / 02
Компоненты и события
Поле выбора передаёт изменение через понятное событие; родитель отвечает за согласованную модель. Не меняем входные свойства скрытым образом внутри дочернего компонента. Общие элементы интерфейса документируем с примерами состояний. Слишком тесная связь компонента с одним API мешает использовать его в другом разделе продукта.
Проверка на проекте
Дочернее поле не меняет данные скрытно.
Vue / 03
Формы и зависимые поля
Изменение категории может сделать ранее выбранную комплектацию недоступной. Задаём правила сброса зависимых значений и объясняем их пользователю. Проверка формы учитывает границы, единицы измерения и обязательные поля. Перед отправкой сервер повторно рассчитывает допустимые условия: реактивный интерфейс не является доверенным источником цены.
Проверка на проекте
Недопустимая комплектация сбрасывается явно.
const quantity = ref(12);
const unitPrice = ref(25000);
const total = computed(() => quantity.value * unitPrice.value);Vue / 04
Запросы и сохранение
Различаем локальное редактирование и подтверждённые сервером данные. Если сохранение не удалось, показываем ошибку рядом с действием и сохраняем введённые значения. Для быстрых повторных изменений контролируем порядок ответов. При переходе со страницы предупреждаем о несохранённой работе, если её потеря действительно существенна.
Проверка на проекте
Ошибка сохранения не удаляет ввод.
Vue / 05
Состояние между экранами
Локальному раскрывающемуся блоку не требуется глобальное хранилище. Общие данные пользователя, корзины или рабочего процесса могут требовать централизованной модели. Выбираем границы хранения по сроку жизни данных и их потребителям. При выходе из аккаунта очищаем чувствительные значения и проверяем переключение между организациями.
Проверка на проекте
Выход из аккаунта очищает личные данные.
Vue / 06
Дизайн и адаптивность
Согласованные компоненты помогают сохранить одинаковое поведение сложных форм. На узком экране итог должен оставаться доступным, не перекрывая поля. Предусматриваем длинные названия, валюты и сообщения об ошибках. Клавиатурная навигация, фокус и подписи полей входят в проектирование наравне с цветами и анимацией.
Проверка на проекте
Итог не перекрывает поля на телефоне.
Vue / 07
Рендеринг и производительность
Для личного кабинета и индексируемого сайта могут понадобиться разные способы доставки HTML. Vue не отменяет необходимость спроектировать серверную часть и маршруты. Измеряем тяжёлые списки, графики и частые обновления. Ограничиваем ненужные наблюдатели, освобождаем подписки и проверяем поведение после нескольких переходов между экранами.
Проверка на проекте
Повторные переходы не копят подписки.
Vue / 08
Тесты расчётов
Формулы проверяем отдельно от компонентов: минимум, максимум, нулевое значение, округление и несовместимые опции. Затем тестируем полный сценарий от выбора до сохранения. В документации фиксируем, какая часть расчёта демонстрационная, а какая утверждена бизнесом. Изменение тарифа не должно требовать поиска числа во множестве экранов.
Проверка на проекте
Проверены округление и граничные количества.
FAQ
Вопросы перед стартом
Это готовое решение?
Нет. Пример показывает проектируемый сценарий для Vue. Рабочую систему разрабатываем под ваши требования, данные и интеграции.
Можно сохранить существующие системы?
Сначала изучаем интерфейсы обмена, владельцев данных и ограничения. Результатом может стать интеграция, поэтапная миграция или замена только отдельного компонента.
Что получим при передаче проекта?
Согласованный комплект включает дизайн, исходный код, требования к окружению и инструкции по эксплуатации. Состав работ, права и сопровождение фиксируем в договоре.
Спроектируем ваш продукт
Расскажите о процессе, аудитории и существующих системах. Определим интерфейс, технические границы и этапы разработки.