1
00:00:00,350 --> 00:00:03,100
Bentornati al nostro ultimo video su questo blog.

2
00:00:03,310 --> 00:00:04,400
Quindi dobbiamo cambiare.

3
00:00:04,400 --> 00:00:05,050
Faremo.

4
00:00:05,100 --> 00:00:11,070
Il primo è quello di implementare il sanificante Express che ho menzionato, che ci aiuterà con quel problema in

5
00:00:11,400 --> 00:00:17,760
cui, se per la visualizzazione di HDMI Olafur in realtà il rendering di un utente potrebbe potenzialmente inserire alcuni javascript

6
00:00:18,000 --> 00:00:20,030
dannosi invece di un hack di script.

7
00:00:20,130 --> 00:00:27,240
Non vogliamo eseguire quel codice, quindi usiamo l'igienizzatore per aiutarci in questo modo, in pratica prende quell'input e rimuove tutti

8
00:00:27,240 --> 00:00:30,980
gli script da esso e ci dà semplicemente il pari invecchiato.

9
00:00:31,290 --> 00:00:33,660
E poi vogliamo anche modellare la pagina indice un po '.

10
00:00:33,690 --> 00:00:38,820
Sembra un po 'ruvido e l'ultima cosa da fare è fare un piccolo aggiornamento ad un riposante tavolo

11
00:00:38,820 --> 00:00:41,730
Rodi solo per renderlo un po' più utile per te.

12
00:00:41,760 --> 00:00:44,000
Quindi iniziamo con l'igienizzatore.

13
00:00:44,400 --> 00:00:51,350
Quindi installerò un pacchetto chiamato dash dash sanitiser dash dash.

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

15
00:00:54,930 --> 00:00:55,660
OK.

16
00:00:55,710 --> 00:01:06,060
abbiamo bisogno che un igienista così esplicito sia in grado di richiedere un disinfettante Desch proprio così.

17
00:01:07,050 --> 00:01:12,080
Ora che è fatto nella nostra app sì,

18
00:01:12,330 --> 00:01:20,820
E poi dobbiamo dire alla nostra app di usarlo app utilizzare sanificante Express e l'unico requisito è che

19
00:01:20,820 --> 00:01:23,690
questo va dopo tutto il parser.

20
00:01:23,730 --> 00:01:25,110
Definisci qui.

21
00:01:25,270 --> 00:01:25,960
OK.

22
00:01:26,410 --> 00:01:27,730
E questo è tutto.

23
00:01:27,750 --> 00:01:34,410
Ora per usarlo si vuole farlo per iniziare invece di vengono creati quando si crea un nuovo blog.

24
00:01:34,410 --> 00:01:36,180
Quindi è davvero creare un aggiornamento.

25
00:01:36,180 --> 00:01:39,900
Sono i due luoghi in cui stiamo prendendo i dati e salvandoli nel database.

26
00:01:39,900 --> 00:01:47,340
Entrambe le volte che vuoi essere sicuro di disinfettare l'input e invece di creare ciò che vogliamo disinfettare è richiedere un

27
00:01:47,340 --> 00:01:54,630
body del registro che è un po 'di confusione ricorda che request up body è qualunque cosa provenga da un modulo

28
00:01:54,630 --> 00:02:01,230
qualunque sia il dato nella richiesta corpo che nel nostro caso proviene da un modulo quindi il blog è

29
00:02:01,230 --> 00:02:03,770
per via di questa linea proprio qui.

30
00:02:04,240 --> 00:02:09,020
Blog blog immagine del titolo e trova finalmente il corpo del blog.

31
00:02:09,270 --> 00:02:11,020
E questo è quello a cui teniamo.

32
00:02:11,280 --> 00:02:13,500
Quindi dobbiamo fare blog dot body.

33
00:02:13,590 --> 00:02:18,470
Quindi è una specie di nome lungo e lungo ma richiede il corpo del corpo del blog.

34
00:02:18,720 --> 00:02:25,740
E lo cambieremo in modo che sia uguale a richiedere la sanificazione e stiamo andando

35
00:02:25,740 --> 00:02:27,630
a disinfettare l'intera cosa.

36
00:02:29,100 --> 00:02:35,580
Quindi stiamo prendendo quello che è attualmente uguale a sanitizzarlo e quindi modificare l'intera richiesta di un corpo

37
00:02:35,590 --> 00:02:38,670
registrato del corpo del dump per equivalere a quello.

38
00:02:38,700 --> 00:02:42,230
Quindi lascia che ti spieghi un blog.

39
00:02:42,770 --> 00:02:51,510
Richiedi quel corpo prima e dopo.

40
00:02:51,510 --> 00:02:53,080
Proprio così.

41
00:02:53,520 --> 00:02:59,330
E lascia che aggiunga qualcosa per renderlo un po 'più facile da vedere.

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

43
00:03:00,570 --> 00:03:01,080
OK.

44
00:03:01,140 --> 00:03:02,360
Quindi facciamo un tentativo ora.

45
00:03:02,400 --> 00:03:03,210
Avvia il

46
00:03:06,990 --> 00:03:08,140
server nuova pagina.

47
00:03:08,250 --> 00:03:10,600
Dovremo creare un nuovo post.

48
00:03:11,340 --> 00:03:18,480
usare o per entrare e poi qualcosa di brutto che sarà solo un avviso di nuovo.

49
00:03:18,480 --> 00:03:24,790
Facciamo uno appena chiamato Demo immagine casuale e aggiungiamo qualche buon HMO che vogliamo

50
00:03:26,680 --> 00:03:28,630
Eccoci.

51
00:03:28,680 --> 00:03:35,330
Quindi, se funziona, dovremmo vedere che prima ha sia questo che il dopo ha solo questo.

52
00:03:35,730 --> 00:03:37,920
Diamo un'occhiata a cosa è successo.

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

54
00:03:38,640 --> 00:03:41,610
Puoi vedere la prima volta che il corpo è uguale a questo.

55
00:03:41,610 --> 00:03:45,320
Oppure avevamo il nostro tag script lì la seconda volta.

56
00:03:45,390 --> 00:03:47,360
Il corpo ha solo l'H-1.

57
00:03:47,820 --> 00:03:49,830
Quindi questo è tutto quello che dobbiamo fare per disinfettare qualcosa.

58
00:03:50,040 --> 00:03:56,690
E se ora mostriamo, andiamo al nostro nuovo post che credono sia questo.

59
00:03:56,690 --> 00:03:59,700
Qui diamo un'occhiata.

60
00:03:59,730 --> 00:04:03,350
Stiamo visualizzando il problema da soli, ma non c'è alcun tag script.

61
00:04:03,540 --> 00:04:04,950
Quindi funziona alla grande.

62
00:04:04,950 --> 00:04:14,380
L'ultima cosa che vogliono fare è eseguire lo stesso codice ma farlo invece dell'aggiornamento.

63
00:04:15,180 --> 00:04:21,040
Siamo qui prima di aggiornare la richiesta sul blog.

64
00:04:21,390 --> 00:04:23,110
Bene ha fatto la stessa cosa

65
00:04:23,400 --> 00:04:24,630
Un numero minore

66
00:04:24,750 --> 00:04:29,220
Questo sarebbe un buon uso di ciò che è noto come un middleware di

67
00:04:29,220 --> 00:04:34,170
cui non abbiamo ancora parlato, ma è qualcosa che ripetiamo due volte in due percorsi diversi.

68
00:04:34,170 --> 00:04:39,960
Quello che possiamo fare è scrivere un middleware che eseguirà questo codice prima di queste due rotte ma copriremo

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

70
00:04:40,440 --> 00:04:45,270
Più tardi in questo corso verso la fine di EXPRESS Quindi lo stiamo lasciando come è per ora.

71
00:04:45,720 --> 00:04:47,270
E questo funziona bene.

72
00:04:47,520 --> 00:04:52,840
Ciò lo sanificherà entrambe le volte quando aggiorni qualcuno che crei in seguito.

73
00:04:52,860 --> 00:04:55,300
Concentriamoci su o indicizziamo che E. J. Sì.

74
00:04:55,320 --> 00:04:56,050
Quindi ha bisogno di un po 'di lavoro.

75
00:04:56,060 --> 00:04:57,800
Sembra proprio ora.

76
00:04:57,850 --> 00:04:59,380
Iniziamo cancellando alcune cose.

77
00:04:59,760 --> 00:05:03,160
E quello era uno dei post che avevo creato prima di aggiungere il disinfettante.

78
00:05:03,600 --> 00:05:08,400
Per cancellare alcuni di quelli che non hanno immagini solo in

79
00:05:08,440 --> 00:05:15,820
modo che ci ritroviamo con qualcosa di più facile da stile dove possiamo effettivamente vedere le immagini.

80
00:05:15,820 --> 00:05:18,120
un sacco di codice che abbiamo già usato.

81
00:05:18,570 --> 00:05:23,920
OK, quindi abbiamo quello che vogliamo fare è centrare loro di iniziare e ho intenzione di utilizzare

82
00:05:23,920 --> 00:05:25,370
Quindi al posto del

83
00:05:25,600 --> 00:05:32,110
nostro indice abbiamo un header che va bene ma poi metteremo tutto all'interno di un div e

84
00:05:33,010 --> 00:05:41,890
questo div avrà la classe uguale al contenitore di testo principale dell'interfaccia utente che è quello che ci dà quel contenitore centrato.

85
00:05:41,890 --> 00:05:42,800
E poi dentro avrà il nostro div.

86
00:05:43,060 --> 00:05:45,730
E questo è fondamentalmente riciclato dall'ultima piccola

87
00:05:46,060 --> 00:05:51,310
riga nell'ultimo pezzettino che abbiamo scritto per le forme e per la pagina dello spettacolo.

88
00:05:51,570 --> 00:05:52,690
Quindi la classe equivale a un'intestazione enorme e quindi ci limiteremo a mettere una serie di pagine indice.

89
00:05:52,720 --> 00:05:58,890
Mettiamolo a riposo per un blog.

90
00:05:58,930 --> 00:06:03,990
Proprio così.

91
00:06:04,390 --> 00:06:05,710
E poi quando abbiamo fatto bene ho aggiunto un altro div.

92
00:06:05,830 --> 00:06:09,700
Questo avrà il nostro segmento in esso che dà a

93
00:06:09,700 --> 00:06:18,370
questo segmento superiore attaccato all'interfaccia utente che dà solo quella piccola linea nella scatola e poi all'interno di ci sarà il looping attraverso.

94
00:06:18,370 --> 00:06:23,770
div con gli elementi divisi dell'interfaccia di classe e quindi per

95
00:06:24,010 --> 00:06:33,100
ogni oggetto che andiamo dentro di te ho diviso gli oggetti e mettiamo un divisore automatico tra di

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

97
00:06:36,970 --> 00:06:43,390
E abbiamo impostato un'altra riga prima di arrivare al ciclo che è un

98
00:06:43,390 --> 00:06:43,940
Quindi stiamo andando a copiare questo codice in questo sei elementi divisi.

99
00:06:44,170 --> 00:06:49,120
Quello che facciamo è necessario apportare alcune modifiche.

100
00:06:49,120 --> 00:06:53,700
Il primo è solo in debito ma non lo stamperemo solo all'interno.

101
00:06:53,710 --> 00:06:58,470
Creeremo una classe div uguale all'elemento e poi all'interno

102
00:06:58,510 --> 00:07:07,690
dell'articolo avremo prima la nostra immagine e l'immagine andrà al posto di un div con una classe uguale

103
00:07:07,690 --> 00:07:16,450
all'immagine e la metteremo là fuori e ciò contribuirà a vincolare il dimensione dell'immagine in modo da

104
00:07:16,450 --> 00:07:21,000
non ottenere più quelle immagini gigantesche che occupano l'intero schermo.

105
00:07:21,030 --> 00:07:21,620
OK, così l'immagine ha messo l'immagine all'interno, quindi ha bisogno di un'altra classe div uguale al contenuto.

106
00:07:21,990 --> 00:07:29,780
Ed è qui che metterò alcune cose.

107
00:07:30,220 --> 00:07:32,470
Il primo è il titolo e piuttosto che

108
00:07:32,470 --> 00:07:38,290
fare un H-2 con un titolo in realtà e fare un tag di ancoraggio e il tag di ancoraggio avrà una

109
00:07:39,270 --> 00:07:47,140
classe uguale a Hetter ma avrà anche un ref uguale alla pagina di show che e Riskin una copia che sei qui proprio come quello che hai già.

110
00:07:47,150 --> 00:07:53,430
Quindi leggiamo più link, quindi il motivo per cui lo stiamo facendo in modo che possiamo finire con

111
00:07:53,440 --> 00:07:59,740
il nostro header per ogni blog, posso cliccarci sopra per andare alla pagina show o cliccare su read more.

112
00:07:59,740 --> 00:08:04,470
Assicuriamoci di avere un piccolo errore di sintassi.

113
00:08:04,880 --> 00:08:07,410
Ci manca la nostra citazione di chiusura qui per i flop Atra.

114
00:08:07,450 --> 00:08:11,450
OK.

115
00:08:12,670 --> 00:08:13,630
Atra è la pagina dello spettacolo e quindi all'interno delle parentesi abbiamo un titolo del blog.

116
00:08:13,960 --> 00:08:18,520
È un po 'un casino.

117
00:08:18,520 --> 00:08:19,860
Poi dopo aggiungeremo un div con

118
00:08:19,930 --> 00:08:27,460
una classe pari a Metta, che è solo un posto per noi per inserire informazioni su questo particolare oggetto che nel nostro caso sarà solo un intervallo con la data che abbiamo già.

119
00:08:27,460 --> 00:08:35,080
Ma ho intenzione di formattare anche questa data, quindi il punto del blog creato per la stringa della data che abbiamo già

120
00:08:36,040 --> 00:08:42,040
visto nella pagina dello spettacolo e poi chiudiamo quella live, quindi avremo una classe div uguale alla descrizione.

121
00:08:42,040 --> 00:08:51,890
Ed è qui che inseriremo questo contenuto.

122
00:08:52,210 --> 00:08:55,280
Il corpo reale del blog.

123
00:08:55,690 --> 00:08:58,230
E invece di fare il segno di uguale, lo cambierò di nuovo

124
00:08:58,600 --> 00:09:04,060
in un trattino o non lo cambierò indietro, ma lo cambieremo in modo tale da ottenere l'età effettiva del nostro contenuto che ora è sterilizzato.

125
00:09:04,060 --> 00:09:08,160
Infine ho un div classico in extra e al posto di quello metto

126
00:09:08,380 --> 00:09:17,380
il bottone per leggere di più e creerò un tag di ancoraggio e copierò un tag che abbiamo già inserito e lo modificherò solo un po '.

127
00:09:17,380 --> 00:09:24,430
Quindi non abbiamo più bisogno del classico per l'intestazione, ma vogliamo invece un pulsante grande.

128
00:09:24,430 --> 00:09:30,710
Quindi fluttuo di base.

129
00:09:30,970 --> 00:09:35,280
Scegli il tuo colore di fare di nuovo Violet.

130
00:09:35,470 --> 00:09:38,410
E possiamo farlo un po '.

131
00:09:39,370 --> 00:09:42,190
È sicuramente molto da vedere.

132
00:09:42,190 --> 00:09:44,630
Quindi diciamo mettiamolo un po '.

133
00:09:44,950 --> 00:09:48,090
Quindi, dopo l'apertura qui, quindi imposta il tag di

134
00:09:48,160 --> 00:09:57,340
ancoraggio che avremo letto di più e aggiungeremo su un'icona un'icona a forma di chevron che sarà solo una piccola freccia dopo aver letto di più.

135
00:10:01,680 --> 00:10:07,360
OK, maratona lì.

136
00:10:07,380 --> 00:10:09,040
Un sacco di cose che abbiamo aggiunto.

137
00:10:09,070 --> 00:10:10,680
Assicurati solo che

138
00:10:10,750 --> 00:10:18,880
tutto sia a posto e sicuramente dai un'occhiata al codice della soluzione se non vuoi prenderlo da zero.

139
00:10:18,880 --> 00:10:20,470
Vediamo come sta cercando che tu non abbia errori di sintassi.

140
00:10:20,710 --> 00:10:25,360
Questo o noi andiamo proprio quello che stiamo cercando.

141
00:10:27,310 --> 00:10:30,570
Quindi stiamo troncando i primi 100 caratteri in questo o tanti personaggi quanti ce ne sono in questo post.

142
00:10:30,580 --> 00:10:37,550
In questo caso clicca molto breve per saperne di più il link lavora ci porta alla pagina dello spettacolo.

143
00:10:37,570 --> 00:10:43,560
Possiamo modificare tornare indietro.

144
00:10:43,690 --> 00:10:47,760
Abbiamo le sue immagini qui.

145
00:10:47,760 --> 00:10:49,170
Dopo le linee

146
00:10:49,210 --> 00:10:57,370
divise abbiamo il nostro Hetter, abbiamo questo segmento che gira intorno a tutto e abbiamo finito.

147
00:10:57,380 --> 00:10:57,910
Quindi di nuovo non ci sentiamo come se non avessimo la sensazione di dover conoscere tutte queste classi.

148
00:10:58,210 --> 00:11:04,060
Ho appena fatto.

149
00:11:04,060 --> 00:11:04,940
Sai che te li ha dati.

150
00:11:05,140 --> 00:11:06,090
Stile di fuoco rapido.

151
00:11:06,130 --> 00:11:07,380
Perché un punto non è che tu impari tutto questo.

152
00:11:07,510 --> 00:11:10,660
Ma se vuoi saperne di più e andare al dashi semantico perché dotcom.

153
00:11:11,080 --> 00:11:14,670
Ci sono molti tutorial e risorse fantastici.

154
00:11:14,690 --> 00:11:17,200
Non è ancora ampiamente utilizzato come bootstrap, ma è decisamente in crescita.

155
00:11:17,260 --> 00:11:21,270
Ho notato che molti dei miei studenti l'avrebbero trovato da soli.

156
00:11:21,400 --> 00:11:24,770
Mentre in passato lo presentavo a loro dopo il

157
00:11:24,880 --> 00:11:30,700
bluetooth, nella maggior parte delle due classi più recenti che ho insegnato agli studenti, mi sono

158
00:11:30,700 --> 00:11:35,860
subito innamorato senza che me ne fossi mai mostrata e finirono per usarla su bootstrap.

159
00:11:35,870 --> 00:11:37,430
La maggior parte degli studenti, ma totalmente a te.

160
00:11:37,630 --> 00:11:40,800
Mi sono divertito entrambi e il bootstrap è decisamente più popolare per ora.

161
00:11:40,880 --> 00:11:45,300
OK, quindi l'ultima cosa che ho menzionato è il refactoring del nostro tavolo.

162
00:11:45,340 --> 00:11:50,780
E tutto ciò che voglio fare è aggiungere una colonna

163
00:11:50,920 --> 00:11:56,470
finale per il metodo mangusta corrispondente a ognuno di questi.

164
00:11:56,470 --> 00:11:57,140
Quindi trovare per id trovare per 80 un aggiornamento trovare da id aggiungere rimuovere e così via.

165
00:11:57,400 --> 00:12:03,510
Sarò una rapida recensione di come funzionano le tabelle.

166
00:12:03,860 --> 00:12:06,100
Quindi ecco un grafico che invecchi

167
00:12:06,110 --> 00:12:15,590
l'importo che dobbiamo aggiungere in un altro th e lo chiameremo semplicemente metodo mongoose e apriamo l'anteprima di un'anteprima di cottura e spostiamola in basso qui.

168
00:12:16,930 --> 00:12:24,540
C'è il nostro tavolo o il nuovo th.

169
00:12:24,750 --> 00:12:27,150
E poi per l'indice aggiungeremo una TV nel metodo mangusta per il cane dovrebbe essere trovare cane.

170
00:12:27,460 --> 00:12:36,450
Ecco qua.

171
00:12:36,880 --> 00:12:38,230
Prossimo abbiamo una nuova che in realtà non ha un metodo monkish affatto.

172
00:12:38,230 --> 00:12:43,400
Quindi, piuttosto che lasciarlo vuoto, inserirò semplicemente un file che fa il rendering di un modulo.

173
00:12:43,450 --> 00:12:50,890
Successivamente abbiamo creato e creato sta per fare un dog dot creare.

174
00:12:51,130 --> 00:12:59,330
E una caratteristica davvero interessante se si fa questa anteprima di vita è come un montaggio MIDI che

175
00:13:01,150 --> 00:13:07,760
è venuto notato che mi mostra quando seleziono qui, il che è abbastanza bello.

176
00:13:07,750 --> 00:13:12,040
Quindi non devi nemmeno aprire l'ispettore e vedere solo dal vivo.

177
00:13:12,190 --> 00:13:15,920
E se cambiano le cose, aggiornano anche dal vivo senza dover salvare o aggiornare la pagina.

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

179
00:13:22,420 --> 00:13:22,820
Quindi abbiamo uno spettacolo che fa un cane che trova per ID e poi ce l'abbiamo.

180
00:13:22,930 --> 00:13:31,900
Che anche un cane viene multato per ID.

181
00:13:32,260 --> 00:13:35,400
Dobbiamo trovare il cane che stiamo modificando

182
00:13:35,710 --> 00:13:44,830
e questo è per il modulo e quindi aggiornare un cane che è stato tagliato da id e aggiornare quello lungo.

183
00:13:44,830 --> 00:13:49,880
Ed è anche un cane piuttosto lungo che trova dall'ID e rimuove ogni colpo.

184
00:13:50,360 --> 00:14:00,830
Diamo un'occhiata.

185
00:14:01,300 --> 00:14:02,300
Ecco il nostro tavolo.

186
00:14:02,620 --> 00:14:04,250
Sembra che abbia cancellato

187
00:14:04,380 --> 00:14:12,410
accidentalmente uno dei CD qui, che dovrebbe mostrare quale aggiornamento aggiorna il cane stupratore, quindi reindirizzare da qualche parte.

188
00:14:12,670 --> 00:14:23,150
Tutto ok.

189
00:14:24,150 --> 00:14:24,860
Ora dovremmo tornare alla normalità.

190
00:14:25,150 --> 00:14:26,430
Ecco il nostro tavolo.

191
00:14:26,480 --> 00:14:28,220
Quindi l'unico che non ha alcun metodo di mangusta.

192
00:14:28,210 --> 00:14:31,740
Sarà nuovo perché il nuovo non trova nulla nel database, non aggiunge nulla.

193
00:14:31,960 --> 00:14:37,390
Ci rende semplicemente una forma.

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

195
00:14:40,210 --> 00:14:40,570
Quindi spero che questo sia utile per te in futuro puoi fare riferimento a questa tabella.

196
00:14:40,570 --> 00:14:44,580
Ci riferirò ad esso sicuramente copre

197
00:14:44,870 --> 00:14:49,150
molte informazioni importanti che useremo molto.

198
00:14:49,150 --> 00:14:50,290
Tutto ok.

199
00:14:50,290 --> 00:14:50,860
Quindi finiamo questo ora per passare ad alcune cose più divertenti ad alcune app più complicate.

200
00:14:50,980 --> 00:14:56,280
Ho notato che c'era un po 'di America coperta molto.

201
00:14:56,360 --> 00:14:59,980
È sempre difficile da fare.

202
00:15:00,040 --> 00:15:01,710
Interessante perché solo un sacco di informazioni.

203
00:15:01,710 --> 00:15:03,870
Ma è importante avere quella

204
00:15:03,880 --> 00:15:11,170
credibilità in grado di creare un aggiornamento di lettura ed eliminare un'entità che richiede molto wrapping.

205
00:15:11,170 --> 00:15:12,380
Tutto ok.

206
00:15:12,380 --> 00:15:12,810
Ci vediamo l'anno prossimo.

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