Usar VueJs, Vuetify y Axios para consumir un API Rest


En esta entrada vamos a ver cómo combinar la librería Axios, que facilita la realización de peticiones Ajax junto con Vuetify, una popular librería para VueJs para realizar Apps con estética Material Design.

Este tutorial es una continuación de esta entrada anterior donde vimos como emplear Ajax junto a VueJs, que a su vez era una ampliación de esta primera entrada donde vimos el uso de Axios para consumir un API Rest.

Vamos a hacer un interface sencilla para ilustrar el funcionamiento. La funcionalidad no está completa al 100%, porque el objetivo es mostrar el uso de estas librerías de forma combinada.

Disponemos de un botón de 'GetAll' que simula la recepción de nuestros 'items' desde el backend. También tenemos un botón para obtener los valores filtrados por el valor indicado en el textbox adjunto.

Anuncio:

También tenemos un botón de 'update' que simula la actualización de un 'item' haciendo la llamada oportuna al API Rest. Y un textbox para ilustrar la creación de un nuevo 'item'.

Respecto al listado de 'items', cada uno de ellos dispone de un botón para borrar el elemento, que por supuesto realiza la llamada oportuna en el API Rest del backend.

Finalmente, tenemos un "snackbar" que muestra las acciones realizadas. En un proyecto real también informaría sobre otros eventos como, por ejemplo, un fallo al intentar realizar una acción en el API Rest.

Para ello, creamos un fichero 'index.html' con el siguiente contenido.

Donde, en resumen, simplemente estamos haciendo uso de los componentes ofrecidos por Vuetify para configurar nuestra página web de prueba.

Por su parte, el fichero 'app.js' pasa a ser,

Donde disponemos de las distintas funciones de callback asociadas a los eventos que hemos empleado en el frontend. Estas llaman a las funciones del fichero 'API.js' que contienen las llamadas Ajax realizadas con Axios.

Este fichero de 'API.js' es idéntico al que empleábamos en la entrada anterior.

Ahora cargamos nuestra página web, con el API Rest ejecutándose en NodeJs. Pulsamos en los distintos botones y comprobamos que las acciones realizadas se muestran correctamente tanto en la consola de desarrollo como en NodeJs.

Es un ejemplo relativamente sencillo, al que le falta para ser una App funcional, pero que nos sirve para ilustrar el uso combinado de estas tres librerías. Con ellas, es muy sencillo hacer una aplicación.

Descarga el código

Todo el código de esta entrada está disponible para su descarga en GitHub.

Anuncio:

Previous Cómo ajustar un controlador PID en Arduino
Next Cómo emplear un ESP8266 como cliente de un API REST con Json
1000