Не понятно тестовое задание на Frontend разработчика
Получила тестовое задание на позицию Junior Frontend разработчика. Не совсем понимаю, что и как требуется сделать.
Необходимо реализовать SPA с заметками на VUE.js. Приложение должно содержать 2 страницы:
- Список заметок с пагинацией. В списке - название заметки и дата.
- Детали по каждой заметке с её редактированием. Переход между страницами должен осуществляться без перезагрузки.
В этой части все понятно
После обновления страницы данные не должны потеряться.
Здесь появляется первый вопрос: как это реализовать в Frontend. Что хочет видеть работодатель?
В качестве результата нужно прислать исходники и собранный проект так, чтобы можно было протестировать проект без деплоя.
Понимаю что нужно сделать, но не понимаю как. Т.е. для сохранения заметок нужно добавлять их в базу данных, как отправить готовый проект с БД?
Есть ли какие-нибудь ресурсы для изучения этого?
Ответы (1 шт):
После обновления страницы данные не должны потеряться.
В этом случае от Вас требуют и проверяют знания работы с LocalStorage и Vuex (или LocalStorage можно заменить на пакет vuex-persistedstate, тогда только Vuex можно обойтись). Как реализовать - описано целиком и полностью в документации по Vuex.
Как вариант, Вы можете разработать API с базой данных, но вряд ли от Вас это требуют, поскольку хотят проект без деплоя.
В качестве результата нужно прислать исходники и собранный проект так, чтобы можно было протестировать проект без деплоя.
В целом, требуют запустить команду npm run build, запечатать все файлы из папки и отправить (только вряд ли node_modules им будут нужны, а то они весить будут нехило). Т.е точка входа по index.html, на нём работает Vue уже в режиме SPA. Закомпиленный проект потянет за собой файлы уже сразу после распаковки (проверяющие это задание у работадателя странные конечно, раз не могут развернуть проект, это уже первый звоночек, но ладно).
Это очень простое задание, если Вы хоть как-то разбирались с Vue, Vuex и т.д. Для выполнения задания надо просто прочитать документацию.