Post Top Ad

Your Ad Spot

miércoles, 19 de agosto de 2020

Construyendo un front-end de Vue para una API de Laravel

 Construyendo un front-end de Vue para una API de Laravel


El artículo anterior nos hizo construir una API JSON Rest usando Laravel Framework. En este tutorial, usaremos Vuejs para crear una interfaz que pueda consumir la API que tenemos instalada. En lugar de representar archivos blade, podemos usar componentes de Vue y AJAX para simplemente obtener los datos que necesitamos mostrar desde la API. Incluso aprenderemos un poco sobre cómo personalizar el CSS en Laravel usando SCSS y Laravel Mix.


Instalación de dependencias

Para comenzar, necesitamos instalar las dependencias especificadas en el archivo package.json de nuestra instancia de Laravel. Para hacer esto, simplemente ejecute npm installen la raíz del proyecto así.
npm instalar dependencias de laravel
Esto descargará e instalará todo el software necesario para la parte frontal del desarrollo.


Mezcla de Laravel

Laravel Mix es una de las dependencias que ahora está instalada. Webpack es realmente difícil. Laravel Mix lo hace más fácil. Con Mix y SCSS podemos cambiar rápidamente el aspecto del sitio. Antes de ejecutar Mix, debemos comprender qué va a hacer por nosotros. Entonces, de forma predeterminada, Mix sigue la lógica webpack.mix.jsque se encuentra en el directorio raíz de un proyecto de Laravel.

Sin embargo, ¿qué significa esto? Bueno, cuando ejecute, npm run devpor ejemplo, Mix verá el contenido de resources / js / app.js y resources / sass / app.scss . Luego, compilará estos activos sin procesar en código utilizable colocado en public / js y public / css .


¿Cómo personalizo mis estilos?

Digamos que quieres probar el genial tema Minty Bootswatch en un Proyecto Laravel. ¿Cómo podemos hacer eso con Mix? ¡Muy fácil! Descargar el _variables.scss archivo desde Bootswatch sitio y reemplazar la que se encuentra en /resources/sass/_variables.scssAhora vemos el archivo original y el nuevo.

_Variables.scss originales

Minty versión _variables.scss

Este archivo establece valores para todas estas variables, lo que le da a Bootstrap un aspecto completamente nuevo. Ahora podemos modificar el archivo welcome.blade.php así solo para una prueba. Queremos probar diferentes clases de Bootstrap para ver si se ha producido el nuevo efecto.


Ejecutar Mix

Ahora podemos ejecutar la mezcla con npm run devy debería haber un resultado similar a este.
hecho compilado con éxito

Nota: Si se encuentra con errores al ejecutar mix, consulte esta publicación que debería ayudar.

Ahora, en lugar de la pantalla de presentación estándar, vemos los nuevos estilos aplicados. ¡Frio!
botas laravel mix


Construyendo un front-end Vue

Con ese poco de instalación y configuración fuera del camino, ahora podemos comenzar a construir el Vue Front end para nuestra API. Solo un par de componentes pueden ser buenos para esto. Tendremos un componente simple del componente Navbar y un componente PostList. Para empezar, simplemente colocaremos las cosas como andamios y luego agregaremos datos dinámicos sobre la marcha.


welcome.blade.php

Laravel todavía va a cargar este archivo de vista como página de inicio. En esa página de inicio, hay un div con la identificación de "aplicación". Nuestra aplicación Vue se adjuntará o se montará a ese div. Aquí están los inicios de ese archivo.

Tenga en cuenta la inclusión de los campos csrf_token. Sin ellos, obtendrá errores de "token CSRF no encontrado: https://laravel.com/docs/csrf#csrf-x-csrf-token" en la consola, así que asegúrese de incluir esas líneas de código.


Agregar un componente de barra de navegación

Notará que en la línea 13 de arriba hay una referencia a un componente <navbar>. Necesitamos construir y registrar ese componente para que se muestre. Podemos navegar al resources/js/componentsdirectorio y crear un archivo Navbar.vue . Este archivo tiene una .vueextensión especial que significa un par de cosas. La primera es que es un componente de archivo único de Vue . Estos tipos de archivos le permiten colocar la plantilla, el script e incluso el CSS personalizado en el mismo archivo. Luego construye el archivo a través de Webpack (en este caso Laravel Mix) y obtiene un resultado funcional. ¡Muy genial!

recursos / js / components / Navbar.vue

Ahora, registramos el componente en resources/js/app.js.

resources / js / app.js

Siempre que haya configurado Laravel Mix para ver sus archivos ahora, ya sea ejecutando npm run watchnpm run watch-poll, entonces debería poder visitar la página de inicio y ver una barra de navegación Minty.
bootswatch minty navbar


Listado de publicaciones

Para enumerar algunas publicaciones, podemos agregar un nuevo componente llamado PostList.vue en resources/js/componentsEntonces, primero, continúe y agregue ese archivo como vemos aquí.
componente post vue en laravel

El nuevo componente debe registrarse en el archivo app.js.

resources / js / app.js

Ahora, en el archivo PostList.vue , necesitamos completar las áreas de plantilla y script. Hacemos uso del Lifecycle Hook creadoEsta función se llama automáticamente justo después de que se haya creado la instancia del componente. Esto es justo antes de que el componente se monte en la página, por lo que es el momento perfecto para obtener los datos de la API que necesitaremos usando la API de JavaScript Fetch .

recursos / js / components / PostList.vue

En el código de arriba, la postsmatriz en la línea 16 es lo que contendrá la respuesta de la API que contiene todas las publicaciones. Se completa cuando se carga la página y se created()ejecuta el enlace. Cuando eso sucede getPosts(), se llama a la función, que es la que obtiene los datos de la api y los asigna a la postsvariable. Con los datos en su lugar, la sección de plantillas utiliza su Vue v-for estándar para crear una lista de publicaciones.
La respuesta de la api de laravel se muestra con vue


Agregar un paginador

Tenemos 5 publicaciones para mostrar con éxito arriba, ¡y se ve muy bien! Recuerde que nuestra API proporciona información sobre los enlaces anteriores, siguientes y actuales. Esto significa que puede usar esos datos para crear un paginador. Las líneas resaltadas a continuación muestran las adiciones para mostrar el paginador.

Esto da como resultado que se muestre el paginador que nos dice en qué página estamos y habilita o deshabilita dinámicamente los botones anterior y siguiente según el lugar del conjunto en el que nos encontremos.

Agregar una publicación

Agreguemos un formulario a la página para que se pueda agregar una publicación enviando una solicitud POST a la API. En la parte posterior, primero cambiaremos la paginación a 3 por página para darnos más espacio.