1
00:00:00,350 --> 00:00:03,100
Bienvenido de nuevo a nuestro último video en este blog.

2
00:00:03,310 --> 00:00:04,400
Entonces tenemos que cambiar

3
00:00:04,400 --> 00:00:05,050
Vamos a hacer.

4
00:00:05,100 --> 00:00:11,070
El primero es implementar el desinfectante Express que mencioné, que nos ayudará con ese problema, donde

5
00:00:11,400 --> 00:00:17,760
si mostrar HDMI Olafur en realidad convirtiéndolo en un usuario podría ingresar potencialmente algún javascript dañino en

6
00:00:18,000 --> 00:00:20,030
lugar de un hack de scripts.

7
00:00:20,130 --> 00:00:27,240
No queremos ejecutar ese código, así que utilizamos desinfectante para ayudarnos con eso, básicamente, toma esa información y elimina

8
00:00:27,240 --> 00:00:30,980
todos los scripts y solo nos da el interlocutor envejecido.

9
00:00:31,290 --> 00:00:33,660
Y luego también queremos darle un estilo a la página de índice.

10
00:00:33,690 --> 00:00:38,820
Se ve un poco difícil y lo último que hará es hacer una pequeña actualización en una mesa de descanso

11
00:00:38,820 --> 00:00:41,730
en Rhodes solo para que sea un poco más útil para usted.

12
00:00:41,760 --> 00:00:44,000
Comencemos con el desinfectante

13
00:00:44,400 --> 00:00:51,350
Así que voy a instalar un paquete llamado Express dash sanitiser dash dash.

14
00:00:51,390 --> 00:00:53,430
Salvar.

15
00:00:54,930 --> 00:00:55,660
DE ACUERDO.

16
00:00:55,710 --> 00:01:06,060
vamos a exigir que el desinfectante exprés equivalga a expresar el desinfectante de Desch así como así.

17
00:01:07,050 --> 00:01:12,080
Ahora que eso se hace en nuestra aplicación, sí,

18
00:01:12,330 --> 00:01:20,820
Y luego tenemos que decirle a nuestra aplicación que lo use. Use el desinfectante Express y el único requisito es que

19
00:01:20,820 --> 00:01:23,690
esto vaya después de todo el analizador.

20
00:01:23,730 --> 00:01:25,110
Definir aquí.

21
00:01:25,270 --> 00:01:25,960
DE ACUERDO.

22
00:01:26,410 --> 00:01:27,730
Y eso es.

23
00:01:27,750 --> 00:01:34,410
Ahora, para usarlo, desea hacerlo para comenzar en lugar de crearse cuando crea un blog nuevo.

24
00:01:34,410 --> 00:01:36,180
Entonces es realmente crear una actualización.

25
00:01:36,180 --> 00:01:39,900
Son los dos lugares donde estamos tomando datos y guardando en la base de datos.

26
00:01:39,900 --> 00:01:47,340
En ambas ocasiones, debe asegurarse de desinfectar la entrada y, en lugar de crear lo que queremos desinfectar,

27
00:01:47,340 --> 00:01:54,630
solicite un registro del cuerpo que es una especie de lío. Recuerde que el cuerpo es lo que

28
00:01:54,630 --> 00:02:01,230
proviene de un formulario. cuerpo que en nuestro caso proviene de un formulario, entonces el blog

29
00:02:01,230 --> 00:02:03,770
se debe a esta línea aquí.

30
00:02:04,240 --> 00:02:09,020
Blog de la imagen del blog del título y finalmente encontrar el cuerpo del blog.

31
00:02:09,270 --> 00:02:11,020
Y este es el que nos importa.

32
00:02:11,280 --> 00:02:13,500
Entonces tenemos que hacer blog dot body.

33
00:02:13,590 --> 00:02:18,470
Por lo tanto, es una especie de nombre largo y largo aquí, pero solicite cuerpo cuerpo de blog de temperatura.

34
00:02:18,720 --> 00:02:25,740
Y vamos a cambiarlo para que sea igual pedir que se desinfecte y vamos

35
00:02:25,740 --> 00:02:27,630
a desinfectar todo esto.

36
00:02:29,100 --> 00:02:35,580
Así que estamos tomando lo que es actualmente igual a desinfectarlo y luego cambiar toda la solicitud de un cuerpo

37
00:02:35,590 --> 00:02:38,670
de registro de volcado de cuerpo para igualar eso.

38
00:02:38,700 --> 00:02:42,230
Así que déjame aclarar eso para que hagamos un blog de agente.

39
00:02:42,770 --> 00:02:51,510
Solicita ese cuerpo antes y después.

40
00:02:51,510 --> 00:02:53,080
Así.

41
00:02:53,520 --> 00:02:59,330
Y déjame agregar algo para que sea un poco más fácil de ver.

42
00:02:59,340 --> 00:03:00,100
Estupendo.

43
00:03:00,570 --> 00:03:01,080
DE ACUERDO.

44
00:03:01,140 --> 00:03:02,360
Así que vamos a darle una oportunidad ahora.

45
00:03:02,400 --> 00:03:03,210
Inicie el

46
00:03:06,990 --> 00:03:08,140
servidor nueva la página.

47
00:03:08,250 --> 00:03:10,600
Tendremos que crear una nueva publicación.

48
00:03:11,340 --> 00:03:18,480
buena que deseemos usar o para ingresar, y luego algo malo que solo será una alerta nuevamente.

49
00:03:18,480 --> 00:03:24,790
Hagamos una imagen aleatoria de Demo que se acaba de llamar y agreguemos alguna HMO

50
00:03:26,680 --> 00:03:28,630
Aquí vamos.

51
00:03:28,680 --> 00:03:35,330
Entonces, si esto funciona, deberíamos ver que antes los dos y los posteriores solo tienen esto.

52
00:03:35,730 --> 00:03:37,920
Echemos un vistazo a lo que ha sucedido.

53
00:03:37,950 --> 00:03:38,620
Perfecto.

54
00:03:38,640 --> 00:03:41,610
Puedes ver la primera vez que el cuerpo es igual a esto.

55
00:03:41,610 --> 00:03:45,320
O teníamos nuestra etiqueta de script allí la segunda vez.

56
00:03:45,390 --> 00:03:47,360
El cuerpo solo tiene el H-1.

57
00:03:47,820 --> 00:03:49,830
Entonces eso es todo lo que tenemos que hacer para desinfectar algo.

58
00:03:50,040 --> 00:03:56,690
Y si ahora mostramos si vamos a nuestra nueva publicación que creen que es esta.

59
00:03:56,690 --> 00:03:59,700
Aquí echamos un vistazo.

60
00:03:59,730 --> 00:04:03,350
Estamos mostrando el problema él mismo, pero no hay ninguna etiqueta de script en absoluto.

61
00:04:03,540 --> 00:04:04,950
Entonces eso funciona genial

62
00:04:04,950 --> 00:04:14,380
Lo último que quieren hacer es ejecutar el mismo código pero hacerlo en lugar de la actualización.

63
00:04:15,180 --> 00:04:21,040
Estamos justo allí antes de actualizar la solicitud en el blog.

64
00:04:21,390 --> 00:04:23,110
Bueno, hice lo mismo.

65
00:04:23,400 --> 00:04:24,630
Un número menor

66
00:04:24,750 --> 00:04:29,220
Este sería un buen caso de uso para lo que se conoce como middleware, del

67
00:04:29,220 --> 00:04:34,170
cual no hemos hablado todavía, pero es algo que estamos repitiendo dos veces en dos rutas diferentes.

68
00:04:34,170 --> 00:04:39,960
Lo que podemos hacer es escribir un middleware que ejecutará este código antes de estas dos rutas, pero cubriremos

69
00:04:39,960 --> 00:04:40,410
el middleware.

70
00:04:40,440 --> 00:04:45,270
Más adelante en este curso hacia el final de EXPRESS Así que lo dejamos como está por ahora.

71
00:04:45,720 --> 00:04:47,270
Y eso funciona bien.

72
00:04:47,520 --> 00:04:52,840
Eso lo desinfectará ambas veces cuando actualice a alguien para crear el siguiente.

73
00:04:52,860 --> 00:04:55,300
Centrémonos o indexemos que E. J. Sí.

74
00:04:55,320 --> 00:04:56,050
Entonces necesita un poco de trabajo.

75
00:04:56,060 --> 00:04:57,800
Se ve así en este momento.

76
00:04:57,850 --> 00:04:59,380
Comencemos borrando algunas cosas.

77
00:04:59,760 --> 00:05:03,160
Y esa fue una de las publicaciones que había creado antes de agregar al desinfectante.

78
00:05:03,600 --> 00:05:08,400
I Para eliminar algunos de estos que no tienen imágenes

79
00:05:08,440 --> 00:05:15,820
solo para que terminemos con algo más fácil de diseñar donde realmente podamos ver las imágenes.

80
00:05:15,820 --> 00:05:18,120
mucho del código que ya hemos utilizado.

81
00:05:18,570 --> 00:05:23,920
OK, así que tenemos esto, lo que queremos hacer es centrarlos para comenzar y voy a usar

82
00:05:23,920 --> 00:05:25,370
Entonces, en lugar de

83
00:05:25,600 --> 00:05:32,110
nuestro índice, tenemos un encabezado bueno pero luego vamos a poner todo dentro de un div y

84
00:05:33,010 --> 00:05:41,890
este div tendrá una clase igual al contenedor de texto principal de UI, que es lo que nos da ese contenedor centrado.

85
00:05:41,890 --> 00:05:42,800
Y luego adentro tendrá nuestro div.

86
00:05:43,060 --> 00:05:45,730
Y esto básicamente se recicla de la última

87
00:05:46,060 --> 00:05:51,310
pequeña línea en el último bit que escribimos para los formularios y para la página del programa.

88
00:05:51,570 --> 00:05:52,690
Entonces la clase es igual a tu gran encabezado y luego solo pondremos un conjunto de páginas de índice.

89
00:05:52,720 --> 00:05:58,890
Déjenlo descansar para un blog.

90
00:05:58,930 --> 00:06:03,990
Así.

91
00:06:04,390 --> 00:06:05,710
Y luego, cuando lo hemos hecho bien, he agregado otro div.

92
00:06:05,830 --> 00:06:09,700
Este tendrá nuestro segmento en él que le da a

93
00:06:09,700 --> 00:06:18,370
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.

94
00:06:18,370 --> 00:06:23,770
un div con los ítems divididos de la IU de clase

95
00:06:24,010 --> 00:06:33,100
y luego, para cada ítem que entramos dentro de ti, dividí los ítems y obtenemos un divisor automático entre

96
00:06:33,340 --> 00:06:33,880
ellos.

97
00:06:36,970 --> 00:06:43,390
Y establecemos una línea más antes de que lleguemos al bucle que es

98
00:06:43,390 --> 00:06:43,940
Así que vamos a copiar este código en esto, están divididos los elementos.

99
00:06:44,170 --> 00:06:49,120
Lo que necesitamos hacer es hacer algunos cambios.

100
00:06:49,120 --> 00:06:53,700
El primero solo está en deuda, pero no vamos a imprimir esto por dentro.

101
00:06:53,710 --> 00:06:58,470
Vamos a crear una clase div igual a elemento y

102
00:06:58,510 --> 00:07:07,690
luego dentro del elemento tenemos nuestra imagen primero y la imagen irá en lugar de una div con clase igual

103
00:07:07,690 --> 00:07:16,450
a imagen y lo pondremos allí y eso ayudará a restringir la tamaño de la imagen para que no

104
00:07:16,450 --> 00:07:21,000
consigamos que esas imágenes gigantescas ocupen toda la pantalla.

105
00:07:21,030 --> 00:07:21,620
OK, entonces la imagen puso la imagen dentro y luego necesita otra clase div igual al contenido.

106
00:07:21,990 --> 00:07:29,780
Y aquí es donde pondré algunas cosas.

107
00:07:30,220 --> 00:07:32,470
El primero es el título y en lugar

108
00:07:32,470 --> 00:07:38,290
de hacer un H-2 con un título en realidad y hacer una etiqueta de anclaje o una etiqueta de anclaje tendrá

109
00:07:39,270 --> 00:07:47,140
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.

110
00:07:47,150 --> 00:07:53,430
Así que el enlace leer más así que la razón por la que estamos haciendo esto para que podamos terminar con nuestro

111
00:07:53,440 --> 00:07:59,740
encabezado para cada blog, puedo hacer clic en él para ir a la página del programa o hacer clic en leer más.

112
00:07:59,740 --> 00:08:04,470
Asegurémonos de tener un pequeño error de sintaxis.

113
00:08:04,880 --> 00:08:07,410
Nos falta nuestra cita de cierre aquí para Atra fracasos.

114
00:08:07,450 --> 00:08:11,450
DE ACUERDO.

115
00:08:12,670 --> 00:08:13,630
Atra es la página de presentación y luego dentro de los corchetes tenemos un título de blog.

116
00:08:13,960 --> 00:08:18,520
Es un desastre.

117
00:08:18,520 --> 00:08:19,860
Luego, agregaremos un div con una

118
00:08:19,930 --> 00:08:27,460
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.

119
00:08:27,460 --> 00:08:35,080
Pero también voy a formatear esta fecha, así que blog punto creado para fecha cadena que ya vimos en la página de

120
00:08:36,040 --> 00:08:42,040
la demostración y luego cerramos eso en vivo allí entonces tendremos una clase div igual a la descripción.

121
00:08:42,040 --> 00:08:51,890
Y ahí es donde pondremos este contenido.

122
00:08:52,210 --> 00:08:55,280
El cuerpo real del blog.

123
00:08:55,690 --> 00:08:58,230
Y en lugar de hacer el mismo signo, lo cambiaré de nuevo a

124
00:08:58,600 --> 00:09:04,060
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.

125
00:09:04,060 --> 00:09:08,160
Por último, un div clásico a extra y en lugar de eso

126
00:09:08,380 --> 00:09:17,380
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.

127
00:09:17,380 --> 00:09:24,430
Por lo tanto, ya no necesitamos el clásico al encabezado, pero sí queremos un botón grande.

128
00:09:24,430 --> 00:09:30,710
Así que flote básico.

129
00:09:30,970 --> 00:09:35,280
Elige tu color de Violet nuevamente.

130
00:09:35,470 --> 00:09:38,410
Y podemos hacer esto un poco.

131
00:09:39,370 --> 00:09:42,190
Definitivamente es mucho mirar.

132
00:09:42,190 --> 00:09:44,630
Así que pongamos esto, pongamos esto un poco.

133
00:09:44,950 --> 00:09:48,090
Entonces, después de la apertura aquí, establezca

134
00:09:48,160 --> 00:09:57,340
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.

135
00:10:01,680 --> 00:10:07,360
OK maratón allí.

136
00:10:07,380 --> 00:10:09,040
Muchas de las cosas que agregamos

137
00:10:09,070 --> 00:10:10,680
Solo asegúrese de que

138
00:10:10,750 --> 00:10:18,880
todo se vea bien y, definitivamente, eche un vistazo al código de la solución si no quiere tomar esto desde cero.

139
00:10:18,880 --> 00:10:20,470
Veamos cómo lo está buscando, no tiene ningún error de sintaxis.

140
00:10:20,710 --> 00:10:25,360
Eso o vamos justo lo que estamos buscando.

141
00:10:27,310 --> 00:10:30,570
Así que estamos truncando los primeros 100 caracteres en ese o tantos caracteres como hay en esta publicación.

142
00:10:30,580 --> 00:10:37,550
En este caso, un clic muy corto en leer más el enlace funciona y nos lleva a la página del programa.

143
00:10:37,570 --> 00:10:43,560
Podemos editar volver.

144
00:10:43,690 --> 00:10:47,760
Tenemos sus imágenes aquí.

145
00:10:47,760 --> 00:10:49,170
Después de las

146
00:10:49,210 --> 00:10:57,370
líneas divididas tenemos nuestra Hetter, tenemos este segmento dando vueltas a todo y hemos terminado prácticamente.

147
00:10:57,380 --> 00:10:57,910
Entonces, nuevamente, no creo que definitivamente no sientamos que debe conocer todas estas clases.

148
00:10:58,210 --> 00:11:04,060
Yo solo lo hice.

149
00:11:04,060 --> 00:11:04,940
Ya sabes que te los dio.

150
00:11:05,140 --> 00:11:06,090
Estilo de fuego rápido.

151
00:11:06,130 --> 00:11:07,380
Porque un punto no es que aprendas todo esto.

152
00:11:07,510 --> 00:11:10,660
Pero si desea obtener más información e ir a dashi semántica por qué puntocom.

153
00:11:11,080 --> 00:11:14,670
Hay muchos tutoriales y recursos geniales.

154
00:11:14,690 --> 00:11:17,200
Todavía no es tan utilizado como bootstrap, pero definitivamente está creciendo.

155
00:11:17,260 --> 00:11:21,270
Me di cuenta de que muchos de mis alumnos lo encontrarían por su cuenta.

156
00:11:21,400 --> 00:11:24,770
Mientras que en el pasado se los presentaría después de

157
00:11:24,880 --> 00:11:30,700
Bluechip en la mayoría de las dos clases más recientes que enseñé, los estudiantes realmente se enamoraron

158
00:11:30,700 --> 00:11:35,860
rápidamente sin que yo nunca se los mostrara y terminaron usándolo por encima de bootstrap.

159
00:11:35,870 --> 00:11:37,430
La mayoría de los estudiantes, pero totalmente de usted.

160
00:11:37,630 --> 00:11:40,800
Los disfruté a los dos y bootstrap definitivamente es más popular por ahora.

161
00:11:40,880 --> 00:11:45,300
OK, lo último que mencioné es que refactorizamos nuestra mesa solo un poquito.

162
00:11:45,340 --> 00:11:50,780
Y todo lo que quiero hacer es agregar una columna final

163
00:11:50,920 --> 00:11:56,470
para el método de mangosta que corresponde a cada uno de estos.

164
00:11:56,470 --> 00:11:57,140
Así que busque por id find by 80 una actualización find por id add remove y así sucesivamente.

165
00:11:57,400 --> 00:12:03,510
Seré una revisión rápida de cómo funcionan las tablas.

166
00:12:03,860 --> 00:12:06,100
Así que aquí hay un gráfico que envejece

167
00:12:06,110 --> 00:12:15,590
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í.

168
00:12:16,930 --> 00:12:24,540
Hay nuestra mesa o nueva th.

169
00:12:24,750 --> 00:12:27,150
Y luego, para el índice, agregaremos un televisor en el método de la mangosta para que el perro se busque perro.

170
00:12:27,460 --> 00:12:36,450
Ahí tienes.

171
00:12:36,880 --> 00:12:38,230
A continuación tenemos una nueva que en realidad no tiene un método de monje en absoluto.

172
00:12:38,230 --> 00:12:43,400
Entonces, en lugar de dejarlo en blanco, simplemente pondré un archivo que lo haga es renderizar un formulario.

173
00:12:43,450 --> 00:12:50,890
A continuación tenemos crear y crear va a hacer un perro crear punto.

174
00:12:51,130 --> 00:12:59,330
Y una característica realmente genial si se hace esta vista previa de la vida es como una edición MIDI,

175
00:13:01,150 --> 00:13:07,760
se dio cuenta de que me muestra cuando estoy seleccionando aquí, lo cual es genial.

176
00:13:07,750 --> 00:13:12,040
Así que ni siquiera tiene que abrir el inspector y simplemente ver en vivo.

177
00:13:12,190 --> 00:13:15,920
Y si cambian cosas, también actualizan en vivo sin tener que guardar o actualizar la página.

178
00:13:16,120 --> 00:13:21,900
DE ACUERDO.

179
00:13:22,420 --> 00:13:22,820
Entonces, tenemos un programa que hace un perro que encuentra por ID, entonces lo tenemos.

180
00:13:22,930 --> 00:13:31,900
Lo cual también hace que un perro sea multado por ID.

181
00:13:32,260 --> 00:13:35,400
Tenemos que encontrar el perro que estamos

182
00:13:35,710 --> 00:13:44,830
editando y eso es para la forma y luego actualizar hace un perro que procesa por id y actualiza uno largo.

183
00:13:44,830 --> 00:13:49,880
Y también es un perro algo largo que encuentra por identificación y elimina cada oportunidad.

184
00:13:50,360 --> 00:14:00,830
Vamos a ver.

185
00:14:01,300 --> 00:14:02,300
Aquí está nuestra mesa.

186
00:14:02,620 --> 00:14:04,250
Parece que borré accidentalmente uno de

187
00:14:04,380 --> 00:14:12,410
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.

188
00:14:12,670 --> 00:14:23,150
Todo bien.

189
00:14:24,150 --> 00:14:24,860
Ahora deberíamos volver a la normalidad.

190
00:14:25,150 --> 00:14:26,430
Aquí está nuestra mesa.

191
00:14:26,480 --> 00:14:28,220
Entonces, el único que no tiene ningún método de mangosta en absoluto.

192
00:14:28,210 --> 00:14:31,740
Va a ser nuevo porque lo nuevo no es encontrar nada, la base de datos no agrega nada.

193
00:14:31,960 --> 00:14:37,390
Simplemente nos da una forma.

194
00:14:37,570 --> 00:14:40,090
Estupendo.

195
00:14:40,210 --> 00:14:40,570
Así que espero que esto sea útil para ti en el futuro, puedes consultar esta tabla.

196
00:14:40,570 --> 00:14:44,580
Me referiré nuevamente a esto, ciertamente cubre una

197
00:14:44,870 --> 00:14:49,150
gran cantidad de información importante que usaremos mucho.

198
00:14:49,150 --> 00:14:50,290
Todo bien.

199
00:14:50,290 --> 00:14:50,860
Así que terminamos esto ahora tenemos que pasar a otras cosas más divertidas, algunas aplicaciones más complicadas.

200
00:14:50,980 --> 00:14:56,280
Noté que había un poco de América cubierto mucho.

201
00:14:56,360 --> 00:14:59,980
Siempre es difícil de hacer.

202
00:15:00,040 --> 00:15:01,710
Interesante porque solo mucha información.

203
00:15:01,710 --> 00:15:03,870
Pero es importante tener esa

204
00:15:03,880 --> 00:15:11,170
credibilidad para poder crear la actualización de lectura y eliminar una entidad que toma muchas vueltas.

205
00:15:11,170 --> 00:15:12,380
Todo bien.

206
00:15:12,380 --> 00:15:12,810
Te veré en el próximo año.

207
00:15:12,900 --> 00:15:13,920