Post Top Ad

Your Ad Spot

martes, 8 de septiembre de 2020

Componente de formulario VueJS alimentado por Axios

 Componente de formulario VueJS alimentado por Axios

Casi toda la página de vista de hilos se ha actualizado para usar componentes de VueJS. Lo único que queda por trabajar es el formulario para agregar una nueva respuesta a un hilo. Actualmente, realiza una solicitud de formulario completo para agregar una nueva respuesta. En este tutorial, crearemos un nuevo componente de Vue usando Axios para realizar solicitudes ajax al backend de Laravel. A través de estas solicitudes ajax, enviaremos nuevas respuestas al servidor y, en el lado del cliente, VueJS volverá a representar automáticamente el HTML en la página para reflejar la nueva actualización.


Crear un nuevo archivo .vue

Así que comencemos creando un nuevo archivo para contener el nuevo componente que queremos crear.
nuevo archivo vue para componente

Con el nuevo archivo .vue en su lugar, la pregunta es ¿cómo comenzamos a construir la <plantilla> del archivo .vue? Bueno, podemos volver a visitar el archivo threads / show.blade.php para ver cómo se implementa actualmente este formulario vueEl marcado que estamos buscando se destaca aquí.

Una vez más, vemos la necesidad de migrar el marcado de una sintaxis basada en blade a JavaScript puramente. Así que moviendo esto a la sección <template> del archivo .vue, podemos comentar el marcado que ya no es válido. La comprobación de autenticación de la hoja se ha ido, una etiqueta <form> real ha desaparecido, así como algunos otros elementos.

NewReply.vue


Comenzando con v-model

Lo primero que podemos hacer para comenzar a migrar es configurar la directiva v-model en <template> junto con la propiedad de datos asociada en el área <script>.


Agregar un evento @click al botón

Ahora, en el botón del área <template>, necesitamos agregar un controlador @click para activar un método. Agregaremos un método llamado addReply () que, por supuesto, también se definirá en la instancia de Vue. Tenga en cuenta que también agregaremos alguna validación del lado del navegador. En el método addReply (), ahora comenzaremos a hacer uso de Axios, un cliente HTTP basado en Promise para el navegador y node.js, para potenciar las llamadas ajax.

Hablemos un poco sobre el método addReply (). En primer lugar, vemos que axios se usa para realizar una solicitud de publicación a un punto final en particular. Esa URL de punto final aún está por determinar. Como carga útil para esa solicitud de publicación, enviamos los datos asociados con la propiedad del cuerpo. Esto es lo que se escribe en el área de texto. Después de esto, la construcción .then se usa para activar una función de flecha que restablece el área de texto a una cadena vacía, activa un mensaje flash y luego emite un evento 'creado'. Entonces, ¿qué pasa con este disparo de un evento? Recuerde que la forma en que los componentes de Vue se comunican con sus padres componentes, si tienen uno, es activando un evento que el padre puede escuchar. Entonces, este NewReply.vue es un hijo de Replies.vue. Por lo tanto, configuramos este evento 'creado' para notificar al padre cuando se necesita un renderizado. También tenga en cuenta que el segundo argumento de la función $ emit es la respuesta de datos del servidor.


Representar un componente secundario a partir de un componente principal

Ahora podemos hacer referencia al componente en Replies.vue así:

También tenga en cuenta que en el componente anterior, el v-for se usa como una herramienta para un tipo de representación de lista. Básicamente, estamos presentando una lista de respuestas. Para asegurarnos de que cuando eliminamos un elemento de la colección, el correcto se elimina realmente, necesitamos usar un atributo de clave único . De esta manera, si eliminamos la segunda respuesta en una página, eliminará ese elemento y no dirá la quinta respuesta.

Esto debería ser suficiente para al menos representar el nuevo formulario de respuesta y, de hecho, lo hace en este punto.
componente de forma vue

Además, consulte las herramientas de desarrollo de Vue para ver el nuevo componente. A medida que escribimos texto en el formulario, la propiedad del cuerpo se actualiza en tiempo real gracias a v-model.
vue dev tools modelo v


Escuche un evento en el componente principal

Ahora configuremos la escucha de eventos en el componente principal de Replies.vue. Lo que queremos decir es que, cuando se ha 'creado' una nueva respuesta, debería activar un método add (). Eso se representa con este marcado en Replies.vue. Además, destacaremos el nuevo método add () en el objeto de métodos a continuación. El propósito principal de este método es utilizar un empuje de JavaScript para agregar una nueva respuesta a la colección Vue que la volverá a representar en la página.


Calcule el punto final en el lado del cliente de Vue

Aún no hemos establecido el punto final para agregar una respuesta. Si intentamos agregar una respuesta ahora, esa solicitud POST se enviará al abismo. Esta parte es un poco complicada porque el componente NewReply.vue es autónomo y es un componente secundario, sin embargo, necesita saber en qué URL publicar. Esto significa que debemos confiar en el padre para determinar el punto final. Entonces, lo que podemos hacer es agregar un atributo 'endpoint' al componente <new-reply> en el elemento primario Replies.vue.

Esto significa que el niño NewReply.vue debe aceptar esos datos a través de un accesorio.

Verificar en el navegador a través de las herramientas de desarrollo de Vue muestra que los datos se transmiten del Padre (Replies.vue) al niño (NewReply.vue) como lo vemos aquí.
padre pasando datos al componente hijo vue


Actualizar el punto final en el back-end de Laravel

Inicialmente, habíamos construido nuestros métodos de controlador sin tener en cuenta un componente frontal impulsado por json. Esto significa que necesitamos refactorizar un poco en el método store () del RepliesController para asegurarnos de que pueda dar cuenta de las solicitudes ajax utilizando el método esperaJson (). A continuación, primero almacenamos una respuesta recién agregada en la variable $ respuesta. Luego, con la nueva rama if (), verificamos si la solicitud que se hizo fue una solicitud ajax, y si lo fue, devolvemos directamente la variable $ reply mientras también cargamos el usuario que se envía automáticamente a json para que Vue El front-end puede facilitar su uso.


Ocultar el correo electrónico del usuario

Además del cambio anterior, necesitamos actualizar el modelo User.php para ocultar la dirección de correo electrónico de un usuario como tal.

Esto evitará que un usuario final pueda abrir herramientas de desarrollo en su navegador y ver la dirección de correo electrónico de un usuario.


Evitar que los usuarios no autenticados vean un nuevo formulario de respuesta

Una vez más, dado que perdimos la capacidad de usar directivas blade simples para decidir si mostrar un elemento en particular en la página, necesitaremos volver a crear esa funcionalidad en el lado de JavaScript. La forma en que hacemos esto es configurar una directiva v-if en un div envolvente que contiene completamente el nuevo formulario y botón de respuesta. Luego, configuramos una propiedad calculada como lo hicimos antes para mirar la variable JavaScript de signedInpara ver si el usuario inició sesión o no. Además, también utilizamos una directiva v-else para permitir que el usuario inicie sesión si lo desea. NewReply.vue ahora está actualizado como vemos aquí.


Actualización del conteo de respuestas en tiempo real

Otra cosa que queremos hacer es actualizar el recuento de respuestas en la página. Dado que ahora se agrega una nueva respuesta a la base de datos usando ajax, no hay recarga de página para reflejar el recuento de respuestas actualizado en la base de datos. En los días previos a estos nuevos marcos MVVM como Vue, eso significaba que necesitabas configurar una función similar a jQuery que se activaba en una solicitud ajax exitosa. Debería sumergirse en el dom, buscar el elemento que tiene el recuento de respuestas y actualizarlo manualmente. Algo engorroso. Ahora, con los datos reactivos en nuestra página, podemos actualizar el conteo de respuestas más fácilmente. Entonces, lo que podemos hacer en threads / show.blade.php es asegurarnos de tener un atributo de incremento y decremento como ese.

El fragmento de arriba significa que este componente está escuchando un evento 'agregado' o 'eliminado'. Si uno de ellos es recogido, el recuento aumenta o se reduce. Esto significa que necesitamos emitir un evento en otro lugar. Esto sucede en Replies.vue como parte de las funciones add () o remove ().


¡El momento de la verdad!

Ahora que lo hemos construido todo, podemos agregar, editar, marcar como favoritos o eliminar una respuesta, todo con una aplicación muy elegante de una sola página. Los componentes se actualizan en tiempo real en la página sin necesidad de actualizar la página, lo que brinda una excelente experiencia de usuario.
componente de formulario axios vuejs



No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas