Un buscador sencillo con Vue.js

En esta ocasión, vamos a ver el código de un sencillo buscador, que accede a una API para mostrar unos resultados, usando Vue.js.

El ejemplo muestra la conexión a una API de ejemplo que ya vimos en un anterior post: Usando axios, donde conectabamos a un sitio web {JSON}Placeholder, que pone a nuestra disposición unas API’s para hacer pruebas.

En esta ocasión, vamos a mostrar los datos de una conexión que nos devolverá una serie de post de pruebas, y mostraremos solamente los datos de ID, Titulo y Contenidos por pantalla.

Para darle un poco más de vistosidad al ejemplo, se ha usado Bootstrap en index.html para poder mostrar los datos de forma más agradable y además, se han paginado los resultados en grupos de 10, para hacerlo más usable.

Además de la muestra de los datos, que es trivial en este caso, vamos a disponer de un campo de busqueda, que para el ejemplo, recorrerá el json resultante de la consulta y mostrará aquellos registtros que incluyan la cadena indicada.

El código, como siempre busca ser lo más sencillo posible y está disponible en mi repositorio de GitHub.

Vamos a ver algunos detalles del código:

En /src/logic, creamos un fichero, axios_instance.js, que creará una instancia a Axios, con la conexión a la API

// axios_instance.js
import axios from 'axios';

// Creamos una instancia de axios
const axiosInstance = axios.create({
    baseURL: 'https://jsonplaceholder.typicode.com', // EndPoint de pruebas
    timeout: 5000, // Tiempo máximo de espera para la petición
});

export default axiosInstance;

En la vista principal, buscador.vue, el método buscar, muestra tanto los datos completos de la conexión a la API, como los resultados de la consulta:

const buscar = async () => {
      try {
        if (!axiosInstance) {
          console.error('La instancia de axiosInstance no está definida.');
          return;
        }

        const response = await axiosInstance.get('/posts');
        resultados.value = response.data;

        // Filtrar resultados 
        if (consulta.value.trim() !== '') {
          const consultaLower = consulta.value.toLowerCase();
          resultados.value = resultados.value.filter(
            (post) =>
              post.body.toLowerCase().includes(consultaLower) ||
              post.title.toLowerCase().includes(consultaLower)
          );
        }

        // Cambiar a la primera página después de cada búsqueda
        currentPage.value = 1;
      } catch (error) {
        console.error('Error al realizar la búsqueda', error);
      }
    };

Se ha añadido, además, una paginación sencilla, para que sea más fácil ver los resultados:

 // Lógica de paginación
    const paginatedResults = ref([]);
    const pageCount = ref(1);

    const updatePagination = () => {
      const startIndex = (currentPage.value - 1) * pageSize;
      paginatedResults.value = resultados.value.slice(startIndex, startIndex + pageSize);
    };

    const updatePageCount = () => {
      pageCount.value = Math.ceil(resultados.value.length / pageSize);
    };

    const changePage = (pageNumber) => {
      currentPage.value = pageNumber;
    };

Finalmente, aquí os dejo un pequeño video con el funcionamiento del código:

Espero que os haga resultado interesante. Como siempre digo, estas pequeñas recetas no son más que un punto de partida para que podaís recrearlas y montar vuestros propios ejemplos.