Фронтенд single-page Vue2 приложение

7 000 руб. за проект • безналичный расчёт, электронные деньги
01 апреля 2017, 15:43 • 2 отклика • 87 просмотров
Требования:
  1. Развернуть Vue2 с Webpack(vuex, Vue-router). Использовать стандартный репозиторий vue2.
  2. Через bower подключить bootstrap последней стабильной версии, jquery.menu и настроить сборку библиотек в webpack.
  3. не модифицировать файлы библиотек
  4. сборка должна осуществляться при помощи Webpack
  5. предоставить бекенд-мок скрипты
Страницы:(верстка - стандартный bootstrap, ничего лишнего, только то, что необходимо для работы функционала)
  1. Авторизация/Регистрация пустая страница с 3 полями(“номер телефона”, “пароль”, “повтор пароля”.)
    1. если введён существующий номер телефона, показываем поле “пароль”, фронт валидация формата номера
    2. если номера на беке нет, то показываем 2 поля “пароль” и “повтор пароля”. валидация совпадения полей
    3. после регистрации/авторизации кидаем на страницу дашборд
    4. при неудаче пишем ошибки мелким красным шрифтом под полями, формой
  2. Страница списка продуктов и создания редактирования:
  • левая часть страницы: форма создания/редактирования продукта. Валидация: все поля обязательны к заполнению, название до 100 символов, описание до 500.
  • правая часть страницы: таблица продуктов с пагинацией/сортировкой. Сортировка должна быть по названию, описанию, применить можно несколько сортировок, порядок должен учитываться.
Меню:

  • до авторизации: показывает одну ссылку на страницу входа
  • после авторизации: показывает ссылки на страницу выхода, страницу продуктов.
Сущности:
  1. Пользователь - id, Имя, массив id ролей.
  2. Роль - id(уникальная строка), название, список доступных id пермишенов(уникальных строк).
  3. Продукт - название, изображение, описание.
Список API(json): возможно добавление доп. методов
  • GET /users/check/{номерТелефонаТолькоЦифры} проверка номера телефона
  • POST /users/login - авторизация(логин, пароль)
  • POST /users/logout - выход
  • POST /users/registration авторизация(логин, пароль, повтор пароля)
  • GET,POST,PUT,DELETE /products стандартный набор CRUD для продуктов
  • GET,POST,PUT,DELETE /images стандартный набор CRUD для изображений.
Формат ответа: json
{
“data”:[{“field1”:”value1”,”field2”:”value2”,...},...],
”errors”:{
“general”:[“err1”,”err2”,...],
”fields”:{“field1”:”error1”,“field2”:”error2”,...}
},
“meta”:{}
}
data - содержит строки ответа
meta - содержит доп. данные(количество строк ответа, общее количество строк, страницу, количество элементов на страницу и т.п.)

Формат запроса: json
параметры GET запросов для пагинации, фильтрации, сортировки:
  • фильтры
    • filters=[{“property”:”concreteProperty”,”value”:”concreteValue”,”operator”:”concreteOperator”},{“property”:”concreteProperty2”,”value”:”concreteValue2”,”operator”:”concreteOperator2”}]
  • сортировка
    • sorts=[{“property”:”concreteProperty1”,”direction”:”ASC”},{“property”:”concreteProperty2”,”value”:”DESC”}]
  • page=12345
  • limit=5