Construindo Busca Dinâmica em Árvore de Menu com Vue.js

Introdução

Neste projeto, você aprenderá como construir uma funcionalidade de busca dinâmica em árvore de menu usando Vue.js. O projeto envolve buscar dados de menu secundário de um arquivo JSON, implementar uma funcionalidade de busca difusa (fuzzy search) e exibir a árvore de menu filtrada na página.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como buscar dados de menu secundário de um arquivo JSON usando a biblioteca axios
• Como implementar uma funcionalidade de busca para filtrar os itens do menu com base na entrada do usuário
• Como exibir a árvore de menu filtrada na página, destacando o texto correspondente

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Desenvolver uma interface de usuário dinâmica e interativa usando Vue.js
• Buscar dados de um arquivo JSON e lidar com a busca assíncrona de dados
• Implementar uma funcionalidade de busca difusa (fuzzy search) para filtrar dados com base na entrada do usuário
• Exibir uma estrutura de árvore de menu hierárquica e destacar o texto correspondente

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para completar esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

├── js
│    ├── axios.min.js ## Biblioteca de encapsulamento Ajax usada para aquisição assíncrona de dados
│    ├── index.js ## Código lógico para implementar as funções da página
│    └── vue.js ## Versão 2.x do framework Vue.js
├── data.json ## Os dados totais do menu de segundo nível
└── index.html ## Layout da página

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente; você verá a página.

Atualmente, apenas o layout estático é exibido, e a aquisição e exibição assíncrona dos dados do menu de segundo nível, bem como a função de busca difusa, não estão implementadas.

Buscar Dados do Menu Secundário

Nesta etapa, você aprenderá como buscar os dados do menu secundário do arquivo data.json usando a biblioteca axios.

1. Abra o arquivo index.js no diretório /js.
2. No hook de ciclo de vida created(), use o método axios.get() para buscar os dados do arquivo data.json:

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

Este código buscará os dados do arquivo data.json e os armazenará nas propriedades de dados list e resultList.

Implementar a Funcionalidade de Pesquisa

Nesta etapa, você aprenderá como implementar a funcionalidade de busca para os itens do menu secundário.

1. No arquivo index.js, adicione um método searchData() ao objeto methods:

methods: {
  searchData() {
    // TODO: Implementing the search function
    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. Atualize a propriedade de dados resultList com base na entrada de busca. O método searchData() percorrerá os dados list e adicionará quaisquer itens correspondentes a um objeto Set. O objeto Set é então atribuído à propriedade de dados resultList.

Esta implementação exibirá os itens do menu secundário que correspondem à consulta de busca, com o texto correspondente realçado com um fundo amarelo.

Com essas alterações, a página agora exibirá a árvore do menu filtrada com base na entrada de busca, com o texto correspondente realçado.

O efeito final da implementação é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.