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.
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.
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Nuestra simple APP de ejemplo -->
<div id="app">
<div>
<button v-on:click="getAllRequest()">GetAll</button>
</div>
<div>
<button v-on:click="getFilteredRequest()">Filter</button>
<input v-model="myfilter" placeholder="filter">
</div>
<div>
<button v-on:click="postRequest()">Create</button>
</div>
<div>
<my-component v-for="item in myList" v-bind:my="item" v-bind:key="item.id"></my-component>
</div>
</div>
<!-- Cargamos las referencias a VUE y AXIOS desde CDN-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Cargamos los ficheros que simular nuestro API y nuestra App en Vue.JS -->
<script type="text/javascript" src="./API.js"></script>
<script type="text/javascript" src="./App.js"></script>
</body>
</html>Respecto al código de la aplicación en ‘App.js’ tenemos,
Vue.component('my-component', {
props: ['my'],
template: '<div>{{my.text}} <button v-on:click="getRequest(my.id)">Get</button> <button v-on:click="patchRequest(my.id)">Update</button> <button v-on:click="putRequest(my.id)">Replace</button> <button v-on:click="deleteRequest(my.id)">Delete</button></div>',
methods: {
getRequest: function (id) {
API_getRequest(id);
},
patchRequest: function (id) {
API_patchRequest(id, 'NewItem');
},
putRequest: function (id) {
API_putRequest(id, 'NewItem');
},
deleteRequest: function (id) {
API_deleteRequest(id);
}
}
})
var app = new Vue({
el: '#app',
data: {
myfilter: "",
myList: [
{ id: 0, text: 'Item1'},
{ id: 1, text: 'Item2' },
{ id: 2, text: 'Item3'}
]
},
methods: {
getAllRequest() {
API_getAllRequest();
},
getFilteredRequest() {
API_getFilteredRequest(this.$data.myfilter);
},
postRequest() {
API_postRequest('NewItem');
},
}
})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.
function API_getRequest(id) {
axios.get('http://localhost:8080/item/' + id)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_getFilteredRequest(filter) {
axios.get('http://localhost:8080/item', {
params: {
filter: filter
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_getAllRequest() {
axios.get('http://localhost:8080/item')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_postRequest(data) {
axios.post('http://localhost:8080/item', {
data: data
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_putRequest(id, data) {
axios.put('http://localhost:8080/item/ ' + id, {
data: data
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_patchRequest(id, data) {
axios.patch('http://localhost:8080/item/ ' + id, {
data: data
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_deleteRequest(id) {
axios.delete('http://localhost:8080/item/' + id)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}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. 