Пример веб-сайта для просмотра SWAPI, основанный на библиотеке VUE. Использовался в качестве тестового задания, теперь валяется без дела.
В данном примере был реализован выбор категории и возможность просмотра каждого пункта категорий. Категории формировывались на основе root от SWAPI, а также добавлена дополнительная категории для статистики. Применялся framework Vue, в Vuex не было необходимости. При этом акцент был сделан на часть JS: 1) Реализована подгрузка категорий с API постранично (нажатием кнопки "Загрузить ещё"), 2) Реализована возможность выбора и просмотра информации о объекте в категории, 3) При просмотре информации вместо вывода ссылок, JS асинхронно подгружает их и заменяет значение ссылки на наименование объекта, 4) Добавлен простой перевод аттрибутов объекта, 5) Заменённые на наименования, ссылки превращаются в полноценные, при нажатии на которые можно совершить переход на описание другого объекта, 6) Реализована история переходов по объектам, поэтому можно использовать навигацию для передвижения между ними, а также по такой ссылке можно перейти и увидеть описание объекта без нажатий на категории (при этом категории не подгружаются), 7) Используется система кэширования и проверка на избыточные запросы, для снижения количества запросов к API (использование Vuex, sessionStorage и пр. избыточно), 8) Реализована категория "Статистика", позволяющая посмотреть количество элементов в API по каждому типу, которая прогружается, в случае отсутствия загруженной(-ых) категорий, асинхронно. В JS коде присутствуют комментарии почти к каждой строке, а также приведено описание для систем документации типа Doxygen, описывающие предназначение функций, параметров. На стили у каждого свой вкус, поэтому сделано максимально элементарно для удобства просмотра.
Структура папки:
|-- css
| |-- app.css Стили страницы (основной)
| `-- normalize.min.css Стили страницы для нормализации базовых элементов
|-- index.html Одностраничное приложение на Vue
|-- js
| |-- app.js Код страницы без минификации (оригинал)
| |-- app.min.js Код к странице с минификацией
| |-- langs
| | `-- ru.js Локализацией фраз на русском языке
| `-- vue.min.js Код фреймворка Vue JS, минифицированный
`-- readme.md Текущий файл