Construir una búsqueda de árbol de menú dinámica con Vue.js

Introducción

En este proyecto, aprenderás a construir una funcionalidad de búsqueda de árbol de menús dinámica utilizando Vue.js. El proyecto implica obtener datos de menús secundarios a partir de un archivo JSON, implementar una característica de búsqueda borrosa y mostrar el árbol de menús filtrado en la página.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo obtener datos de menús secundarios a partir de un archivo JSON utilizando la biblioteca axios
• Cómo implementar una funcionalidad de búsqueda para filtrar los elementos de menú en función de la entrada del usuario
• Cómo mostrar el árbol de menús filtrado en la página, resaltando el texto coincidente

🏆 Logros

Después de completar este proyecto, podrás:

• Desarrollar una interfaz de usuario dinámica e interactiva utilizando Vue.js
• Obtener datos de un archivo JSON y manejar la recuperación de datos asincrónica
• Implementar una característica de búsqueda borrosa para filtrar datos en función de la entrada del usuario
• Mostrar una estructura de árbol de menús jerárquica y resaltar el texto coincidente

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── js
│    ├── axios.min.js ## Biblioteca de encapsulación de Ajax utilizada para la adquisición de datos asincrónicos
│    ├── index.js ## Código lógico para implementar las funciones de la página
│    └── vue.js ## Versión 2.x del framework Vue.js
├── data.json ## Los datos totales del menú secundario
└── index.html ## Diseño de la página

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Actualmente, solo se muestra el diseño estático, y no se han implementado la adquisición y visualización asincrónicas de los datos del menú secundario, así como la función de búsqueda borrosa.

Obtener datos de menú secundario

En este paso, aprenderás a obtener los datos de menú secundario a partir del archivo data.json utilizando la biblioteca axios.

1. Abre el archivo index.js en el directorio /js.
2. En el hook de ciclo de vida created(), utiliza el método axios.get() para obtener los datos del archivo data.json:

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

Este código obtendrá los datos del archivo data.json y los almacenará en las propiedades de datos list y resultList.

Implementar la funcionalidad de búsqueda

En este paso, aprenderás a implementar la funcionalidad de búsqueda para los elementos de menú secundario.

1. En el archivo index.js, agrega un método searchData() al objeto methods:

methods: {
  searchData() {
    // TODO: Implementar la función de búsqueda
    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. Actualiza la propiedad de datos resultList en función de la entrada de búsqueda. El método searchData() recorrerá los datos de list y agregará cualquier elemento coincidente a un objeto Set. Luego, el objeto Set se asigna a la propiedad de datos resultList.

Esta implementación mostrará los elementos de menú secundario que coincidan con la consulta de búsqueda, con el texto coincidente resaltado con un fondo amarillo.

Con estos cambios, la página ahora mostrará el árbol de menús filtrado en función de la entrada de búsqueda, con el texto coincidente resaltado.

El efecto de implementación final es el siguiente:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.