Como Leer un EndPoint de API REST que devuelve datos JSON con Vue JS 3 y Axios 0.21.1 – Parte 1

7 minuto(s)

Demo

El formato de intercambio de datos JSON es muy importante en las aplicaciones actuales, mas del 60% de proyectos creados en la web y proyectos móviles usan este formato y con Vue JS no hay excepción, este Framework que personalmente es uno de los mejores en la actualidad, al menos hasta la fecha de este Post lo es, permite leer archivos JSON de manera nativa, pero imagina hacerlo asíncronamente con Ajax, esto es posible usando Axios y en este Post te enseñaré como hacerlo, vamos con ello.

Partes

  • Parte 1
  • Parte 2 – Final (Código Fuente GitHub)

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Las Buenas Prácticas Un Hábito Importante en la Programación”:

Spotify: Sound Cloud: Apple Podcasts:

Bien ahora continuemos con el Post: Como Leer un EndPoint de API REST que devuelve datos JSON con Vue JS 3 y Axios 0.21.1 – Parte 1. 

En Vue JS podemos hacer uso de Vue CLI el cual es un entorno que nos permite ejecutar comandos para realizar determinadas tareas de manera más rápida en Vue JS, para poder usar Vue CLI necesitas tener instalado Node JS, te recomiendo leer el artículo Que es y Como instalar Node JS. Adicionalmente si quieres aprender sobre que es una API REST te recomiendo leer el articulo Que es API REST + Mejores Prácticas.

Si ya tenemos instalado Node JS, podemos instalar Vue CLI, para esto ejecutamos el siguiente comando para que se nos instale de manera global, es decir para que este disponible en todo el sistema operativo agregándole la opción -g.


Bueno con esto ya estamos preparados para crear nuestro proyecto a continuación.

Creación de Nuevo Proyecto

Voy a crear un nuevo proyecto con Vue JS ejecutando el siguiente comando de Vue CLI y presiono ENTER para continuar. Yo estoy usando la consola de comandos de Windows (CMD), esta me crea un proyecto con determinadas configuraciones las cuales realiza automáticamente, si lo haces con la consola Git Bash te pedirá seleccionar paso a paso las configuraciones para tu proyecto. 


Bueno con esto he creado mi proyecto, ahora para verificar que el proyecto se ha creado correctamente, ejecutaré el siguiente comando.


Si abro la dirección local http://localhost:8080/ en el navegador, debería de ver el proyecto que Vue JS nos crea por defecto.

Vista HTML

Luego de crear el proyecto se nos creo un conjunto de directorios y archivos indispensables para que nuestro proyecto en Vue JS funcione correctamente.

La tabla HTML en donde listaré los datos que obtenga del archivo JSON, la crearé con Bootstrap 4, entonces vamos a instalar Bootstrap 4 y las dependencias jQuery y Popper que son necesarias para que Bootstrap funciones sin problemas.

Bootstrap 4

Para instalar Bootstrap 4 ejecuto el siguiente comando.

jQuery

Para instalar jQuery ejecuto el siguiente comando.

Popper

Para instalar Popper ejecuto el siguiente comando.


Paso seguido abro el archivo main.js que se encuentra en src > main.js


Dentro del archivo main.js importo el archivo CSS y JavaScript de Bootstrap 4.


Ahora voy a crear un componente llamado Postres, este componente lo crearé en src > components > Postres.vue 


Abro el archivo Postres.vue  y agrego la siguiente tabla HTML, esta tabla tiene contenido de mentira solo para definir la estructura, más adelante ese contenido será reemplazado por los datos JSON que obtengamos.


Paso seguido abro el archivo App.vue que se encuentra en src > App.vue


Dentro del archivo App.vue importo el componente Postres que había creado anteriormente.


Y si actualizo la pagina debería de ver la tabla HTML Bootstrap con datos de mentira que mas adelante serán reemplazados por los datos del archivo JSON.

Bueno hasta aquí llegamos con esta primera Parte en donde creamos un nuevo proyecto en Vue JS y creamos una tabla HTML con Bootstrap 4 que sera el contenedor de los datos JSON.

Ten Paciencia, lo que quiero es que conozcas bien como se crea este proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En la siguiente parte implementaremos Axios y leeremos un End Point de un servidor que devuelve datos en formato JSON.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.