Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de Vue Axios por ejemplo (API CRUD)

 En este tutorial de Vue Axios , aprenderemos a usar Axios (un cliente http) enviando, por ejemplo, solicitudes de publicación, obtención, colocación y eliminación a una API REST. Veremos cómo agregar métodos CRUD (Create, Read, Update y Delete) con un front-end Vue.js y un back-end de la API RESTful de Python Django .

Axios es una biblioteca cliente http moderna basada en promesas que se ejecuta en el navegador y el servidor a través de Node.js. Axios funciona de forma asincrónica y le permite realizar llamadas HTTP a puntos finales REST y consumir API REST.

Usando Axios con Vue

Usaremos Axios para enviar llamadas API o HTTP (escribiremos código para enviar solicitudes GET, POST, DELETE y PUT HTTP) desde una interfaz Vue.js a un back-end de API RESTful construido con Django.

Lo primero es lo primero, obtengamos el código de back-end.

Obtener el back-end de ejemplo de Django

En este tutorial, nos centraremos en construir el front-end de Vue.js y Axios, por lo que usaremos una API de Django construida previamente disponible en este repositorio de GitHub.

Con el siguiente comando, puede clonar el código de back-end:

$ git clone https://github.com/techiediaries/django-crm
$ cd django-crm

A continuación, debe crear un entorno virtual e instalar paquetes usando pipenv :

$ pipenv install

A continuación, active el entorno virtual usando:

$ pipenv shell 

Finalmente, cree y migre la base de datos y ejecute el servidor de desarrollo local usando:

$ python manage.py migrate
$ python manage.py runserver

Su servidor se ejecutará desde http://localhost:8000Ahora está listo para crear la interfaz Vue.js para comunicarse con el back-end mediante el cliente HTTP de Axios.

Creando el Vue Front-End

Navegue dentro de su proyecto y cree un proyecto de front-end utilizando la CLI de Vue que hemos instalado en el tutorial anterior .

$ vue create frontend

¡Eso es! Ahora tiene un proyecto de Vue listo.

Puede servir su aplicación usando el siguiente comando:

$ vue serve

Instalación del cliente Http de Axios

El siguiente paso es instalar Axios en su proyecto de Vue usando el siguiente comando:

$ npm install --save axios

Consumir la API RESTful con Axios

Después de instalar Axios, lo usaremos para consumir en la API RESTful expuesta desde http://localhost:8000.

Para encapsular todo el código que interactúa con el servidor API REST, crearemos una clase JavaScript dentro del frontendproyecto y agregaremos diferentes métodos para enviar llamadas API como POST, GET, PUT y DELETE.

Continúe y cree APIService.jsdentro de la frontend/srccarpeta:

cd frontend/src
touch APIService.js

A continuación, abra APIService.jscon su editor de código favorito y agregue el siguiente código para crear la clase APIService :

import axios from 'axios';
const API_URL = 'http://localhost:8000';
export class APIService{

constructor(){
}

}

Importamos axios , definimos una variable API_URL que contiene la dirección del servidor de la API REST y luego declaramos y exportamos la clase APIService con un constructor.

Tenemos diferentes puntos finales REST como /api/accounts/api/contactsetc. Veamos un ejemplo con el /api/contactspunto final:

Ejemplo GET de Vue y Axios

Comencemos obteniendo la lista de contactos usando una solicitud HTTP GET. Agregue el siguiente código al APIService.js:

getContacts() {
    const url = `${API_URL}/api/contacts/`;
    return axios.get(url).then(response => response.data);
}

Declaramos un método getContacts () que realiza una llamada GET, utilizando el método axios.get () , hasta el /api/contactspunto final. Tomamos la parte de datos de la respuesta y luego devolvemos una Promesa, de la función, que se resolvería en una serie de contactos o un error.

También necesitamos un método para obtener contactos individuales por identificación o clave principal. Agreguemos un segundo método para APIService.js:

getContact(pk) {
    const url = `${API_URL}/api/contacts/${pk}`;
    return axios.get(url).then(response => response.data);
}

De la misma manera, el método devuelve una Promesa que se resolvería en un solo contacto o error.

Ejemplo de uso de llamadas Http GET

Después de agregar los dos métodos para enviar solicitudes GET al servidor API, ahora podemos llamarlos desde cualquier componente de Vue.

Primero cree componentes de Vue para mostrar contactos. Navegue dentro y frontend/src/componentsluego ejecute el siguiente comando:

touch ListContacts.js

Abra el ListContacts.jsarchivo y comience agregando una plantilla:

<template>
<div>
<h1>Contacts ()</h1>


<table class="table table-bordered table-hover">

<thead>

<tr>

<th>#</th>

<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
<th> Address </th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="contact in contacts">

<th>{ { contact.pk } }</th>

<th>{ { contact.first_name } }</th>

<td>{ { contact.last_name } }</td>

<td>{ { contact.email } } </td>

<td>{ { contact.phone } }</td>


<td>{ { contact.address } }</td>

<td>

<button class="btn btn-danger" @click="deleteContact(contact)"> X</button>
</td>
</tr>
</tbody>
</table>
<div>
</div>
</div>

</template>

Usamos la directiva v-for para recorrer la matriz de contactos y mostrar información sobre cada contacto en una tabla HTML.

A continuación, en el mismo archivo agregue el siguiente código JavaScript:

<script>
import {APIService} from '../APIService';

const API_URL = 'http://localhost:8000';
const apiService = new APIService();

export default {

name: 'ListContacts',

components: {

},

data() {

return {
contacts: [],
numberOfContacts:0,

};

},

methods: {

getContacts(){
    apiService.getContacts().then((data) => {

        this.contacts = data.data;
        this.numberOfContacts= data.count;
    });
},
},

mounted() {
this.getContacts();
},
}
</script>

Primero declaramos las variables contactos y numberOfContacts en el método data () de nuestro componente Vue. A continuación, agregamos un método getContacts () que llama a getContacts () de la instancia APIService que creamos al comienzo del archivo. Cuando la promesa se resuelve, asignamos los resultados a nuestras variables declaradas, es decir, contactos y numberOfContacts . En el () montado método del componente que llamamos los getContacts () método para que podamos obtener contactos para mostrar tan pronto como el componente está montado.

Ejemplo de publicación de Vue y Axios

Veamos ahora cómo podemos publicar datos en nuestro servidor API RESTful enviando una llamada http POST usando Axios. Agregue el siguiente método a la APIService.jsclase:

createContact(contact){

    const url = `${API_URL}/api/contacts/`;
    return axios.post(url,contact);
}

Declaramos una función createContact () que toma un objeto de contacto y lo envía a través de una solicitud POST usando el método axios.post () . La función devuelve una promesa que se puede resolver con éxito o como respuesta de error.

Ejemplo de Put de Vue y Axios

Después de implementar el método http POST, veamos el código para hacer un método http PUT que se puede usar para actualizar datos. En la APIService.jsclase agregue el siguiente método:

updateContact(contact){

    const url = `${API_URL}/api/contacts/${contact.pk}`;
    return axios.put(url,contact);
}

El método updateContact () realiza una llamada PUT al servidor API mediante el método axios.put () .

Ejemplo de eliminación de Vue y Axios

Veamos cómo agregar un método para eliminar contactos. En la APIService.jsclase, agregue el siguiente método:

deleteContact(contact){
    const url = `${API_URL}/api/contacts/${contact.pk}`;
    return axios.delete(url);
}

El deleteContact () usa el método axios.delete () para enviar una solicitud DELETE al servidor API.

Conclusión

En este tutorial con Vue y Axios, hemos visto cómo implementar la funcionalidad CRUD (Crear, Leer, Actualizar y Eliminar) utilizando el cliente http de Axios con Vue.js y un servidor API REST.

Publicar un comentario

0 Comentarios