Usar VueJs junto a Axios para consumir un API Rest


En esta entrada vamos a ver cómo emplear el framework VueJs junto con la librería Axios para realizar peticiones Ajax y consumir un API Rest.

En una entrada anterior ya vimos un ejemplo de la librería Axios. En esta entrada continuaremos este ejemplo, combinándolo con el uso del framework VueJs.

Para ello usaremos nuestro habitual API Rest, que hicimos en esta entrada, y usamos de ejemplo habitualmente en el blog.

Por un lado, vamos a definir una página web muy sencilla para las pruebas. Esta página va a "simular" manipular una serie de items a través del API Rest.

Anuncio:

Tenemos botones para obtener todos los elementos, obtener los elementos filtrados, y crear un nuevo elemento. Por su parte, cada elemento tiene botones para 'Get', 'Delete', 'Replace' y 'Update',

El fichero 'index.html', por tanto, queda de la siguiente forma.

Respecto al código de la aplicación en 'App.js' tenemos,

Donde vemos que hemos definido un componente de Vue para cada uno de los elementos del API. Este componente tiene los botones que desencadenan las acciones de callback que llaman a las funciones del API correspondientes.

Por otro lado, tenemos la aplicación de Vue, donde únicamente hemos definido los tres métodos "generales", y una serie de datos de ejemplo. En una aplicación real obtendríamos estos datos como una consulta a algún origen de datos.

Finalmente, tenemos el fichero 'Api.js', que expone las llamadas al API Rest, que realizaremos a través de Axios.

Si ejecutamos el código y pulsamos como los botones, podemos verificar en la consola de JavaScript que las acciones se están lanzando correctamente.

Así como en la consola de NodeJs que ejecuta el API Rest.

Así de fácil podemos combinar la potencia de VueJs con la de Axios, dos librerías que encajan perfectamente juntos, y facilitan el desarrollo de aplicaciones web.

En la próxima entrada ampliaremos y terminaremos este ejemplo, añadiendo Vuetify a la ecuación ¡Hasta pronto!

Descarga el código

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

Anuncio:

Previous Cómo instalar MariaDB en Raspberry Pi
Next EmbedIO, librería en C# para crear un servidor HTTP en .NET
1000