CREAR API CON JSON Y LLAMADA DESDE VUE

Lo primero que necesitamos:

Lo que haremos es crear una api desde cero mediante el lenguaje JSON Una api es una especificación formal que establece cómo un módulo de un software que se comunica o interactúa con otro para cumplir una o muchas funciones en nuestro caso lo que haremos es llamar a nuestra API desde nuestro Vue

Librería Node.js
Visual Studios Code
Dependencia Express para nuestra API
Framework utilizaremos Vue
Librería JavaScript que utilizaremos AXIOS

Crearemos primera nuestras carpeta donde contendrá todo nuestro proyecto

Abrimos un terminal nuevo en nuestro Visual

En el terminal cambiamos el terminal de powershell por el cmd

Vamos a la parte derecha de la parte superior donde está el + y escoges el COMMAD PROMPT

Utilizaremos este comando para crear nuestra documentación para poder empezar a crear nuestra api

Lo primero que nos pide es un nombre para nuestra api lo demás lo dejamos default pero si queremos podemos cambiarlo dependiendo de cada uno.

Instalaremos nuestra dependencia que nos servirá para poder utilizar la API

Como podemos ver nuestros archivos creados y lo que hemos instalado ya podremos verlos

Como podemos ver dentro del archivo package.json veremos todo lo que hemos creado y lo que hemos instalado y su versión

Crearemos un archivo llamado index.js donde crearemos nuestra api

Crearemos unas constantes donde requerimos de la librería expreess que hemos instalado

También diremos que app utilizara la librería de json es decir todo nuestros request sera json

Crearemos una constante donde contendrá nuestra Array es decir donde contendrá todo los objetos que luego llamaremos desde nuestro Vue

Esta será nuestra primera declaración request para llamar en local

Nuestra segunda declaración

Aquí llamaremos a nuestra constante cantantes donde nos devolverá nuestra array en formato json

Estas serían las demás de clariones que utilizaremos en nuestra API

La de post y la de Delete

En el posta crearemos un cantante nuevo y le añadiremos ala array que ya tenemos creada anteriormente

En el Delete utilizaremos un parámetro(id) mediante ello poder borrarlo

Ahora solo nos falta decir porque puerto vamos a llamar a nuestra api

En mi caso utilizare el puerto 80

Desde nuestro terminal llamamos a nuestra api

Pruebas de su funcionamiento primeramente local

Ahora llamaremos a nuestra Array creada

Probaremos a llamar por un id en concreto

EN NUESTRO FRAMEWORK VUE

Instalaremos VUE pero antes debemos haber instalado NODE.JS sino no podremos instalar vue

Utilizaremos este comando para instalar y también yarn instalaremos

npm install -g @vue/cli

Dentro de nuestra carpeta creada para nuestro proyecto crearemos nuestro proyecto

Instalaremos AXIOS también para poder llamar nuestra api

Este sería mi condigo de Cantantes.vue

Aquí es donde mostraremos todo el contenido de los cantantes es decir de nuestra API

Este seria el body donde llamaremos a nuestra array que hemos guardado en el data para poder mostrarlo

Este sería el script

donde tendremos todos los métodos menos el de insertar es decir el post

Cuando llamamos a Nuestra api nos mostrar lo siguiente

Punto importante aquí es que tuvimos un problema con CORS más adelante se lo explicare.

Este sería nuestro MAIN.JS

Nuestro APP.VUE

Nuestro MENU.VUE

Nuestro INSERTARCANTANTE.VUE

Comprobaremos que podemos coger un cualquiera y mostrarlo

Es decir agregamos un botón para llamar a dicho componente

Esté seria el método

El resultado

Ahora insertaremos un nuevo Cantante a nuestra Página

Método que utilizaremos es este

Resultado

Ahora comprobaremos el método borrar

El primer método es para borrar en local es decir solo de la página no de api

El segundo método borrar completamente de la api

Al hacer click en el botón vemos en consola cual hemos borrado

Si nos fijamos ahora en la API ya no se encuentra nuestra objeto 1

Error que tuve al cargar la página al llamar al API era uno de CORS porque no tenia implementado en la Api por lo cual no me deja mostrar nada y me daba problemas