Para hacer las llamadas al backend utilizaremos el paquete Axios. En nuestro proyecto tendremos una carpetaservicescon los archivos Javascript que contengan los servicios. Un ejemplo podría ser el siguiente. Nos definimos un archivoendpoints.jspara tener las urls a las que se llamarán:
export const ENDPOINT = 'https://enpointrest.um.es/consultaexpedientes/rest/v1.0/private';
Y el archivo de nuestro servicio, por ejemploServicioExpedientes.js:
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:
...
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;
})
}
}
}