Создание динамического поиска в древовидном меню с использованием Vue.js

Введение

В этом проекте вы научитесь создавать динамическую функциональность поиска в меню-дереве с использованием Vue.js. Проект включает получение данных вторичного меню из JSON-файла, реализацию функции нечеткого поиска и отображение отфильтрованного меню-дерева на странице.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Получать данные вторичного меню из JSON-файла с использованием библиотеки axios
• Реализовывать функцию поиска для фильтрации пунктов меню в соответствии с вводом пользователя
• Отображать отфильтрованное меню-дерево на странице с выделением совпадающего текста

🏆 Достижения

После завершения этого проекта вы сможете:

• Разрабатывать динамический и интерактивный пользовательский интерфейс с использованием Vue.js
• Получать данные из JSON-файла и обрабатывать асинхронное получение данных
• Реализовать функцию нечеткого поиска для фильтрации данных в соответствии с вводом пользователя
• Отображать иерархическую структуру меню-дерева и выделять совпадающий текст

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

├── js
│    ├── axios.min.js ## Библиотека для инкапсуляции Ajax, используемая для асинхронного получения данных
│    ├── index.js ## Логический код для реализации функций страницы
│    └── vue.js ## Версия 2.x фреймворка Vue.js
├── data.json ## Общие данные вторичного меню
└── index.html ## Макет страницы

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

В настоящее время отображается только статический макет, и асинхронное получение и отображение данных вторичного меню, а также функция нечеткого поиска не реализованы.

Получение данных вторичного меню

В этом шаге вы научитесь получать данные вторичного меню из файла data.json с использованием библиотеки axios.

1. Откройте файл index.js в директории /js.
2. В хуке жизненного цикла created() используйте метод axios.get() для получения данных из файла data.json:

created() {
  axios.get("../data.json").then((res) => {
    this.list = res.data;
    this.resultList = res.data;
  });
},

Этот код получит данные из файла data.json и сохранит их в свойствах данных list и resultList.

Реализация функциональности поиска

В этом шаге вы научитесь реализовывать функцию поиска для пунктов вторичного меню.

1. В файле index.js добавьте метод searchData() в объект methods:

methods: {
  searchData() {
    // TODO: Реализация функции поиска
    this.resultList = [];
    let set = new Set();
    this.list.forEach((item1) => {
      if (item1.meta.title.search(this.search)!== -1) {
        set.add(item1);
      }
      if (item1.children) {
        item1.children.forEach((item2) => {
          if (item2.meta.title.search(this.search)!== -1) {
            set.add(item1);
          }
        });
      }
    });
    this.resultList = set;
  }
}

2. Обновите свойство данных resultList в соответствии с вводом поиска. Метод searchData() будет перебирать данные list и добавлять любые совпадающие элементы в объект Set. Затем объект Set назначается свойству данных resultList.

Такая реализация будет отображать пункты вторичного меню, соответствующие запросу поиска, при этом совпадающий текст будет выделен желтым фоном.

После этих изменений на странице будет отображаться отфильтрованное меню-дерево в соответствии с вводом поиска, при этом совпадающий текст будет выделен.

Финальный эффект реализации выглядит так:

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.