‫Jonas: Usemos ahora la página de la
‫cuenta de usuario para permitir que los usuarios actualicen sus datos.
‫Entonces, lo que vamos a hacer es permitir
‫que el usuario actualice tanto el nombre como la dirección de correo electrónico por ahora.
‫Y agregaremos la foto de usuario aquí un
‫poco más adelante en la siguiente sección.
‫Bien, ahora hay dos formas en las que podemos hacer esto.
‫El primero es enviar una solicitud de publicación a nuestra API tal como
‫lo hicimos con el formulario de inicio de sesión, ¿lo recuerdas?
‫Y de hecho, lo haremos en la próxima conferencia.
‫Pero en este, quiero mostrarles otra
‫forma que es una forma normal más tradicional.
‫Entonces, de esta manera más
‫tradicional, especificamos el método de publicación directamente en el formulario,
‫junto con la URL a la que se debe enviar la solicitud de publicación.
‫Entonces, básicamente, al usar este método, no necesitamos JavaScript
‫para realizar la solicitud, sucede automáticamente
‫con el formulario HTML que luego publicará los datos en
‫el punto final de la URL en nuestro backend que especificamos.
‫Ahora, personalmente, realmente no me gusta esta solución, porque
‫fuerza la recarga de una página,
‫y también requiere que creemos
‫otra ruta y un controlador de ruta en nuestro backend.
‫Y finalmente, también hace que sea
‫un poco más difícil manejar los errores.
‫Sin embargo, sigo creyendo que es muy importante que
‫sepa cómo trabajar con formularios de esta manera,
‫porque podría tener más
‫sentido en la aplicación que está creando.
‫Por ejemplo, es posible que su aplicación ni siquiera necesite una API, por
‫lo que, en ese caso, cuando solo está
‫creando un sitio web renderizado, entonces, por supuesto, no tiene sentido
‫enviar formularios usando una llamada API, y en su lugar,
‫lo hará hazlo de la
‫forma en que lo vamos a hacer en este video.
‫Muy bien, y es por eso que lo hacemos de
‫esta manera en esta lección
‫y luego usamos la API en la próxima lección.
‫Entonces, lo que tenemos que hacer
‫en nuestro formulario para enviarlo
‫automáticamente, sin tener que
‫pasar por JavaScript como mencioné
‫antes, por lo que básicamente publicar automáticamente los
‫datos en nuestro punto final, es especificar ese punto final, y lo
‫hacemos aquí. en el formulario, donde especificamos el atributo de acción.
‫Entonces, la acción, digamos que vamos a crear
‫un punto final llamado enviar datos de usuario, como este.
‫De acuerdo, y luego también especificamos
‫el método, que es post, de acuerdo, así que esto siempre debe
‫suceder en el elemento del formulario que estamos enviando, de acuerdo.
‫Démosle un poco más de espacio aquí,
‫para que sea más fácil
‫de entender, y todo esto aquí es nuestro
‫formulario, y cuando hagamos clic en
‫este elemento del botón, automáticamente se enviará el formulario y
‫se enviarán los datos. usando una solicitud de publicación a esta URL, de acuerdo.
‫También hay diferentes formas en las que
‫los datos se envían realmente, pero la predeterminada se llama codificada en
‫URL, y esa es la que estamos usando aquí.
‫Básicamente, lo que va a
‫hacer es codificar todos los datos que estamos enviando
‫en la URL como una cadena de consulta.
‫Bien, pero más sobre eso cuando estemos trabajando
‫para obtener los datos en el servidor y trabajar con ellos.
‫Entonces, este es el primer paso para hacer que este método funcione,
‫y el segundo es especificar las propiedades del nombre en
‫los campos que realmente queremos enviar.
‫Entonces, es esta entrada y esta entrada,
‫y sus valores se enviarán con
‫una solicitud basada en sus atributos de nombre.
‫Bien, digamos aquí, nombre es igual a nombre, bien, ese es
‫el nombre de usuario, y este de aquí tendrá el
‫nombre igual a correo electrónico.
‫Bien, entonces este será el nombre de este campo y el
‫cuerpo que recibe nuestra aplicación.
‫Muy bien, y ahora mismo, cuando enviemos el formulario, el
‫cuerpo que recibiremos solo tendrá el
‫nombre y el correo electrónico, porque estos son
‫los únicos dos campos
‫que realmente tienen un atributo de nombre.
‫Muy bien, ahora implementemos esta ruta aquí, de acuerdo,
‫como dije con este método, necesitamos
‫implementar otra ruta más.
‫Bien, entonces enrutador, y recuerde que esta es una solicitud de publicación.
‫Bien, y este estará en viewsController, y digamos
‫updateUserData, está bien, guarde y ahora
‫creemos este controlador.
‫Así que aquí en este archivo.
‫Y lo primero que quiero
‫hacer aquí es realmente echar un vistazo al cuerpo. cuerpo, está bien, y básicamente en este
‫caso, solo para mostrarte que en realidad no funcionará así.
‫De acuerdo, y les diré por qué después
‫de que lo experimentemos, de acuerdo,
‫así que por ahora veamos si ya estamos conectados.
‫Entonces, si enviar ese formulario
‫realmente activará este controlador aquí, de acuerdo,
‫también agreguemos una cadena aquí solo para asegurarnos.
‫Muy bien, recarguemos esto
‫aquí para que obtengamos nuestro nuevo formulario, y solo para
‫asegurarnos, echemos un vistazo a eso.
‫Muy bien, entonces ves
‫aquí, la acción y el método que agregamos,
‫y por supuesto también estos nombres, está bien,
‫entonces agreguemos un segundo nombre aquí, no lo sé, digamos Sarah, luego aquí
‫el correo electrónico agreguemos el apellido,
‫ahora recibimos este error, por favor proporcione el correo electrónico y la contraseña,
‫por lo que este tipo de proviene del formulario de inicio de
‫sesión, correcto, así que eso es extraño.
‫Así que echemos un vistazo a nuestro formulario aquí,
‫y de hecho, este formulario aquí tiene la clase de formulario.
‫Y creo que ese es el que usamos también en
‫nuestro índice. js, correcto.
‫Así que aquí básicamente
‫obtuvimos ese formulario usando la clase de formulario, y cuando
‫existe, y se envía, intentamos iniciar sesión, aquí mismo.
‫Está bien, y eso por supuesto no es correcto, por lo que deberíamos seleccionar
‫nuestro formulario de inicio de sesión de alguna otra manera.
‫Así que arreglemos eso muy rápidamente, aquí tenemos inicio de sesión, así
‫que simplemente agreguemos otra
‫clase aquí, inicio de sesión de formulario, y eso es un poco extraño porque ya tenemos
‫el formulario de inicio de sesión aquí, pero en
‫realidad no está en un elemento de formulario.
‫Entonces no deberíamos usar eso, así que creemos
‫aquí un formulario con un modificador de inicio de sesión, está bien.
‫Así que pongámoslo aquí, salvemos, y ahora esto ya no debería
‫estar sucediendo, porque ahora ya no tenemos
‫ese controlador de eventos adjunto
‫a este formulario.
‫Así que volvamos a cargarlo rápidamente e
‫intentemos esto nuevamente, y ahora verá que en realidad está haciendo algo,
‫pero por supuesto que nunca dejará de girar
‫aquí, porque en realidad no enviamos ninguna respuesta, por lo
‫que el ciclo de respuesta a la solicitud nunca es terminó.
‫Pero de todos modos, solo quería ver el cuerpo de
‫la solicitud, ¿recuerdas eso?
‫Y así, como mencioné antes, ahora es MT.
‫Bien, como estaba diciendo, esto realmente no funcionará
‫así, porque necesitamos agregar otro middleware
‫para analizar los datos provenientes de un formulario.
‫Así que hagámoslo en nuestra aplicación. js.
‫Pero primero, cierre algunos de estos archivos aquí.
‫Muy bien, este también, y ahora, vamos a la aplicación. js, agreguemos esa cláusula a nuestro analizador
‫corporal, así que aquí
‫estamos, porque en realidad es muy similar.
‫Así que app. use, y sigue siendo un middleware integrado
‫Express, así que express. urlencoded, está bien, y se llama así porque
‫recuerde, la forma en que el
‫formulario envía datos al servidor en realidad también se llama codificación de
‫URL, por lo que aquí, necesitamos ese middleware para analizar básicamente los datos
‫que provienen de un formulario codificado de URL.
‫Luego pasamos algunas configuraciones, y podemos decir extendido verdadero, y
‫eso simplemente nos permitirá pasar algunos datos
‫más complejos, que en este caso no son realmente necesarios, pero usémoslo
‫aquí, y también
‫podemos establecer el límite.
‫propiedad como hicimos en el analizador corporal, así que
‫aquí arriba, y digamos de nuevo 10 kilobytes.
‫Muy bien, y si intentamos esto de nuevo aquí,
‫deberíamos obtener estos datos, y estos datos.
‫Agreguemos nuevamente estos datos diferentes aquí, para estar seguros de
‫que en realidad no están obteniendo el usuario actual, sino
‫los datos que provienen del formulario, está bien, y
‫nuevamente sigue girando para
‫siempre aquí, o
‫hasta que se agota el tiempo. pero lo
‫que nos interesa es obtener estos nuevos datos aquí ahora en nuestro cuerpo.
‫Genial, eso funciona, y ahora tenemos nuestro formulario
‫HTML realmente conectado a este controlador de ruta aquí.
‫Y ahora podemos seguir adelante y actualizar al usuario en
‫función de estos nuevos datos, de acuerdo.
‫Entonces, eliminémonos de esto y luego
‫actualice al usuario, ya que ya sabemos cómo hacerlo.
‫Ahora, en primer lugar, tendremos que importar el
‫modelo de usuario, así que hagámoslo.
‫Usuario, aquí con una pequeña
‫U, está bien, y ahora digamos que
‫el usuario es igual a esperar Usuario. findByIdAndUpdate.
‫Bien, entonces, por supuesto,
‫como siempre, marque este como asíncrono y detecte todos los errores.
‫Bien, entonces, ¿cuál es la identificación que estamos buscando?
‫Y espero que a estas alturas sepas dónde
‫está, será a pedido. usuario. identificación.
‫Ah, y una
‫cosa importante que tenemos que hacer, que
‫todavía no hice, es proteger esta ruta
‫aquí también, está bien, porque solo
‫entonces tenemos a este usuario en la solicitud,
‫correcto, y por supuesto Además, solo queremos poder acceder a
‫esta ruta si estamos conectados, de
‫lo contrario, cualquiera podría simplemente continuar y actualizar algunos datos.
‫Entonces, aquí en la
‫ruta, por supuesto, agreguemos authController. proteger.
‫Muy bien,
‫ese es el ID, entonces necesitamos los nuevos datos,
‫y digamos que queremos un nombre igual a request. cuerpo. nombre y el correo electrónico configurado
‫para solicitar. cuerpo. Email.
‫Y recuerde que estos son los nombres
‫de los campos, porque les dimos el atributo de nombre en el formulario HTML.
‫Recuerde, ahora antes, cuando actualizamos algunos datos, solíamos pasar la
‫solicitud completa aquí al método de actualización, correcto, pero en
‫este caso, realmente solo queremos actualizar
‫el nombre y el correo electrónico, y así,
‫estamos seguro de que cualquier otra cosa básicamente está siendo
‫eliminada del cuerpo, porque algún hacker podría,
‫por supuesto, seguir adelante y agregar algunos campos adicionales
‫al HTML y luego, por ejemplo,
‫enviar datos como contraseñas y cosas así,
‫y por supuesto que lo hacemos. No
‫quiero almacenar esos datos maliciosos en nuestra
‫base de datos, ¿verdad?
‫Además, las contraseñas se manejan una vez más
‫por separado, porque recuerde que nunca nunca podremos actualizar
‫las contraseñas usando findByIdAndUpdate.
‫Nuevamente, porque eso no ejecutará el middleware seguro
‫que se encargará de cifrar nuestras contraseñas.
‫Bien, y por eso tenemos una ruta separada para
‫eso en nuestra API, y también tenemos
‫una ruta separada para eso en nuestra interfaz de usuario.
‫Y, por lo general, eso es lo que
‫siempre ve en las aplicaciones web cuando desea actualizar
‫sus contraseñas, generalmente tiene un formulario separado
‫solo para eso, está bien.
‫De todos modos, ahora continuemos aquí con nuestras
‫opciones, donde decimos que queremos
‫obtener lo nuevo, entonces básicamente el documento actualizado como
‫resultado, y también que queremos ejecutar los validadores.
‫Así que esto es como lo hicimos antes en nuestra API.
‫Genial, así que llamémoslo updatedUser.
‫Bien, entonces, ¿qué queremos hacer ahora?
‫Bueno, después de enviar los datos en nuestro sitio web,
‫básicamente lo que queremos es simplemente volver a
‫esta página aquí, pero por supuesto, con
‫los datos actualizados aquí, está bien.
‫Así que eso es fácil, todo lo que tendremos que hacer
‫es básicamente renderizar la página de la cuenta nuevamente.
‫Y eso es similar a este, vamos a
‫copiarlo, está bien, pero ahora hay
‫una diferencia importante, porque ahora, en realidad también necesitamos pasar
‫el usuario, entonces el
‫usuario actualizado, porque de lo contrario,
‫el usuario que la plantilla que va a usar, es
‫el que viene del middleware de protección,
‫recuerde, por lo que no va
‫a ser el usuario actualizado.
‫Correcto, por lo que debemos pasar user is updatedUser.
‫Muy bien, y eso debería ser suficiente.
‫Entonces, si ahora recargamos esto, o en realidad si ahora
‫lo guardamos aquí, entonces verá que en realidad volvimos a la misma página exacta y los
‫datos siguen siendo los mismos.
‫Así que demostrémoslo, vayamos a otra
‫página y luego regresemos a la página de configuración.
‫Y así, esto demuestra que los datos ahora
‫se han actualizado de manera efectiva.
‫Entonces, si ahora cerramos la sesión,
‫intentemos iniciar sesión con este nuevo correo electrónico.
‫Así que quería cerrar la sesión, está bien, y ahora volver a iniciar sesión.
‫Y ahora, vamos a usar este nuevo correo electrónico y, por supuesto, todavía la
‫contraseña anterior, test1234, y de hecho, esta
‫es ahora la nueva dirección de
‫correo electrónico que debemos usar para iniciar sesión.
‫Ahora veamos qué sucede cuando pasamos algunos
‫datos incorrectos aquí.
‫Por ejemplo, Google Chrome nos permite enviar una dirección de correo
‫electrónico como esta, pero por supuesto,
‫nuestro modelo Mongoose no permite un correo
‫electrónico con este formato.
‫Entonces, ahora deberíamos obtener un error, y de
‫hecho, obtenemos este error,
‫proporcione un correo electrónico válido, pero esa es una
‫experiencia de usuario terrible, ¿verdad? Así que solo estábamos
‫enviando nuestros datos, y luego, de repente, pasamos
‫a una página completamente nueva.
‫Y, de hecho, vemos que también
‫llegamos a esta nueva URL, a la que enviamos los datos.
‫Y sí, eso es un poco terrible, y
‫como decía al principio, esta
‫forma de hacer las cosas es en realidad
‫un poco peor para manejar errores, que es
‫una de las razones por las que personalmente
‫prefiero usar la API que usamos. ya creado para actualizar
‫los datos del usuario, y en general para hacer este tipo de cosas.
‫Muy bien, hagamos
‫exactamente eso en el siguiente video.