Ya sea.
Dar una buena acogida.
Entonces en esta lección nos estamos enfocando en mejorar la usabilidad de nuestro campamento.
En este momento es un desastre en cuanto a dar retroalimentación o mensajes de error o mensajes de éxito a
nuestros usuarios.
Y por desastre solo quiero decir que no existe en absoluto.
Tenemos un registro del consejo que obviamente nuestros usuarios no pueden ver.
Lo vemos como desarrolladores en nuestro cónsul aquí donde los servidores se están ejecutando, pero nadie más lo ve.
Nos centraremos en agregar algunos mensajes y te mostraré cómo se ve en
un momento.
Antes de hacerlo, tenemos tres objetivos principales: hablaré de ellos ahora.
Entonces quiero mostrarlo.
Primero, le mostraremos qué esperar, cómo se verá cómo se comporta, luego, realmente instalaremos y configuraremos
un paquete llamado connect flash.
Entonces, lo que estamos haciendo es agregar Flash o flashear un flash de sus diferentes pronombres y la gente lo
llama.
En otros marcos, el hash flash.
La gente lo llama mensajes instantáneos, pero básicamente la idea es que le mostraremos un mensaje a un usuario
como haber iniciado sesión exitosamente o haber cerrado sesión exitosamente.
O tal vez algo así como que no tienes permiso para hacer eso.
O bien, inicie sesión antes de agregar un camping, algo así.
Queremos mostrárselo a un usuario solo una vez y no queremos que sea un accesorio permanente en la página.
mostrarles una vez y luego desaparecer en la página siguiente o si el usuario
se actualiza y luego lo último es agregar nuestros mensajes flash al encabezado y agregar algunas clases de arranque que darán estilo.
Queremos solo
Entonces, hay algunas formas de hacer cosas con bootstrap.
Esta es una característica tan común para tener mensajes que se muestran a su usuario en todo tipo de
sitios que bootstrap tiene un estilo incorporado para que se aprovechen.
Así que comenzaré mostrándote cómo se verá.
Así que tengo el campamento corriendo.
Permítanme que les muestre si me desconecto ahora mismo, así que estoy registrado como congelador si cierro la sesión, recibo un mensaje
que dice "loungy up up" y podemos cambiar el texto de ese mensaje.
Obviamente, si intento agregar un nuevo campamento en este momento cuando no estoy conectado, ahora debería recibir un mensaje que dice
que debe haber iniciado sesión para hacerlo.
Y note que se lee aquí.
Entonces esa es una clase de arranque.
Esta alerta que recibimos si estuviera actualizado la página desaparece.
Entonces, si intento registrarme, debo decir que me inscribo como resti, que ya existe.
Entonces no debería poder hacer eso en el pasado.
La página simplemente se actualizaría.
Pero con lo que terminaremos es con un mensaje que dice que un usuario con un nombre de usuario dado ya está registrado.
DE ACUERDO.
Así que déjame registrarme como alguien nuevo.
Tratemos de hacer el error.
Ahora me he mudado aparentemente de verduras a electrodomésticos y recibí un mensaje de éxito firmado con
éxito.
Encantado de conocerte Bunder.
Y si actualizo la página, desaparece.
Entonces hay otros lugares donde tenemos esos mensajes, pero te mostraré.
Por ejemplo, si intento editar este campamento que no me pertenece.
Tater tots lo posee.
Estoy conectado en esta licuadora.
No tengo un enlace para ir a Editar aquí porque está oculto.
Pero, técnicamente, aún podría ir a analizarlo, donde ahora recibo un mensaje que dice que no tienes permiso
para hacerlo.
Me redirige de vuelta aquí.
Lo mismo con comentarios si hubiera un comentario aquí y fue creado por otra persona.
Si fui manualmente a ese enlace y agregué una barra, también vería un mensaje, pero eso es
mucho trabajo porque tenemos que encontrar la identificación.
Y de todos modos, no quiero entrar en eso ahora, pero será el mismo código que agreguemos el que
dirá que no tiene permiso para hacerlo.
Y finalmente, si cierro la sesión y vuelvo y trato de agregar nuevos comentarios, recibo el mismo mensaje.
Debes iniciar sesión para hacer eso.
Como si hubiera intentado crear un camping cuando no estaba firmado.
DE ACUERDO.
Ese es el objetivo final y en realidad es bastante fácil para nosotros hacer que esto funcione.
Usando este paquete podríamos hacer esto sin un paquete por supuesto de lo que podríamos hacer algo así.
Cuando abrimos la versión correcta.
Así que hice una nueva versión para este v 11 en la que trabajaré.
Entonces, veamos en el v. 11 y déjame limpiar todo y abrir sí.
DE ACUERDO.
Así que trabajaremos aquí.
De nuevo, esto es V 11 por si acaso lo sigues.
Lo primero que haré es mostrarle el paquete que vamos a usar.
Entonces se llama flash Kinect.
Hubo otros paquetes que hacen esto.
Si echa un vistazo al repositorio de inicio, la documentación está un poco desactualizada.
Estamos usando Express para lo cual salió a principios de 2015.
Los documentos hablan de Express para señalar X y de tres puntos X para el siguiente paso.
pero si vuelves a Connect flash verás que algunos de los primeros enlaces externos se expresan 4.
Estas instrucciones no son exactamente las mismas, 00 configurado con K'NEX flash que ya he echado
un vistazo o siempre puedes usar algo como esto se ha expresado para después y puedes ver que obtenemos el mismo
enlace y hay tutoriales aquí abajo hay una publicación de desbordamiento de pila si quieres echar un
vistazo.
Así que hice esto antes.
Algo que tienes que hacer mucho cuando conoces el código se actualiza cuando surgen cosas nuevas.
Especialmente con algo como Express 4. 0 donde las cosas cambian bastante significativamente.
Muchas de las cosas que solían ser parte de Express se sacaron de Express en paquetes separados.
Algunos de los nombres y la sintaxis han cambiado.
Así que siempre digo que es algo que haces mucho cuando tratas de hacer
algo que no has hecho aún en Express add en Express para tus búsquedas porque a menudo encontrarás excelentes tutoriales para
él.
Hace dos años que todavía son 90 por ciento iguales, pero ese 10 por ciento es realmente importante para que
entiendas cómo es diferente de lo que sabes hace dos años versus el actual Express.
Todo bien.
Entonces, lo primero que queremos hacer es instalar este paquete.
Entonces se llama connect flash.
Por lo tanto, queremos que NPM instale dash dash save connect dash flash.
DE ACUERDO.
Ahora que eso está listo aquí, simplemente agregaremos Flash.
Lo llamaremos flash en lugar de conectar el flash igual que requiere connect dash flash.
Asegúrate de tener una coma allí, entonces lo que tenemos que hacer es decirle a la aplicación que uses Flash.
Así que tomamos los contenidos de K'NEX flash que el paquete y
guardamos en la variable flash y necesitaremos ejecutar ese uso de aplicación variable flash así.
Entonces, técnicamente eso es todo lo que tenemos que hacer.
Ahora tenemos instalado Connect Flash y si retrocedemos y echamos un vistazo a los documentos, hay otra configuración
que hacen aquí con el analizador de cookies en sesión, pero en realidad ya tenemos esa configuración
en la que ya estamos haciendo nuestra.
Dónde necesitas una sesión urgente y estamos armando un secreto.
Por lo tanto, no tenemos que preocuparnos porque ya hemos configurado nuestra aplicación para usar
la sesión Express.
De acuerdo, entonces lo que haremos será mostrar en cada página el contenido del flash.
Vamos a tomar el mensaje que está ahí.
Podría ser bueno o podría ser malo, podría estar vacío y lo mostraremos en la parte superior de la
página, y eso sucederá en nuestro archivo de encabezado.
MI. J. Sí,
tendremos un código que solo muestra el error o el mensaje de éxito y luego todo lo que haremos será cuando encontremos un
error o un lugar en el que queremos un mensaje para que una instancia de eso pueda ser en lugar de hacer campings y
en lugar de nuestros campamentos, tenemos esto conectado en Middleware donde no puedes agregar un nuevo campamento a menos que hayas iniciado sesión.
debe iniciar sesión para hacerlo o Iniciar sesión.
Si, si vamos a ese middleware y veremos que está conectado, es posible que deseemos tener un mensaje que indique que
Entonces ese código iría aquí.
Entonces, justo antes de redirigir para cortar el registro, vamos a agregar algo al flash.
Así que parece que esto realmente solicita flash de punto.
Y luego podemos darle una clave.
Así que en un momento te mostraré.
Utilizaremos el éxito y el
error, y lo usaremos para determinar si el mensaje de alerta debe ser verde o rojo.
Entonces esa parte no importa por ahora, pero esta parte sí importa a dónde vamos a pasar un mensaje.
Entonces, podríamos hacer algo como "Por favor, regístrese primero".
De nuevo, esto está dentro de Middleware.
Por lo tanto, verifica si la solicitud se autentica si los usuarios iniciaron sesión.
Luego continúa con lo que sea que estuvieras haciendo antes.
Pero si ese no es el caso antes de redirigir para cortar el inicio de sesión.
Sí, recuerda si redirigimos para cortar el inicio de sesión.
Sin esta línea, simplemente continúa también.
Tendré que abrir la ruta, pero irá directamente al código y al inicio de sesión, que está justo aquí.
Por lo tanto, hace que inicie sesión antes de hacerlo, aunque vamos a ejecutar este código flash.
Y básicamente, lo que hará es tomar. Por favor, primero inicie sesión y lo agregará
al flash y no se mostrará hasta la próxima escena que veamos.
Entonces, en este caso, esto no representa nada, simplemente nos redirige para
cortar el inicio de sesión y la forma en que funciona el Flash es realmente buena, ya que no se va a flashear de inmediato.
Solo funciona o aparece en la página siguiente.
Entonces lo haces antes de redireccionar.
Entonces, en este caso, inicie sesión primero y luego redirigiremos para
cortar el inicio de sesión y luego en el registro y el formulario esperamos ver un mensaje.
Ahora mismo no estamos mostrando eso.
Por lo tanto, solo para reiterar que
solo agregar esta línea no mostrará nada para todos nosotros, lo que hace es que nos da la capacidad que nos brinda de acceder a esto en la próxima solicitud.
Así que no estamos flasheando de inmediato, no estamos viendo nada, no estamos mostrando nada al usuario.
Todo lo que hace es decir en el flash y en lugar de éxito, creo que tiene más sentido llamar a este
error en el complemento de flash. Por favor, inicie sesión primero para la siguiente solicitud y luego lo redireccionamos para cortar el inicio de sesión.
Entonces, tenemos que manejar eso en el inicio de sesión que está justo aquí, iniciar sesión.
Entonces podría hacer algo como pasar el mensaje.
Y, por supuesto, todo lo que puedo mostrarles
es que comience de modo que si solo tenemos un error en el mensaje, lo arruinaron
así como si pudiéramos mostrarlo en nuestra plantilla, así que haga clic en el registro dentro del registro de fusibles.
Sí, solo en la parte superior, solo podría tener un H-1 que mostrara un mensaje así.
Nada muy nuevo.
Así que solo te mostraré cómo se ve ahora.
Inicie el redireccionamiento del servidor para reducir el inicio de sesión y obtengo este mensaje cada vez que se produce un error.
Lo echaste a perder.
Como puede ver cuál
es, afortunadamente, lo que esperaba en este punto porque lo codifiqué en cada vez que vamos a cortar el registro, vemos que lo arruinó.
OK, entonces usando flash lo que podemos hacer ahora
es decir que el mensaje es igual a la solicitud de flash y podemos simplemente hacer el error en el flash.
Entonces es un poco confuso
debería haber un error en el flash.
Pero básicamente, la idea es que si actualizo la página, reinicie el servidor y actualice, no
Entonces, realmente no vemos nada.
Pero si hacemos que este código
ejecute wups este código aquí y la forma en que lo hacemos es tratar de acceder a algo donde tenemos que iniciar sesión donde se
llama este middleware, entonces lo que sucederá es que estamos agregando esto al flash debajo el error
clave con el valor por favor inicie sesión primero, luego vamos a cortar el inicio de sesión.
Luego, dentro
del inicio de sesión de barra, estamos enviando la clave de error de solicitud de mensaje, que es un montón de cosas que tienen que ser conectadas y es un poco confuso nuevamente.
Pero déjame mostrarte ahora.
Entonces reinicio.
En realidad no tuve que hacer eso esta vez, pero no vemos nada.
Ahora déjame ir a los campamentos e intentar agregar un nuevo campamento aunque no haya iniciado sesión.
Y ahora recibo el mensaje que dice: Por favor, primero inicie sesión que
no estaba allí antes y si actualizo la página, desaparece.
Entonces esa es una versión realmente simple de lo que podemos lograr usando Flash.
esto con todos los mensajes diferentes y el estilo.
Entonces, antes de seguir adelante en el siguiente video, implementaremos
Vamos a resumir cómo funciona esto de nuevo.
Entonces, cuando queremos mostrar un mensaje, ya sea
un mensaje de éxito o un mensaje de error, sea lo que sea, vamos a utilizar esta línea aquí.
Solicitar flash
Y luego pasamos una clave y un valor y lo hacemos antes de redireccionar.
Es realmente importante si coloco esta línea después de redirigir.
No funcionará
Por lo tanto, antes de redirigirlo y
luego tener que manejarlo en la plantilla usted mismo para manejarlo y la ruta, todo lo que le da es la capacidad de agregar algunos datos antes de redirigir.
Eso lo hace a la siguiente ruta.
Y esa información no persistirá en cada solicitud a esa ruta.
Entonces es una cosa de una vez.
Por eso se llama Flash.
DE ACUERDO.
hacer esto.
Entonces en el próximo video voy a mostrarte cómo implementar esto de verdad, donde no tenemos que
Pasando el mensaje a cada plantilla
donde podemos diseñar el estilo, muy bien con el programa de arranque donde podemos tener mensajes en rojo y verde,
podemos tener diferentes colores si queremos poner el rojo y el verde son los estándar.
DE ACUERDO.
Así que eso está en el próximo video.
Ver el