Vue JS es un framework que se destaca por su simplicidad y facilidad de aprendizaje. Sin embargo, también es un framework muy poderoso y robusto. Y cuando hablamos de aplicaciones Web, una tendencia que crece cada vez más es la conexión de nuestros frameworks con una API. Quizás ya te has preguntado: “¿Cómo realizar esta conexión con Vue JS?” ¡Es sobre eso de lo que hablaremos en este artículo!
Nos basaremos en el proyecto que desarrollamos en el artículo Vue JS - Introducción y creación del primer proyecto
Además, utilizaremos la API que desarrollamos en el artículo Creando API PHP con Laravel y PostgreSQL.
Esto será interesante porque veremos en la práctica cómo ocurre la conexión de dos sistemas diferentes, con dos lenguajes diferentes, a través de la API.
Para comenzar, vamos a iniciar el servidor de nuestra API en Laravel usando el comando php artisan serve. Este comando nos devolverá la siguiente respuesta:
Ahora vamos a acceder a nuestro archivo HTML que está usando Vue y realizar las adaptaciones necesarias.
Listando usuarios
La primera adaptación que necesitamos realizar es en el diseño. Nuestra API tiene el campo de email en su estructura, pero nuestro HTML no. Vamos a agregar una etiqueta más para mostrar también el email de cada usuario registrado:
<input type="text" v-bind:value="user.email" v-on:change="setUser($event.target.value, user.id)">
¡Excelente! Ahora podemos comenzar la implementación de las llamadas a la API en nuestro código. Para ello, utilizaremos una biblioteca de JavaScript llamada Axios. Esta biblioteca es cada vez más conocida, debido a la facilidad de su configuración e implementación. Además, realiza las solicitudes basándose en promesas, lo que nos ayuda a tener un código realmente asíncrono.
La implementación de axios en nuestro proyecto es bastante simple, igual a la implementación de Vue. Solo tienes que añadir una etiqueta