‫Narrador: Entonces, como dijimos en la
‫última conferencia, ahora usemos nuestra API para actualizar los datos del usuario.
‫Y así, al igual que antes, con la funcionalidad de inicio
‫de sesión, ahora vamos a realizar una llamada a la API desde el front-end.
‫Y entonces necesitamos crear un nuevo archivo JavaScript para eso.
‫Y a este lo llamaré configuración de actualización.
‫Y la configuración, porque básicamente actualizaremos
‫los datos que son el nombre y el
‫correo electrónico, y luego también actualizaremos la contraseña de este archivo,
‫y la contraseña, junto con los datos del usuario,
‫los llamé configuración. Bien.
‫Así que esto es bastante similar a lo
‫que hicimos con el inicio de sesión.
‫y una vez más quiero
‫dejar esto como un
‫desafío para que pueda practicar lo que ya ha aprendido.
‫Así que adelante, cree una función de actualización de datos aquí.
‫Entonces, actualizar datos es el nombre de la
‫función que quiero que cree aquí y luego, por supuesto,
‫llame a esa función aquí mismo desde
‫el índice. jf.
‫Entonces, tendrá que exportar una función desde aquí y luego importarla
‫aquí en el índice de manera muy
‫similar a lo que
‫hicimos antes con las otras funciones.
‫Ahora bien, una cosa importante que debemos
‫hacer antes de escribir JavaScript
‫es que en nuestro formulario realmente necesitamos eliminar estas partes aquí.
‫Así que dupliquemos esta
‫línea aquí para dejarla como referencia.
‫Entonces, comentemos esta parte y agreguemos otro comentario aquí,
‫sin API, y luego este
‫aquí es con API, y aquí no necesitamos la
‫acción y tampoco el método, está
‫bien, porque
‫si lo dejas así entonces eso
‫podría enviar los datos a esta URL.
‫E incluso si no es así, bueno, todavía no lo necesitamos aquí.
‫De acuerdo, eso era solo una cosa importante.
‫Pero ahora, por favor, pause el video e intente
‫implementar esto por su cuenta.
‫Así que estoy seguro de que acabas de hacer eso.
‫Y así va la forma en que lo hice.
‫Así que exporte los datos const_update.
‫Y esta función recibirá como entrada el
‫nombre y el correo electrónico, entonces los datos que desea actualizar y
‫luego usaremos axios
‫para crear la propia llamada API.
‫Entonces, importemos también axios desde
‫el módulo axios.
‫Entonces, nuevamente, esta es la sintaxis del módulo es6 y no la sintaxis
‫común del módulo js que usamos en node. js, está bien,
‫así que no confunda estos dos, está bien.
‫Por lo tanto, la solicitud HTTP que estamos haciendo con
‫axios nuevamente deberá estar dentro de un bloque try catch para
‫que, en caso de que haya algún
‫error, podamos manejarlos correctamente.
‫Así que aquí mismo
‫en el bloque de captura, y como antes, comencemos por hacer eso
‫y, en caso de que haya algo mal,
‫queremos mostrar la alerta tal como lo hicimos en el inicio de sesión.
‫Así que importemos esa función showAlert como esta
‫desde
‫la misma carpeta ". / alertas.
‫" Bien. Ah, y también necesitamos deshabilitar nuevamente eslint.
‫Y ahora estamos listos para irnos.
‫Así que no sirve de nada la función de mostrar alerta aquí.
‫Queremos que sea un error
‫para que obtenga ese bonito color rojo y
‫luego el mensaje que queremos mostrar
‫es un error, así que ese es
‫el error que se crea en el bloque try cuando algo sale mal.
‫Luego está el error. respuesta,
‫y luego, datos. message, está bien, entonces esta
‫propiedad de mensaje es la que estamos definiendo en el
‫servidor cada vez que hay un error, de acuerdo.
‫Anuncio, así que vamos a intentarlo como lo hicimos
‫antes con la validación, por lo que en la última lección recibimos
‫este mensaje de error de validación aquí, y
‫ahora en este
‫video cuando estamos haciendo el mismo error
‫con la API, verás luego reciba la alerta con este mismo mensaje
‫exacto, y entonces será una experiencia de usuario mucho mejor,
‫porque no vamos a dejar esa página en la que estábamos, ¿verdad?
‫De todos modos, hagamos ahora esa solicitud HTTP.
‫Y guarde esa respuesta de interloop,
‫y como ya sabe, debemos esperar la promesa
‫que proviene de esta solicitud de axios y,
‫por lo tanto, está marcada como async y ahora aquí están las opciones.
‫Entonces el método es un parche, ¿de acuerdo?
‫Y podría usar esto aquí
‫en minúsculas, pero prefiero escribir siempre los métodos HTTP
‫en mayúsculas de esta manera y ahora vayamos a publicar
‫y veamos la URL que vamos a encontrar ahora.
‫Por alguna razón, esto parece un poco extraño, es demasiado grande ...
‫pero no importa.
‫Solo quiero seleccionar la URL que vamos a ingresar aquí.
‫para que esté aquí en
‫los usuarios y actualice el usuario actual, está bien.
‫Y entonces
‫este recibe como cuerpo solo los datos que queremos actualizar.
‫Entonces, en este caso es el nombre y el
‫rol, pero por
‫supuesto no vamos a permitir que el usuario actualice
‫el rol y creo que lo hicimos aquí para mostrar el ejemplo
‫de que este no está permitido, correcto y
‫así que lo que estamos
‫actualizando es, por supuesto, el nombre y el correo electrónico.
‫Lo importante aquí es que para esta ruta, no necesitamos
‫especificar el ID de usuario, ya que tenemos
‫que hacerlo aquí en Actualizar usuario.
‫Así que este de aquí es el primero que creamos.
‫Y aquí, necesitábamos pasar la ID como un parámetro de URL, pero, por supuesto,
‫al actualizar el usuario actual obtenemos esa ID
‫de usuario a partir de la solicitud. usuario como siempre.
‫¿Recuérdalo?
‫De todos modos, copiemos esto aquí.
‫Y luego especifique la URL.
‫Bien, y aquí, como siempre, el host local y,
‫por supuesto, cuando
‫implementemos esto, cambiaremos esto aquí.
‫Pero por ahora, por supuesto, solo estamos trabajando localmente aquí.
‫Así que ese es el que se debe usar.
‫A continuación, especificamos los datos y,
‫por lo tanto, este
‫será el cuerpo que se enviará junto con la
‫solicitud y, por lo tanto, el nombre
‫simplemente será el nombre que ingresa y, por supuesto, el correo electrónico.
‫Muy bien, eso es todo
‫pedido, y ahora probemos si realmente obtenemos nuestro éxito,
‫así que respuesta. datos. estado, si es
‫igual a éxito, y
‫una vez más este es el estado que encontramos en todas nuestras
‫respuestas, recuerde, y si esto fue exitoso, entonces queremos
‫mostrar una alerta de éxito
‫que diga: "Datos actualizados con éxito. "Dale un guardado, y
‫creo
‫que debería ser para esta función, de acuerdo.
‫Ahora todo lo que tenemos que hacer es usarlo aquí.
‫Primero, voy a importar una
‫función,
‫"updateData" desde ". / update settings "y
‫así podemos soltar el" js "allí.
‫A continuación, seleccionemos el formulario en la página.
‫Entonces, use un formulario de datos igual al documento. querySelector y luego
‫echemos un vistazo a eso.
‫Así que está aquí en la cuenta
‫y este formulario tiene un nombre de clase de datos de usuario del formulario.
‫Entonces, tomemos eso y pongamos eso aquí.
‫Bien, y ahora haremos algo muy similar aquí a este inicio
‫de sesión.
‫Entonces, si hay un formulario de datos de usuario, bueno, agreguemos
‫un detector de eventos a eso.
‫Entonces, agregueEventListener en el caso de enviar y obtener acceso
‫al evento aquí y evitaremos
‫el valor predeterminado, por
‫lo que evitaremos que se envíe el formulario.
‫Con este fragmento de código, obtengamos el correo electrónico y
‫el nombre, que será muy similar
‫al que tenemos aquí, así que tomemos eso.
‫Solo para asegurarnos de que realmente están allí, abramos esto
‫nuevamente y, de
‫hecho, obtendrán la identificación del nombre y la identificación del correo electrónico.
‫De acuerdo, el correo electrónico es correo electrónico y
‫nombre con la idea de nombre.
‫De acuerdo, y luego todo lo que tenemos que hacer
‫es realmente llamar a la función que importamos.
‫Entonces, actualiceData con el nombre y el correo electrónico y creo
‫que ese es el orden correcto, así que sí.
‫primero el nombre y luego el correo electrónico, está bien.
‫Y detrás de escena, nuestro
‫paquete aún debería estar agrupando todos estos archivos
‫en cada guardado, por lo que si guardamos esto,
‫verá que se actualizó ahora aquí,
‫por lo que ahora deberíamos estar listos para continuar con esto.
‫Entonces, volvamos a nuestra página de inicio aquí.
‫Está bien. E intentemos actualizar nuestros datos.
‫Y lo que voy a
‫hacer es básicamente volver a los datos originales, eliminar ese segundo
‫nombre y el apellido de aquí y ahora guardar
‫la configuración y aquí vamos, los datos se actualizaron correctamente.
‫Entonces, si ahora recargamos la página,
‫básicamente obtendremos esos datos del servidor y, por lo
‫tanto, si es el mismo, entonces significa
‫que los datos realmente persistieron.
‫Entonces, recargando y aquí vamos.
‫Que bien. Eso realmente funcionó.
‫Vayamos a otra
‫página aquí y regresemos para estar
‫realmente seguros, pero de hecho funcionó.
‫Y ahora, probemos uno de estos errores.
‫Muy bien, y eso debería generar una dirección de correo electrónico
‫incorrecta y, por lo tanto, se ve mucho mejor,
‫así que nos da este mensaje
‫de error, que por supuesto podríamos formatear un poco mejor
‫para que se vea mejor.
‫Pero creo que así está perfectamente
‫bien para esta pequeña aplicación.
‫Y podríamos hacer todo tipo
‫de cosas como marcar este campo aquí en rojo o algo así.
‫Pero para este tipo de cosas, probablemente
‫sería mejor utilizar un marco de interfaz de usuario real y completo
‫como React o View.
‫De todos modos, este formulario ahora funciona aquí, excepto la imagen, que
‫nuevamente estamos haciendo en la siguiente sección,
‫por lo que todo lo que
‫queda por hacer es actualizar la contraseña para que lo hagamos en el siguiente video.