Breaking

Post Top Ad

Your Ad Spot

martes, 7 de mayo de 2019

Construyendo un Vue SPA con Laravel Parte

Lo dejamos en la Parte 4 con la capacidad de editar usuarios y aprendimos cómo usarlo v-modelpara rastrear los cambios en la userpropiedad del componente de vista Ahora estamos listos para ver cómo se eliminan los usuarios y cómo manejar la IU después de que la acción de eliminar se realice correctamente.
En el camino, veremos cómo construir una instancia de cliente de Axios para permitir una mayor flexibilidad en la forma en que configuramos los clientes de API.

Actualización de la API para manejar la eliminación de usuarios

Lo primero en lo que vamos a trabajar es definir la ruta API para eliminar un usuario individual. Gracias al enlace del modelo de ruta, esto es solo un par de líneas en UsersController:
public function destroy(User $user)
{
    $user->delete();

    return response(null, 204);
}
A continuación, defina la nueva ruta en la parte inferior del grupo Api en el routes/api.phparchivo:
Route::namespace('Api')->group(function () {
    Route::get('/users', 'UsersController@index');
    Route::get('/users/{user}', 'UsersController@show');
    Route::put('/users/{user}', 'UsersController@update');
    Route::delete('/users/{user}', 'UsersController@destroy');
});

Eliminar usuarios en la interfaz

Vamos a agregar la funcionalidad de eliminar a nuestro /users/:id/editcomponente de vista, agregando un botón de eliminar al UsersEdit.vuecomponente debajo del botón "Actualizar":
<div class="form-group">
    <button type="submit" :disabled="saving">Update</button>
    <button :disabled="saving" @click.prevent="onDelete($event)">Delete</button>
</div>
Copiamos el :disabledatributo del botón de actualización que podemos usar para evitar una actualización involuntaria o eliminar cuando se lleva a cabo una acción.
A continuación, debemos conectar la onDelete()devolución de llamada para manejar la eliminación del usuario:
onDelete() {
  this.saving = true;

  api.delete(this.user.id)
     .then((response) => {
        console.log(response);
     });
}
Llamamos a la delete()función en nuestro cliente API y luego encadenamos una devolución de llamada para cerrar sesión en el objeto de respuesta en la consola. Los botones de actualización y eliminación se desactivan si hace clic en "eliminar" porque estamos configurando this.saving = true, volveremos a este punto en un segundo. Si tiene la consola abierta, verá un 204 No Contentobjeto de respuesta que indica que la eliminación funcionó.

Cómo reaccionar a un usuario eliminado con éxito

Una cosa que es un poco diferente a la actualización de un usuario es que no tenemos un usuario en la base de datos una vez que eliminamos el registro. En una aplicación web tradicional, probablemente eliminaríamos el registro y luego redirigiríamos al usuario a la lista de todos los usuarios.
Podemos hacer esto en nuestro SPA mediante la navegación programática del usuario a la /userspágina:
this.$router.push({ name: 'users.index' })
Aplicando la this.$router.push()llamada a nuestro evento, la versión más básica se vería así:
onDelete() {
  this.saving = true;
  api.delete(this.user.id)
     .then((response) => {
        this.$router.push({ name: 'users.index' });
     });
}
Si actualiza la aplicación y elimina un usuario, notará un breve destello de los botones desactivados y luego el navegador navegará a la /userspágina sin ningún comentario.
Podríamos manejar la notificación al usuario con un mecanismo de notificación / brindis dedicado. Voy a dejar el enfoque a usted, pero aquí hay una idea básica de lo que estoy hablando:
onDelete() {
  this.saving = true;
  api.delete(this.user.id)
     .then((response) => {
        this.message = 'User Deleted';
        setTimeout(() => this.$router.push({ name: 'users.index' }), 2000);
     });
}
El código anterior establece la this.messagepropiedad de datos que configuramos en la Parte 4 y espera dos segundos antes de navegar a la /userspágina de índice.
También puede usar algo como portal-vue o un componente en su diseño que muestre el mensaje temporalmente (o con un botón de cierre obligatorio) para indicar que una acción ha tenido éxito (o ha fallado) para proporcionarle al usuario algunos comentarios.

Cuatro oh cuatro

Es posible que haya notado que si nuestra ruta de Vue coincide con el patrón /users/:id/edit, es posible que aún tengamos una 404respuesta de la API si no se encuentra el ID de usuario:
Con una aplicación laravel del lado del servidor, que podríamos interpretar 404.blade.phpde una ModelNotFoundExceptionfacilidad. Un SPA es un poco diferente. La ruta anterior es válida, por lo que necesitamos que nuestro componente rinda el componente de error en lugar de redirigir al usuario a una ruta 404 dedicada.
Agregaremos algunas nuevas rutas a la configuración del enrutador Vue resources/assets/js/app.jscon una vista 404 dedicada y un componente general que redirige las rutas que no coinciden con la ruta 404:
{ path: '/404', name: '404', component: NotFound },
{ path: '*', redirect: '/404' },
Crearemos un NotFoundcomponente simple en resources/assets/js/views/NotFound.vue:
<template>
  <div>
    <h2>Not Found</h2>
    <p>Woops! Looks like the page you requested cannot be found.</p>
  </div>
</template>
Debido a que tenemos una ruta general en el backend en Laravel, eso significa que la interfaz también necesita una ruta general para responder con una página 404 si la ruta no coincide con una ruta definida. Aquí está la ruta de fondo como un programa de actualización que captura todas las rutas y envía la plantilla de SPA:
Route::get('/{any}', 'SpaController@index')
    ->where('any', '.*');
Si ingresa una URL no válida como /does-not-exist, verá algo como lo siguiente:
El enrutador Vue llega a la ruta de comodín que redirige el navegador a /404.
Nuestro ejemplo anterior con una identificación de usuario no válida todavía no funciona, porque técnicamente la ruta es válida. Necesitamos actualizar el UsersEditcomponente para capturar las solicitudes fallidas en la create()devolución de llamada y enviar al usuario a la ruta 404:
created() {
  api.find(this.$route.params.id)
     .then((response) => {
         this.loaded = true;
         this.user = response.data.data;
     })
     .catch((err) => {
       this.$router.push({ name: '404' });
     });
}
Ahora, si realiza una solicitud directamente a un URI /users/2000/edit, debería ver que la aplicación redirige a la página 404 en lugar de colgar en la interfaz de usuario "Cargando ..." en el UsersEditcomponente.

Opciones de cliente API

Si bien nuestro users.jscliente HTTP dedicado puede considerarse excesivo en una aplicación pequeña, creo que la separación ya nos ha servido bien, ya que usamos el módulo API en varios componentes. Discuto esta idea en detalle en mi artículo Construyendo clientes flexibles de Axios si desea conocer todos los detalles de lo que ofrece un cliente flexible.
Sin cambiar la API externa de nuestro cliente, podemos cambiar cómo funciona el cliente bajo el capó. Por ejemplo, podemos crear una instancia de cliente de Axios con configuración personalizable y valores predeterminados:
import axios from 'axios';

const client = axios.create({
  baseURL: '/api',
});

export default {
  all(params) {
    return client.get('users', params);
  },
  find(id) {
    return client.get(`users/${id}`);
  },
  update(id, data) {
    return client.put(`users/${id}`, data);
  },
  delete(id) {
    return client.delete(`users/${id}`);
  },
};
Ahora puedo cambiar la baseURL con alguna configuración más adelante si quiero personalizar la forma en que funciona todo el módulo sin afectar los métodos.

Que sigue

Aprendimos cómo eliminar usuarios y responder a una eliminación exitosa en la interfaz a través del enrutador Vue. Hemos introducido la navegación programática a través de la this.$routerpropiedad al registrar el enrutador Vue Vue.use(VueRouter)en nuestro app.jsarchivo principal .
A continuación, pasaremos a construir la creación del usuario para concluir aprendiendo cómo realizar acciones básicas de creación, lectura, actualización y eliminación (CRUD). En este punto, debe tener todas las herramientas que necesita para completar la creación de nuevos usuarios por su cuenta, así que no dude en probar a construir esta funcionalidad antes de la publicación del próximo artículo de esta serie.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas