Para hacer las llamadas al backend utilizaremos el paquete Axios. En nuestro proyecto tendremos una carpeta
...
services
...
con los archivos Javascript que contengan los servicios. Un ejemplo podría ser el siguiente. Nos definimos un archivo
...
endpoints.js
...
para tener las urls a las que se llamarán:
| Bloque de código | ||
|---|---|---|
| ||
export const ENDPOINT = 'https://enpointrest.um.es/consultaexpedientes/rest/v1.0/private'; |
Y el archivo de nuestro servicio, por ejemplo
...
ServicioExpedientes.js:
| Bloque de código | ||
|---|---|---|
| ||
import axios from "axios"; import { ENDPOINT } from "./endpoints"; export default class ServicioExpedientes { getExpediente(dni, codTitulo, codPlan, codGM, codCentro, codDoc, bienioDoc) { if (!dni) return null; var url = ENDPOINT + "/expediente?dni=" + dni; if (codTitulo) url += "&codTitulo=" + codTitulo; if (codPlan) url += "&codPlan=" + codPlan; if (codGM) url += "&codGM=" + codGM; if (codDoc) url += "&codDoc=" + codDoc; if (bienioDoc) url += "&bienioDoc=" + bienioDoc; return axios.get(url).then((response) => response.data); } } |
La línea importante aquí es la última, en la que llamamos a la url y, una vez obtengamos la respuesta, devolvemos el contenido.
Posteriormente, en nuestros componentes, tendremos que definirnos nuestro servicio, inicializarlo, y hacer las llamadas de esta forma:
| Bloque de código | ||
|---|---|---|
| ||
... export default { data() { ... }, servicioExpedientes: null, created() { this.servicioExpedientes = new ServicioExpedientes(); }, methods: { método() { this.servicioExpedientes( this.titulacionSeleccionada.sivaId, this.titulacionSeleccionada.codTitu, this.titulacionSeleccionada.codPlan, this.titulacionSeleccionada.tipoTitulacion, this.titulacionSeleccionada.cedCodigo, this.titulacionSeleccionada.programa, this.titulacionSeleccionada.bienio ).then((response) => { this.docUniversitarrio = response; }) } } } |