Búsqueda en tiempo real de frases con Vue.js

Introducción

En este proyecto, aprenderás a crear una aplicación web que permita a los usuarios buscar y mostrar en tiempo real frases hermosas de la literatura. La aplicación obtendrá los datos de un archivo JSON y utilizará Vue.js para implementar la funcionalidad de búsqueda y mostrar los resultados.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el proyecto y entender los archivos y directorios proporcionados
• Cómo implementar la solicitud de datos para obtener los datos del archivo data.json
• Cómo implementar la funcionalidad de búsqueda en tiempo real para mostrar las frases coincidentes
• Cómo dar algunos toques finales al proyecto al dar estilo a la página web

🏆 Logros

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

• Configurar un proyecto de desarrollo web con HTML, CSS y JavaScript
• Utilizar Vue.js para crear una aplicación web reactiva e interactiva
• Obtener datos de un archivo JSON y mostrarlos en la página web
• Implementar la funcionalidad de búsqueda en tiempo real y resaltar las palabras clave coincidentes
• Dar estilo a una página web utilizando CSS para mejorar la apariencia general y la experiencia del usuario

Skills Graph

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:

├── css
│   └── style.css
├── data.json
├── index.html
└── js
    ├── axios.min.js
    └── vue.min.js

Entre ellos:

• css/style.css es el archivo de estilo.
• index.html es la página principal.
• data.json son los datos que se utilizarán en el proyecto.
• js/vue.min.js es el archivo de la versión vue2.x utilizada en el proyecto.
• js/axios.min.js es el archivo de axios.

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 para ver la página.

Implementar la solicitud de datos

En este paso, completarás la solicitud de datos para obtener los datos del archivo data.json.

1. En el archivo index.html, localiza el comentario TODO en la sección <script>.
2. Dentro de la función data(), agrega el siguiente código para obtener los datos del archivo data.json:

data() {
  return {
    list: [],
    search: ""
  };
},
mounted() {
  this.getData();
},
methods: {
  async getData() {
    const res = await axios({ url: "./data.json" });
    this.list = res.data;
  }
}

Este código configura las propiedades de datos iniciales, list y search, y luego llama al método getData() en el hook mounted() para obtener los datos del archivo data.json.

3. Guarda el archivo index.html y actualiza la página web. Ahora deberías ver los datos iniciales cargados desde el archivo data.json.

Implementar la funcionalidad de búsqueda en tiempo real

En este paso, implementarás la funcionalidad de búsqueda en tiempo real para mostrar las frases coincidentes según la entrada del usuario.

1. En el archivo index.html, localiza el comentario TODO en la sección <div class="search-form">.
2. Reemplaza el contenido dentro del elemento <div class="search-form"> con el siguiente código:

<input
  type="text"
  id="search"
  class="search"
  v-model="search"
  placeholder="Título Frase Autor"
/>
<ul class="suggestions">
  <li v-for="item in filterList">
    <span v-html="hightLight(item.poetry_content)" class="poet"></span>
    <span class="title">
      <span v-html="hightLight(item.title)"></span>
      -
      <span v-html="hightLight(item.author)"></span>
    </span>
  </li>
</ul>

Este código utiliza directivas de Vue.js para renderizar dinámicamente la lista de frases coincidentes según la entrada del usuario.

3. A continuación, agrega el siguiente código al hermano mounted():

mounted() {
  this.getData();
},
computed: {
  hightLight() {
    return (text) => {
      if (this.search) {
        const reg = new RegExp(this.search, "g");
        return text.replace(
          reg,
          `<span class='highlight'>${this.search}</span>`
        );
      }
      return text;
    };
  },
  filterList() {
    let { search, list } = this;
    let str = search.trim();
    if (str.length == 0) {
      return [];
    } else {
      return search
       ? list.filter(
            (item) =>
              item.title.includes(search) ||
              item.author.includes(search) ||
              item.poetry_content.includes(search)
          )
        : [];
    }
  }
},

La propiedad computada hightLight es una función que envuelve las palabras clave coincidentes en la etiqueta <span class='highlight'>. La propiedad computada filterList filtra la lista de frases según la entrada del usuario en el cuadro de búsqueda.

4. Guarda el archivo index.html y actualiza la página web. Ahora deberías ver la funcionalidad de búsqueda en tiempo real en funcionamiento, con las frases coincidentes mostradas y las palabras clave resaltadas.

Después de completarlo, el efecto final de la página es el siguiente:

Resumen

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