Bienvenido de nuevo a nuestro último video en este blog.
Entonces tenemos que cambiar
Vamos a hacer.
El primero es implementar el desinfectante Express que mencioné, que nos ayudará con ese problema, donde
si mostrar HDMI Olafur en realidad convirtiéndolo en un usuario podría ingresar potencialmente algún javascript dañino en
lugar de un hack de scripts.
No queremos ejecutar ese código, así que utilizamos desinfectante para ayudarnos con eso, básicamente, toma esa información y elimina
todos los scripts y solo nos da el interlocutor envejecido.
Y luego también queremos darle un estilo a la página de índice.
Se ve un poco difícil y lo último que hará es hacer una pequeña actualización en una mesa de descanso
en Rhodes solo para que sea un poco más útil para usted.
Comencemos con el desinfectante
Así que voy a instalar un paquete llamado Express dash sanitiser dash dash.
Salvar.
DE ACUERDO.
vamos a exigir que el desinfectante exprés equivalga a expresar el desinfectante de Desch así como así.
Ahora que eso se hace en nuestra aplicación, sí,
Y luego tenemos que decirle a nuestra aplicación que lo use. Use el desinfectante Express y el único requisito es que
esto vaya después de todo el analizador.
Definir aquí.
DE ACUERDO.
Y eso es.
Ahora, para usarlo, desea hacerlo para comenzar en lugar de crearse cuando crea un blog nuevo.
Entonces es realmente crear una actualización.
Son los dos lugares donde estamos tomando datos y guardando en la base de datos.
En ambas ocasiones, debe asegurarse de desinfectar la entrada y, en lugar de crear lo que queremos desinfectar,
solicite un registro del cuerpo que es una especie de lío. Recuerde que el cuerpo es lo que
proviene de un formulario. cuerpo que en nuestro caso proviene de un formulario, entonces el blog
se debe a esta línea aquí.
Blog de la imagen del blog del título y finalmente encontrar el cuerpo del blog.
Y este es el que nos importa.
Entonces tenemos que hacer blog dot body.
Por lo tanto, es una especie de nombre largo y largo aquí, pero solicite cuerpo cuerpo de blog de temperatura.
Y vamos a cambiarlo para que sea igual pedir que se desinfecte y vamos
a desinfectar todo esto.
Así que estamos tomando lo que es actualmente igual a desinfectarlo y luego cambiar toda la solicitud de un cuerpo
de registro de volcado de cuerpo para igualar eso.
Así que déjame aclarar eso para que hagamos un blog de agente.
Solicita ese cuerpo antes y después.
Así.
Y déjame agregar algo para que sea un poco más fácil de ver.
Estupendo.
DE ACUERDO.
Así que vamos a darle una oportunidad ahora.
Inicie el
servidor nueva la página.
Tendremos que crear una nueva publicación.
buena que deseemos usar o para ingresar, y luego algo malo que solo será una alerta nuevamente.
Hagamos una imagen aleatoria de Demo que se acaba de llamar y agreguemos alguna HMO
Aquí vamos.
Entonces, si esto funciona, deberíamos ver que antes los dos y los posteriores solo tienen esto.
Echemos un vistazo a lo que ha sucedido.
Perfecto.
Puedes ver la primera vez que el cuerpo es igual a esto.
O teníamos nuestra etiqueta de script allí la segunda vez.
El cuerpo solo tiene el H-1.
Entonces eso es todo lo que tenemos que hacer para desinfectar algo.
Y si ahora mostramos si vamos a nuestra nueva publicación que creen que es esta.
Aquí echamos un vistazo.
Estamos mostrando el problema él mismo, pero no hay ninguna etiqueta de script en absoluto.
Entonces eso funciona genial
Lo último que quieren hacer es ejecutar el mismo código pero hacerlo en lugar de la actualización.
Estamos justo allí antes de actualizar la solicitud en el blog.
Bueno, hice lo mismo.
Un número menor
Este sería un buen caso de uso para lo que se conoce como middleware, del
cual no hemos hablado todavía, pero es algo que estamos repitiendo dos veces en dos rutas diferentes.
Lo que podemos hacer es escribir un middleware que ejecutará este código antes de estas dos rutas, pero cubriremos
el middleware.
Más adelante en este curso hacia el final de EXPRESS Así que lo dejamos como está por ahora.
Y eso funciona bien.
Eso lo desinfectará ambas veces cuando actualice a alguien para crear el siguiente.
Centrémonos o indexemos que E. J. Sí.
Entonces necesita un poco de trabajo.
Se ve así en este momento.
Comencemos borrando algunas cosas.
Y esa fue una de las publicaciones que había creado antes de agregar al desinfectante.
I Para eliminar algunos de estos que no tienen imágenes
solo para que terminemos con algo más fácil de diseñar donde realmente podamos ver las imágenes.
mucho del código que ya hemos utilizado.
OK, así que tenemos esto, lo que queremos hacer es centrarlos para comenzar y voy a usar
Entonces, en lugar de
nuestro índice, tenemos un encabezado bueno pero luego vamos a poner todo dentro de un div y
este div tendrá una clase igual al contenedor de texto principal de UI, que es lo que nos da ese contenedor centrado.
Y luego adentro tendrá nuestro div.
Y esto básicamente se recicla de la última
pequeña línea en el último bit que escribimos para los formularios y para la página del programa.
Entonces la clase es igual a tu gran encabezado y luego solo pondremos un conjunto de páginas de índice.
Déjenlo descansar para un blog.
Así.
Y luego, cuando lo hemos hecho bien, he agregado otro div.
Este tendrá nuestro segmento en él que le da a
esta UI el segmento superior adjunto que da solo esa pequeña línea en el recuadro y luego dentro de allí va a pasar.
un div con los ítems divididos de la IU de clase
y luego, para cada ítem que entramos dentro de ti, dividí los ítems y obtenemos un divisor automático entre
ellos.
Y establecemos una línea más antes de que lleguemos al bucle que es
Así que vamos a copiar este código en esto, están divididos los elementos.
Lo que necesitamos hacer es hacer algunos cambios.
El primero solo está en deuda, pero no vamos a imprimir esto por dentro.
Vamos a crear una clase div igual a elemento y
luego dentro del elemento tenemos nuestra imagen primero y la imagen irá en lugar de una div con clase igual
a imagen y lo pondremos allí y eso ayudará a restringir la tamaño de la imagen para que no
consigamos que esas imágenes gigantescas ocupen toda la pantalla.
OK, entonces la imagen puso la imagen dentro y luego necesita otra clase div igual al contenido.
Y aquí es donde pondré algunas cosas.
El primero es el título y en lugar
de hacer un H-2 con un título en realidad y hacer una etiqueta de anclaje o una etiqueta de anclaje tendrá
una clase igual a Hetter pero también tendrá una referencia igual a la página de la demostración y Riskin una copia que estás aquí como lo que ya tienes.
Así que el enlace leer más así que la razón por la que estamos haciendo esto para que podamos terminar con nuestro
encabezado para cada blog, puedo hacer clic en él para ir a la página del programa o hacer clic en leer más.
Asegurémonos de tener un pequeño error de sintaxis.
Nos falta nuestra cita de cierre aquí para Atra fracasos.
DE ACUERDO.
Atra es la página de presentación y luego dentro de los corchetes tenemos un título de blog.
Es un desastre.
Luego, agregaremos un div con una
clase igual a Metta, que es solo un lugar para que pongamos información sobre este artículo en particular, que en nuestro caso será un lapso con la fecha que ya tenemos.
Pero también voy a formatear esta fecha, así que blog punto creado para fecha cadena que ya vimos en la página de
la demostración y luego cerramos eso en vivo allí entonces tendremos una clase div igual a la descripción.
Y ahí es donde pondremos este contenido.
El cuerpo real del blog.
Y en lugar de hacer el mismo signo, lo cambiaré de nuevo a
un guión o no lo cambiaré de nuevo, pero lo cambiaremos a un dasht para que podamos obtener la edad real de nuestro contenido que ahora está desinfectado.
Por último, un div clásico a extra y en lugar de eso
pondré el botón para leer más y haré una etiqueta de anclaje y voy a copiar una etiqueta que ya tenemos y la cambiaré un poco.
Por lo tanto, ya no necesitamos el clásico al encabezado, pero sí queremos un botón grande.
Así que flote básico.
Elige tu color de Violet nuevamente.
Y podemos hacer esto un poco.
Definitivamente es mucho mirar.
Así que pongamos esto, pongamos esto un poco.
Entonces, después de la apertura aquí, establezca
la etiqueta de anclaje, habremos leído más y agregaremos un icono de chevron que será una pequeña flecha después de leer más.
OK maratón allí.
Muchas de las cosas que agregamos
Solo asegúrese de que
todo se vea bien y, definitivamente, eche un vistazo al código de la solución si no quiere tomar esto desde cero.
Veamos cómo lo está buscando, no tiene ningún error de sintaxis.
Eso o vamos justo lo que estamos buscando.
Así que estamos truncando los primeros 100 caracteres en ese o tantos caracteres como hay en esta publicación.
En este caso, un clic muy corto en leer más el enlace funciona y nos lleva a la página del programa.
Podemos editar volver.
Tenemos sus imágenes aquí.
Después de las
líneas divididas tenemos nuestra Hetter, tenemos este segmento dando vueltas a todo y hemos terminado prácticamente.
Entonces, nuevamente, no creo que definitivamente no sientamos que debe conocer todas estas clases.
Yo solo lo hice.
Ya sabes que te los dio.
Estilo de fuego rápido.
Porque un punto no es que aprendas todo esto.
Pero si desea obtener más información e ir a dashi semántica por qué puntocom.
Hay muchos tutoriales y recursos geniales.
Todavía no es tan utilizado como bootstrap, pero definitivamente está creciendo.
Me di cuenta de que muchos de mis alumnos lo encontrarían por su cuenta.
Mientras que en el pasado se los presentaría después de
Bluechip en la mayoría de las dos clases más recientes que enseñé, los estudiantes realmente se enamoraron
rápidamente sin que yo nunca se los mostrara y terminaron usándolo por encima de bootstrap.
La mayoría de los estudiantes, pero totalmente de usted.
Los disfruté a los dos y bootstrap definitivamente es más popular por ahora.
OK, lo último que mencioné es que refactorizamos nuestra mesa solo un poquito.
Y todo lo que quiero hacer es agregar una columna final
para el método de mangosta que corresponde a cada uno de estos.
Así que busque por id find by 80 una actualización find por id add remove y así sucesivamente.
Seré una revisión rápida de cómo funcionan las tablas.
Así que aquí hay un gráfico que envejece
la cantidad que necesitamos agregar en otro th y lo llamaremos método mongoose y vamos a abrir la vista previa de una vista previa de cocina y moverlo a la parte inferior aquí.
Hay nuestra mesa o nueva th.
Y luego, para el índice, agregaremos un televisor en el método de la mangosta para que el perro se busque perro.
Ahí tienes.
A continuación tenemos una nueva que en realidad no tiene un método de monje en absoluto.
Entonces, en lugar de dejarlo en blanco, simplemente pondré un archivo que lo haga es renderizar un formulario.
A continuación tenemos crear y crear va a hacer un perro crear punto.
Y una característica realmente genial si se hace esta vista previa de la vida es como una edición MIDI,
se dio cuenta de que me muestra cuando estoy seleccionando aquí, lo cual es genial.
Así que ni siquiera tiene que abrir el inspector y simplemente ver en vivo.
Y si cambian cosas, también actualizan en vivo sin tener que guardar o actualizar la página.
DE ACUERDO.
Entonces, tenemos un programa que hace un perro que encuentra por ID, entonces lo tenemos.
Lo cual también hace que un perro sea multado por ID.
Tenemos que encontrar el perro que estamos
editando y eso es para la forma y luego actualizar hace un perro que procesa por id y actualiza uno largo.
Y también es un perro algo largo que encuentra por identificación y elimina cada oportunidad.
Vamos a ver.
Aquí está nuestra mesa.
Parece que borré accidentalmente uno de
los CD aquí, que se supone que muestra qué actualización hace, por lo que la actualización se supone que debe actualizar el perro perro tickler y luego redirigir a algún lugar.
Todo bien.
Ahora deberíamos volver a la normalidad.
Aquí está nuestra mesa.
Entonces, el único que no tiene ningún método de mangosta en absoluto.
Va a ser nuevo porque lo nuevo no es encontrar nada, la base de datos no agrega nada.
Simplemente nos da una forma.
Estupendo.
Así que espero que esto sea útil para ti en el futuro, puedes consultar esta tabla.
Me referiré nuevamente a esto, ciertamente cubre una
gran cantidad de información importante que usaremos mucho.
Todo bien.
Así que terminamos esto ahora tenemos que pasar a otras cosas más divertidas, algunas aplicaciones más complicadas.
Noté que había un poco de América cubierto mucho.
Siempre es difícil de hacer.
Interesante porque solo mucha información.
Pero es importante tener esa
credibilidad para poder crear la actualización de lectura y eliminar una entidad que toma muchas vueltas.
Todo bien.
Te veré en el próximo año.