1
00:00:00,350 --> 00:00:03,100
Bem-vindo ao nosso último vídeo neste blog.

2
00:00:03,310 --> 00:00:04,400
Então, temos que mudar.

3
00:00:04,400 --> 00:00:05,050
Nós vamos fazer.

4
00:00:05,100 --> 00:00:11,070
O primeiro é implementar o desinfetante Express que mencionei, o que nos ajudará com esse problema, em

5
00:00:11,400 --> 00:00:17,760
que, se, ao exibir o HDMI Olafur realmente o tornando um usuário, poderia entrar com algum javascript prejudicial

6
00:00:18,000 --> 00:00:20,030
ao invés de um script hack.

7
00:00:20,130 --> 00:00:27,240
Nós não queremos executar esse código para que usemos o sanitizador para nos ajudar com isso, basicamente, adquire essa contribuição e ele

8
00:00:27,240 --> 00:00:30,980
remove todos os scripts e simplesmente nos dá o par envelhecer.

9
00:00:31,290 --> 00:00:33,660
E então também queremos estilo a página de índice um pouco.

10
00:00:33,690 --> 00:00:38,820
Parece um pouco difícil e a última coisa será fazer uma pequena atualização para uma mesa de Rhodes

11
00:00:38,820 --> 00:00:41,730
reparadora, apenas para torná-la um pouco mais útil para você.

12
00:00:41,760 --> 00:00:44,000
Então, vamos começar com o sanitizador.

13
00:00:44,400 --> 00:00:51,350
Então eu vou instalar um pacote chamado Express dash sanitiser dash dash.

14
00:00:51,390 --> 00:00:53,430
Salve .

15
00:00:54,930 --> 00:00:55,660
ESTÁ BEM.

16
00:00:55,710 --> 00:01:06,060
sim, vamos exigir que os equacionadores de expressos mais expressos exigem o desinfectante expresso Ex. Assim.

17
00:01:07,050 --> 00:01:12,080
Agora que isso é feito no nosso aplicativo,

18
00:01:12,330 --> 00:01:20,820
E então temos que dizer ao nosso aplicativo para usá-lo usar o desinfetante Express e o único requisito é

19
00:01:20,820 --> 00:01:23,690
que isso vá após todo o analisador.

20
00:01:23,730 --> 00:01:25,110
Defina aqui.

21
00:01:25,270 --> 00:01:25,960
ESTÁ BEM.

22
00:01:26,410 --> 00:01:27,730
E é isso.

23
00:01:27,750 --> 00:01:34,410
Agora, para usá-lo, você quer fazê-lo para começar em vez de ser criado quando você cria um novo blog.

24
00:01:34,410 --> 00:01:36,180
Então, é realmente criar uma atualização.

25
00:01:36,180 --> 00:01:39,900
São os dois lugares onde estamos levando dados e salvando no banco de dados.

26
00:01:39,900 --> 00:01:47,340
Ambas as vezes você quer se certificar de desinfetar a entrada e ao invés de criar o que queremos desinfetar é pedido até

27
00:01:47,340 --> 00:01:54,630
o corpo até o log do corpo, que é um tipo de lembrete, lembre-se de solicitar o corpo é o que quer que

28
00:01:54,630 --> 00:02:01,230
venha de um formulário qualquer que seja o dado no pedido corpo que, em nosso caso, vem de uma forma,

29
00:02:01,230 --> 00:02:03,770
o blog é devido a esta linha aqui.

30
00:02:04,240 --> 00:02:09,020
Imagem do blog do título do blog e descubra finalmente o corpo do blog.

31
00:02:09,270 --> 00:02:11,020
E este é o que nos interessa.

32
00:02:11,280 --> 00:02:13,500
Então, temos que fazer o blog dot body.

33
00:02:13,590 --> 00:02:18,470
Então é um longo nome longo aqui, mas solicite corpo até o corpo de temperatura do blog.

34
00:02:18,720 --> 00:02:25,740
E vamos mudá-lo para que seja igual a solicitar que desinfecte e vamos

35
00:02:25,740 --> 00:02:27,630
desinfetar tudo isso.

36
00:02:29,100 --> 00:02:35,580
Então, estamos levando o que é atualmente igual a desinfetá-lo e, em seguida, mudar o pedido inteiro de

37
00:02:35,590 --> 00:02:38,670
um corpo de despejo de corpo para igualar isso.

38
00:02:38,700 --> 00:02:42,230
Então, deixe-me deixar claro para você, vamos fazer um blog constable.

39
00:02:42,770 --> 00:02:51,510
Solicite esse corpo antes e depois.

40
00:02:51,510 --> 00:02:53,080
Bem desse jeito.

41
00:02:53,520 --> 00:02:59,330
E deixe-me adicionar algo para torná-lo um pouco mais fácil de ver.

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

43
00:03:00,570 --> 00:03:01,080
ESTÁ BEM.

44
00:03:01,140 --> 00:03:02,360
Então vamos dar uma chance agora.

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

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

47
00:03:08,250 --> 00:03:10,600
Teremos que criar uma nova postagem.

48
00:03:11,340 --> 00:03:18,480
que queremos usar ou entrar e, em seguida, algo ruim que será apenas um alerta novamente.

49
00:03:18,480 --> 00:03:24,790
Vamos fazer uma imagem aleatória apenas chamada Demo e vamos adicionar algum bom HMO

50
00:03:26,680 --> 00:03:28,630
Aqui vamos nós.

51
00:03:28,680 --> 00:03:35,330
Então, se isso funcionar, devemos ver isso antes e ambos e o depois só tem isso.

52
00:03:35,730 --> 00:03:37,920
Vejamos o que aconteceu.

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

54
00:03:38,640 --> 00:03:41,610
Você pode ver a primeira vez que o corpo é igual a isso.

55
00:03:41,610 --> 00:03:45,320
Ou nós tivemos nossa tag de script lá a segunda vez.

56
00:03:45,390 --> 00:03:47,360
O corpo só tem o H-1.

57
00:03:47,820 --> 00:03:49,830
Então, é tudo o que temos a fazer para desinfetar algo.

58
00:03:50,040 --> 00:03:56,690
E se mostramos agora, nós fomos para a nossa nova publicação, que eles acreditam ser essa.

59
00:03:56,690 --> 00:03:59,700
Aqui, damos uma olhada.

60
00:03:59,730 --> 00:04:03,350
Estamos exibindo a questão, mas não há nenhuma tag de script.

61
00:04:03,540 --> 00:04:04,950
Então isso funciona muito bem.

62
00:04:04,950 --> 00:04:14,380
A última coisa que eles querem fazer é executar o mesmo código, mas fazê-lo em vez da atualização.

63
00:04:15,180 --> 00:04:21,040
Estamos lá antes de atualizar solicitação no blog.

64
00:04:21,390 --> 00:04:23,110
Bem, fez o mesmo.

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

66
00:04:24,750 --> 00:04:29,220
Este seria um bom caso de uso para o que é conhecido como um middleware sobre

67
00:04:29,220 --> 00:04:34,170
o qual ainda não falamos, mas é algo que estamos repetindo duas vezes em duas rotas diferentes.

68
00:04:34,170 --> 00:04:39,960
O que podemos fazer é escrever um middleware que executará este código antes destas duas rotas, mas vamos cobrir

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

70
00:04:40,440 --> 00:04:45,270
Mais tarde neste curso em direção ao final de EXPRESS Então, estamos deixando como é por enquanto.

71
00:04:45,720 --> 00:04:47,270
E isso funciona bem.

72
00:04:47,520 --> 00:04:52,840
Isso irá sanitizá-lo tanto quando você atualizar alguém criando o próximo.

73
00:04:52,860 --> 00:04:55,300
Vamos focar ou indexar isso. J. Sim.

74
00:04:55,320 --> 00:04:56,050
Então precisa de um pouco de trabalho.

75
00:04:56,060 --> 00:04:57,800
Parece isso agora.

76
00:04:57,850 --> 00:04:59,380
Comecemos por excluir algumas coisas.

77
00:04:59,760 --> 00:05:03,160
E essa foi uma das postagens que eu criei antes de adicionar o sanitizador.

78
00:05:03,600 --> 00:05:08,400
I Para excluir alguns desses que não possuem imagens apenas

79
00:05:08,440 --> 00:05:15,820
para que acabemos com algo mais fácil de usar, onde podemos realmente ver as imagens.

80
00:05:15,820 --> 00:05:18,120
muito do código que já usamos.

81
00:05:18,570 --> 00:05:23,920
OK, então, temos o que queremos fazer é centrá-los para começar e eu vou usar

82
00:05:23,920 --> 00:05:25,370
Então, em vez de

83
00:05:25,600 --> 00:05:32,110
nosso índice, temos um cabeçalho que é bom, mas então vamos colocar tudo dentro de um div

84
00:05:33,010 --> 00:05:41,890
e esta div terá classe igual ao contêiner de texto principal do UI, que é o que nos dá esse recipiente centrado.

85
00:05:41,890 --> 00:05:42,800
E então, dentro, teremos a nossa div.

86
00:05:43,060 --> 00:05:45,730
E isso é basicamente reciclado a partir da

87
00:05:46,060 --> 00:05:51,310
última pequena linha no último pouco que escrevemos para os formulários e para a página de exibição.

88
00:05:51,570 --> 00:05:52,690
Então, a classe é igual a seu enorme cabeçalho e então vamos colocar um conjunto de páginas de índice.

89
00:05:52,720 --> 00:05:58,890
Vamos simplesmente descansar para um blog.

90
00:05:58,930 --> 00:06:03,990
Bem desse jeito.

91
00:06:04,390 --> 00:06:05,710
E então, quando o fizemos bem, adicionei outra div.

92
00:06:05,830 --> 00:06:09,700
Este terá o nosso segmento dentro dele, que dá este segmento

93
00:06:09,700 --> 00:06:18,370
em cima do UI em anexo, que dá apenas essa pequena linha na caixa e, em seguida, dentro de lá vai estar fazendo um loop.

94
00:06:18,370 --> 00:06:23,770
é um div com a classe UI itens divididos e, em

95
00:06:24,010 --> 00:06:33,100
seguida, para cada item que entramos dentro de você, eu dividi itens e obtivemos um divisor automático entre

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

97
00:06:36,970 --> 00:06:43,390
E nós estabelecemos uma linha mais antes mesmo de chegar ao loop que

98
00:06:43,390 --> 00:06:43,940
Então, vamos copiar esse código para isso, você é itens divididos.

99
00:06:44,170 --> 00:06:49,120
O que precisamos fazer algumas mudanças.

100
00:06:49,120 --> 00:06:53,700
O primeiro é apenas dívida, mas não vamos apenas imprimir isso dentro.

101
00:06:53,710 --> 00:06:58,470
Nós vamos criar uma classe div igual ao item e,

102
00:06:58,510 --> 00:07:07,690
em seguida, dentro do item, temos a nossa imagem primeiro e a imagem irá em vez de uma div com

103
00:07:07,690 --> 00:07:16,450
classe igual à imagem e vamos colocar isso lá fora e isso ajudará a restringir a tamanho da imagem,

104
00:07:16,450 --> 00:07:21,000
então não conseguimos essas imagens gigantescas mais na tela inteira.

105
00:07:21,030 --> 00:07:21,620
OK, então a imagem colocou a imagem dentro, então precisa de outra classe div igual ao conteúdo.

106
00:07:21,990 --> 00:07:29,780
E é aqui que vou colocar algumas coisas.

107
00:07:30,220 --> 00:07:32,470
O primeiro é o título e, ao invés de

108
00:07:32,470 --> 00:07:38,290
fazer um H-2 com um título na verdade e fazer uma marca de âncora e / ou a marca de âncora terá uma

109
00:07:39,270 --> 00:07:47,140
classe igual a Hetter, mas também terá uma referência igual à página de exibição que e Riskin uma cópia que Você está aqui da mesma forma que você já possui.

110
00:07:47,150 --> 00:07:53,430
Então, leia mais link, então, porque estamos fazendo isso para que possamos terminar com nosso cabeçalho

111
00:07:53,440 --> 00:07:59,740
para cada blog, posso clicar nisso para ir à página do show ou clicar em ler mais.

112
00:07:59,740 --> 00:08:04,470
Vamos ter certeza de que temos um pequeno erro de sintaxe.

113
00:08:04,880 --> 00:08:07,410
Nós estamos perdendo nossa citação de encerramento aqui para Atra flops.

114
00:08:07,450 --> 00:08:11,450
ESTÁ BEM.

115
00:08:12,670 --> 00:08:13,630
Atra é a página de exibição e depois dentro dos colchetes temos um título de blog.

116
00:08:13,960 --> 00:08:18,520
É uma espécie de bagunça.

117
00:08:18,520 --> 00:08:19,860
Então, depois disso, adicionaremos uma div

118
00:08:19,930 --> 00:08:27,460
com classe igual a Metta, que é apenas um lugar para colocar informações sobre esse item em particular que, em nosso caso, será apenas um período com a data que já temos.

119
00:08:27,460 --> 00:08:35,080
Mas também vou formatar esta data, então blog dot criado para a cadeia de data que já vimos na página

120
00:08:36,040 --> 00:08:42,040
de exibição e então fechamos a vida lá, então teremos uma classe div igual à descrição.

121
00:08:42,040 --> 00:08:51,890
E é aí que vamos colocar esse conteúdo.

122
00:08:52,210 --> 00:08:55,280
O corpo real do blog.

123
00:08:55,690 --> 00:08:58,230
E, ao invés de fazer o mesmo sinal, eu o transformarei em

124
00:08:58,600 --> 00:09:04,060
um traço ou não o alterarei, mas nós o mudaremos para um dasht para que possamos ter a idade atual do nosso conteúdo agora sanitizado.

125
00:09:04,060 --> 00:09:08,160
Por fim, eu diviso um clássico para extra e, em vez disso,

126
00:09:08,380 --> 00:09:17,380
colocarei o botão para ler mais e farei uma marca de âncora e eu vou copiar uma tag que já temos e mudá-la um pouco.

127
00:09:17,380 --> 00:09:24,430
Então, não precisamos do clássico para encabeçar mais, mas nós queremos, em vez disso, é um botão grande.

128
00:09:24,430 --> 00:09:30,710
Então eu flutuava basicamente.

129
00:09:30,970 --> 00:09:35,280
Escolha sua cor de fazer Violet novamente.

130
00:09:35,470 --> 00:09:38,410
E podemos fazer isso um pouco.

131
00:09:39,370 --> 00:09:42,190
Definitivamente, é muito para ver.

132
00:09:42,190 --> 00:09:44,630
Então, vamos colocar isso, vamos colocar isso um pouco.

133
00:09:44,950 --> 00:09:48,090
Então, depois da abertura aqui, defina a

134
00:09:48,160 --> 00:09:57,340
marca de âncora, teremos lido mais e adicionaremos um ícone de chevron que será apenas uma pequena flecha depois de ler mais.

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

136
00:10:07,380 --> 00:10:09,040
Muitas coisas que adicionamos em.

137
00:10:09,070 --> 00:10:10,680
Certifique-se de que tudo

138
00:10:10,750 --> 00:10:18,880
está bem e definitivamente, apenas dê uma olhada no código da solução se você não quiser tirar isso do zero.

139
00:10:18,880 --> 00:10:20,470
Vamos ver como está procurando por você não tem erros de sintaxe.

140
00:10:20,710 --> 00:10:25,360
Isso ou vamos exatamente o que estamos procurando.

141
00:10:27,310 --> 00:10:30,570
Então, estamos truncando os primeiros 100 caracteres naquele ou tantos personagens como existem nesta publicação.

142
00:10:30,580 --> 00:10:37,550
Nesse caso, clique rapidamente em mais informações sobre o link que nos leva à página do show.

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

144
00:10:43,690 --> 00:10:47,760
Nós temos suas imagens aqui.

145
00:10:47,760 --> 00:10:49,170
Depois de linhas

146
00:10:49,210 --> 00:10:57,370
divididas, temos o nosso Hetter, temos esse segmento em torno de tudo e acabamos praticamente.

147
00:10:57,380 --> 00:10:57,910
Então, novamente, não sintamos que definitivamente não sentimos que você tenha que saber todas essas classes.

148
00:10:58,210 --> 00:11:04,060
Eu simplesmente fiz.

149
00:11:04,060 --> 00:11:04,940
Você sabe que os deu a você.

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

151
00:11:06,130 --> 00:11:07,380
Porque um ponto não é que você aprenda tudo isso.

152
00:11:07,510 --> 00:11:10,660
Mas se você quiser saber mais e ir para Dashi semântico, por que dotcom.

153
00:11:11,080 --> 00:11:14,670
Há muitos bons tutoriais e recursos.

154
00:11:14,690 --> 00:11:17,200
Ainda não é tão utilizado como bootstrap, mas definitivamente está crescendo.

155
00:11:17,260 --> 00:11:21,270
Tenho notado que muitos dos meus alunos encontrariam isso sozinhos.

156
00:11:21,400 --> 00:11:24,770
Considerando que, no passado, gostaria de apresentá-los depois do bluechis

157
00:11:24,880 --> 00:11:30,700
na maioria das duas aulas mais recentes que eu ensinei aos alunos, muito rapidamente se apaixonaram por

158
00:11:30,700 --> 00:11:35,860
isso sem que eu nunca mostrasse isso para eles e acabaram por usá-lo no bootstrap.

159
00:11:35,870 --> 00:11:37,430
A maioria dos estudantes, mas totalmente para você.

160
00:11:37,630 --> 00:11:40,800
Eu gostei de ambos e o bootstrap é definitivamente mais popular por enquanto.

161
00:11:40,880 --> 00:11:45,300
Ok, então a última coisa que mencionei é que refatoremos nossa tabela apenas um pouco.

162
00:11:45,340 --> 00:11:50,780
E tudo o que eu quero fazer é adicionar uma coluna

163
00:11:50,920 --> 00:11:56,470
final para o método de mangusto que corresponde a cada um desses.

164
00:11:56,470 --> 00:11:57,140
Então, procure por id encontrar por 80 uma atualização encontrada por id add remove e assim por diante.

165
00:11:57,400 --> 00:12:03,510
Eu vou ser uma revisão rápida de como as tabelas funcionam.

166
00:12:03,860 --> 00:12:06,100
Então, aqui está um gráfico que envelhece

167
00:12:06,110 --> 00:12:15,590
o montante que precisamos adicionar em outro e chamaremos esse método de mangustão e vamos abrir a pré-visualização de uma amostra de culinária e movê-la para o fundo aqui.

168
00:12:16,930 --> 00:12:24,540
Há nossa mesa ou novo th.

169
00:12:24,750 --> 00:12:27,150
E, em seguida, para o índice, vamos adicionar uma TV no método de mangusto lá para que o cão deve encontrar cachorro.

170
00:12:27,460 --> 00:12:36,450
Ai está.

171
00:12:36,880 --> 00:12:38,230
Em seguida, temos um novo que na verdade não tem um método monkish.

172
00:12:38,230 --> 00:12:43,400
Então, em vez de deixá-lo em branco, vou colocar um arquivo que ele faz é renderizar um formulário.

173
00:12:43,450 --> 00:12:50,890
Em seguida, criamos e criamos vamos criar um cachorro.

174
00:12:51,130 --> 00:12:59,330
E uma característica muito legal se você fizer essa visualização de vida é como uma edição MIDI, veio

175
00:13:01,150 --> 00:13:07,760
perceber que isso me mostra quando eu estou selecionando aqui o que é muito legal.

176
00:13:07,750 --> 00:13:12,040
Então, você nem precisa abrir o inspetor e ver apenas ao vivo.

177
00:13:12,190 --> 00:13:15,920
E se eles mudam as coisas que atualizam ao vivo também, sem ter que salvar ou atualizar a página.

178
00:13:16,120 --> 00:13:21,900
ESTÁ BEM.

179
00:13:22,420 --> 00:13:22,820
Então, temos um show que faz um cachorro que encontra por identificação, então nós o temos.

180
00:13:22,930 --> 00:13:31,900
O que também faz um cão ser multado por ID.

181
00:13:32,260 --> 00:13:35,400
Nós temos que encontrar o cachorro que estamos

182
00:13:35,710 --> 00:13:44,830
editando e isso é para o formulário e, em seguida, atualiza um cachorro que foi triado por id e atualiza um longo.

183
00:13:44,830 --> 00:13:49,880
E ele também é um cão um pouco longo, achado por id e remove todos os rumos.

184
00:13:50,360 --> 00:14:00,830
Vamos dar uma olhada.

185
00:14:01,300 --> 00:14:02,300
Aqui está a nossa mesa.

186
00:14:02,620 --> 00:14:04,250
Parece que eu excluiu acidentalmente um

187
00:14:04,380 --> 00:14:12,410
dos CDs aqui, o que é suposto para exibir o que a atualização faz para atualizar, é suposto atualizar o cachorrinho do cachorro do cão, então redirecionar em algum lugar.

188
00:14:12,670 --> 00:14:23,150
Tudo bem.

189
00:14:24,150 --> 00:14:24,860
Agora devemos voltar ao normal.

190
00:14:25,150 --> 00:14:26,430
Aqui está a nossa mesa.

191
00:14:26,480 --> 00:14:28,220
Então, o único que não possui nenhum método de mangusto.

192
00:14:28,210 --> 00:14:31,740
Vai ser novo porque o novo não está encontrando nada no banco de dados, não está adicionando nada.

193
00:14:31,960 --> 00:14:37,390
Isso apenas nos torna um formulário.

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

195
00:14:40,210 --> 00:14:40,570
Então, espero que isso seja útil para você no futuro pode se referir a esta tabela.

196
00:14:40,570 --> 00:14:44,580
Eu vou me referir a ele certamente cobre uma

197
00:14:44,870 --> 00:14:49,150
grande quantidade de informações importantes que vamos usar muito.

198
00:14:49,150 --> 00:14:50,290
Tudo bem.

199
00:14:50,290 --> 00:14:50,860
Então, terminamos isso agora, conseguimos avançar para algumas coisas mais divertidas, algumas aplicações mais complicadas.

200
00:14:50,980 --> 00:14:56,280
Eu notei que havia um pouco de América coberto muito.

201
00:14:56,360 --> 00:14:59,980
É sempre difícil de fazer.

202
00:15:00,040 --> 00:15:01,710
Interessante porque apenas uma grande quantidade de informações.

203
00:15:01,710 --> 00:15:03,870
Mas, mas é importante que

204
00:15:03,880 --> 00:15:11,170
essa credibilidade seja capaz de criar atualizações de leitura e excluir uma entidade que leva muitos envoltórios.

205
00:15:11,170 --> 00:15:12,380
Tudo bem.

206
00:15:12,380 --> 00:15:12,810
Eu o vejo no próximo ano.

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