Header Ads Widget

Ticker

6/recent/ticker-posts

Axios Powered VueJS Form Component

 Axios Powered VueJS Form Component


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

Entonces, 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 vue . El marcado que estamos buscando se destaca aquí.

Entonces, una vez más, vemos la necesidad de migrar el marcado de una sintaxis basada en blade a puramente JavaScript. 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 alimentar 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 no se ha determinado. 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 utiliza 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

Configuremos ahora 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 usar 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 desde el padre (Replies.vue) al hijo (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 alimentado 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 usando 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 de envoltura 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 conteo de respuestas actualizado en la base de datos. En los días previos a estos nuevos marcos MVVM como Vue, eso significaba que necesitaba configurar una función similar a jQuery que se activaba en una solicitud ajax exitosa. Debería sumergirse en el dom, encontrar 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 se toma uno de esos, 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 hemos construido todo, podemos agregar, editar, marcar como favorito o eliminar una respuesta, todo con una aplicación de una sola página muy elegante. 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


Resumen de componentes de formulario de Axios Powered VueJS

En este tutorial, asumimos la tarea de configurar un componente NewReply.vue que hace uso de axios para publicar nuevas respuestas en la base de datos. ¿Cómo lo hicimos?

  • Cree un nuevo componente hijo (NewReply.vue)
  • Configurar la captura de datos con v-model en el niño
  • Configurar un detector de eventos de clic en el niño
  • Hacer referencia al hijo (NewReply) en el padre (Replies.vue)
  • Escuche el evento 'creado' en el padre, active add () si es así
  • Determine cómo completar la URL del extremo para publicar
  • Asegúrese de que el backend de Laravel admita solicitudes ajax
  • Configurar comprobaciones de autenticación en el lado del cliente
  • emitir eventos para permitir actualizaciones de la página en tiempo real

Publicar un comentario

0 Comentarios