Простое приложение для хранение контактов с доступом через Web- интерфейс, с помощью vuejs, vue-cli (возможно vuex, vuerouter). Как сдел?

Question

[Bakha]

Здравствуйте программисты.
Я новичок, сейчас разбираюсь с VueJs, VueCli.
Нужна ваша квалифицированная помощь.
Для практики пытаюсь написать простой телефонный справочник с доступом через Web-
интерфейс (без использования баз данных).


Возможные действия:
● добавить телефон (строка) и имя (строка) в справочник
● отобразить список имён-номеров
● выполнить поиск по подстроке имени через строку поиска
● удалить из справочника (со списка).
Отображение:
Отображается список имён-номеров, с этого списка доступны все действия - добавление,
поиск, удаление, отображение информации по найденным номерам (если задана
подстрока поиска по имени, то в список попадают только отфильтрованные имена-
номера).
Дубли имён-номеров добавлять нельзя. При недоступных и неадекватных действиях
выводить соответствующие сообщения.
Необходимо выполнить задание с использованием VueJs + Bootstrap 4, возможно использовать vuex, vuerouter.

Помогите советами или ссылкой на что-то похоже.

Answer 1

[Alams Stoyne]

Написано на коленке но принцип рабочий:


Осталось реализовать поиск, проверку при добавлении и удаление ну и навести красоту стилями.
Нет ничего сложного - Успехов! Если что спрашивайте ;)

Comments

[Bakha]

Да именно в этом застрял): "реализовать поиск, проверку при добавлении и удаление".
Можете подсказать как решить?

[Александр]

Ну и где это все сохраняется или каждый раз при входе на станицу добавлять N-номеров телефонов??? риторический вопрос )))

[Bakha]

Александр, Не сохраняется, даже при перезагрузки страниц. Не могу разобратся как правильно поступить?

[Alams Stoyne]

Александр, Bakha, В текущем примере не сохраняется для сохранения нужно задействовать "место для хранения данных" это могут быть:

1. Локальное хранилище localStorage
   
2. База данных
   
3. Файловая система
   
4. Файлы cookie
   

Варианты 2 и 3 предусматривают разработку BackEnd части вашего приложения, в случае с localStorage можно обойтись и без этой части.
Использование Вариант 1 с localStorage так же накладывает ряд проблем так например то что в результате это будет именно локальное приложение и сохраненными данными, что означает что на других устройствах (и даже браузерах текущего устройства) данные будут не доступны.
Вариант 4 как и Вариант 1 это исключительно локальное приложение, но плюсом мы получаем ряд проблем связанных с особенностями cookie.

[Alams Stoyne]

Bakha, Александр, Обновил пример приложения - смотрите изучайте задавайте вопросы ;)

[Bakha]

Alams Stoyne, Спасибо огромное:)). Сейчас буду разбиратся)