1
00:00:01,450 --> 00:00:03,480
‫Instrutor: Neste vídeo,

2
00:00:03,480 --> 00:00:07,408
‫vamos aprender como analisar algumas variáveis da

3
00:00:07,408 --> 00:00:11,563
‫URL para poder construir a página do produto.

4
00:00:13,320 --> 00:00:15,690
‫Portanto, lembre-se de como

5
00:00:15,690 --> 00:00:18,733
‫logo no início importei o

6
00:00:20,120 --> 00:00:22,080
‫módulo de URL,

7
00:00:22,080 --> 00:00:26,663
‫este aqui, para poder analisar variáveis diretamente da URL.

8
00:00:28,420 --> 00:00:33,420
‫OK. Portanto, como primeiro passo, vamos

9
00:00:34,040 --> 00:00:35,990
‫realmente registrar

10
00:00:38,100 --> 00:00:42,080
‫mais uma vez "req. url "para o console e,

11
00:00:44,250 --> 00:00:47,970
‫em seguida, outra coisa que eu quero registrar é realmente ...

12
00:00:51,070 --> 00:00:55,843
‫o resultado do uso de "url. parse "neste URL.

13
00:00:58,780 --> 00:01:03,290
‫Portanto, novamente, analisar é basicamente analisar as variáveis

14
00:01:03,290 --> 00:01:05,703
‫fora da URL.

15
00:01:06,710 --> 00:01:08,590
‫Então, algo assim.

16
00:01:08,590 --> 00:01:13,410
‫Então, o que queremos é "id = 0," certo,

17
00:01:13,410 --> 00:01:17,970
‫porque agora, o "req. url "é tudo isso, então

18
00:01:17,970 --> 00:01:19,480
‫toda a

19
00:01:19,480 --> 00:01:22,310
‫URL e, claro, não temos nenhuma

20
00:01:22,310 --> 00:01:24,190
‫rota para isso.

21
00:01:24,190 --> 00:01:29,190
‫Portanto, nada neste tipo de roteador que temos aqui

22
00:01:30,510 --> 00:01:33,750
‫corresponde a todo este URL.

23
00:01:33,750 --> 00:01:35,797
‫É por isso que obtemos "Página não encontrada! "E é

24
00:01:36,910 --> 00:01:40,663
‫também por isso que precisamos mudar algumas coisas aqui.

25
00:01:43,240 --> 00:01:46,620
‫Ok, deixe-me analisar o URL aqui, para que você possa

26
00:01:46,620 --> 00:01:48,380
‫dar uma olhada no resultado

27
00:01:48,380 --> 00:01:51,090
‫e ver o que precisamos fazer a seguir.

28
00:01:51,090 --> 00:01:54,800
‫Também preciso passar "true" aqui para esta função de análise

29
00:01:54,800 --> 00:01:58,430
‫para realmente analisar a consulta em um objeto.

30
00:01:58,430 --> 00:02:02,260
‫Então, com consulta, quero dizer essa parte aqui.

31
00:02:02,260 --> 00:02:05,163
‫Ok, isso é chamado de string de

32
00:02:06,270 --> 00:02:10,480
‫consulta, certo, e é isso que estamos analisando efetivamente, essa

33
00:02:10,480 --> 00:02:12,363
‫parte da URL.

34
00:02:14,260 --> 00:02:15,600
‫Reinicie-o e

35
00:02:17,810 --> 00:02:21,463
‫vamos dar uma olhada nos logs que obtemos.

36
00:02:23,490 --> 00:02:26,420
‫Portanto, o primeiro é o "req. url "e isso é

37
00:02:26,420 --> 00:02:29,510
‫o que a gente esperava, certo, e aqui está

38
00:02:29,510 --> 00:02:33,133
‫o resultado de fazer" url. parse "Então,

39
00:02:34,810 --> 00:02:38,030
‫obtemos o objeto de consulta aqui,

40
00:02:38,030 --> 00:02:41,130
‫e aqui, temos um bom objeto

41
00:02:41,130 --> 00:02:44,760
‫que nos diz que id é 0,

42
00:02:44,760 --> 00:02:46,950
‫certo, isso é lindo.

43
00:02:46,950 --> 00:02:49,400
‫E então, logo abaixo disso, temos

44
00:02:49,400 --> 00:02:51,620
‫a segunda peça de que

45
00:02:51,620 --> 00:02:55,380
‫precisamos, que é apenas o nome do caminho, ok.

46
00:02:55,380 --> 00:02:58,183
‫Então, nossa rota está usando esse nome

47
00:02:58,183 --> 00:03:02,000
‫de caminho, então basta "/ produto" e então precisamos saber

48
00:03:02,000 --> 00:03:05,810
‫a consulta para responder de acordo com o id 0.

49
00:03:05,810 --> 00:03:07,670
‫Então nesse caso, por

50
00:03:07,670 --> 00:03:11,063
‫exemplo, carregar o produto abacate, que é o primeiro.

51
00:03:11,959 --> 00:03:14,440
‫Mas se fosse o

52
00:03:14,440 --> 00:03:19,070
‫número dois, por exemplo, aí carregando esse brócolis, certo.

53
00:03:19,070 --> 00:03:21,770
‫E então essa consulta e esse nome de caminho é

54
00:03:21,770 --> 00:03:23,943
‫o que vamos usar para fazer isso.

55
00:03:25,860 --> 00:03:29,740
‫Então, esse nós não precisamos mais.

56
00:03:29,740 --> 00:03:33,010
‫Também não queremos registrar nada no console agora

57
00:03:33,010 --> 00:03:35,530
‫porque o que queremos fazer

58
00:03:35,530 --> 00:03:38,630
‫é criar duas variáveis, chamadas de consulta

59
00:03:39,690 --> 00:03:40,723
‫e ...

60
00:03:41,679 --> 00:03:43,150
‫pathName.

61
00:03:43,150 --> 00:03:46,903
‫E podemos fazer isso usando as pilhas, a estruturação.

62
00:03:49,200 --> 00:03:51,560
‫Portanto, novamente, espero que você

63
00:03:51,560 --> 00:03:56,560
‫esteja familiarizado com essa sintaxe aqui, e é assim que ela realmente funciona.

64
00:03:57,380 --> 00:04:02,380
‫Então, esse objeto aqui, ele tem query e pathName.

65
00:04:02,780 --> 00:04:04,880
‫Então, usando essa estrutura

66
00:04:04,880 --> 00:04:07,521
‫como essa, com esses nomes de propriedade

67
00:04:07,521 --> 00:04:10,050
‫exatos, na verdade tem que ser assim.

68
00:04:10,050 --> 00:04:12,150
‫Assim, com esses dois

69
00:04:12,150 --> 00:04:15,000
‫nomes exatos de propriedade, ele criará essas

70
00:04:15,000 --> 00:04:18,254
‫duas variáveis, uma chamada consulta e outra chamada

71
00:04:18,254 --> 00:04:22,230
‫nome do caminho, exatamente com os valores que temos aqui.

72
00:04:22,230 --> 00:04:24,300
‫Portanto, a consulta será esta,

73
00:04:24,300 --> 00:04:28,113
‫e o nome do caminho será "/ produto", neste caso.

74
00:04:29,580 --> 00:04:31,880
‫Excelente. Agora tudo o que

75
00:04:31,880 --> 00:04:34,733
‫tenho a fazer é ir em frente e substituir este aqui por este.

76
00:04:41,370 --> 00:04:42,203
‫Tudo bem.

77
00:04:45,572 --> 00:04:47,100
‫Vamos deletar este

78
00:04:47,100 --> 00:04:51,080
‫e, apenas para ter certeza, vamos realmente registrar a consulta

79
00:04:51,080 --> 00:04:53,933
‫no console, caso estejamos na página do produto.

80
00:04:55,597 --> 00:04:59,373
‫"console. log "o objeto de consulta.

81
00:05:05,070 --> 00:05:07,800
‫E agora, voltamos a encontrar a página

82
00:05:10,110 --> 00:05:13,360
‫e também temos que consultar com este id 0.

83
00:05:13,360 --> 00:05:15,350
‫Tão perfeito. Portanto, agora

84
00:05:15,350 --> 00:05:18,350
‫estamos prontos para realmente construir esta página usando nosso modelo.

85
00:05:18,350 --> 00:05:19,923
‫E isso deve

86
00:05:19,923 --> 00:05:23,710
‫ser muito simples, na verdade muito mais simples do que a

87
00:05:23,710 --> 00:05:25,480
‫página de visão geral, porque

88
00:05:25,480 --> 00:05:28,000
‫aqui não temos que fazer nenhum desses

89
00:05:28,000 --> 00:05:30,500
‫loops malucos porque há um modelo simples,

90
00:05:30,500 --> 00:05:33,543
‫tudo o que temos que fazer é substituir tudo.

91
00:05:36,040 --> 00:05:39,860
‫Portanto, na primeira etapa, vamos descobrir qual é

92
00:05:39,860 --> 00:05:42,903
‫o produto que queremos exibir.

93
00:05:46,910 --> 00:05:50,130
‫Então estou criando uma variável chamada product, e

94
00:05:50,130 --> 00:05:54,080
‫que vai ser igual ao objeto de dados na

95
00:05:56,770 --> 00:06:00,827
‫posição "query. identificação. "Ok,

96
00:06:02,680 --> 00:06:04,080
‫faz sentido?

97
00:06:04,080 --> 00:06:06,570
‫Portanto, o objeto de dados é uma

98
00:06:06,570 --> 00:06:09,950
‫matriz e, então, recuperaremos o elemento na posição que

99
00:06:09,950 --> 00:06:13,010
‫vem da consulta. identificação.

100
00:06:13,010 --> 00:06:15,130
‫Então, se for zero, então é o

101
00:06:15,130 --> 00:06:17,663
‫elemento zero, se for dois, é o elemento número dois.

102
00:06:19,170 --> 00:06:21,389
‫Ok, esta é a maneira

103
00:06:21,389 --> 00:06:26,389
‫mais simples de recuperar um elemento com base em uma string de consulta.

104
00:06:26,520 --> 00:06:28,120
‫Agora, outra coisa

105
00:06:28,120 --> 00:06:32,493
‫que precisamos fazer é obter exatamente o mesmo Head aqui,

106
00:06:36,800 --> 00:06:39,990
‫ok, e, finalmente, simplesmente criamos nossa saída.

107
00:06:43,196 --> 00:06:46,279
‫Portanto, a saída é simplesmente replaceTemplate, e

108
00:06:49,383 --> 00:06:51,898
‫o HTML que precisamos passar

109
00:06:51,898 --> 00:06:55,981
‫é o tempOverview, ou na verdade o tempProduct, e

110
00:06:58,340 --> 00:07:01,257
‫o que passamos é o produto.

111
00:07:03,960 --> 00:07:05,003
‫E é isso!

112
00:07:08,230 --> 00:07:12,330
‫Agora, apenas enviamos a saída como resultado, ou como

113
00:07:12,330 --> 00:07:15,850
‫uma resposta na verdade, e é isso.

114
00:07:15,850 --> 00:07:18,900
‫Então, essa parte aqui faz sentido, certo?

115
00:07:18,900 --> 00:07:22,550
‫Portanto, novamente, replaceTemplate espera que incluamos um

116
00:07:22,550 --> 00:07:25,513
‫modelo e um produto.

117
00:07:26,350 --> 00:07:30,223
‫Portanto, um produto é um objeto com todas essas propriedades.

118
00:07:31,250 --> 00:07:33,610
‫E então esse produto vem direto

119
00:07:33,610 --> 00:07:35,223
‫desse objeto de dados.

120
00:07:36,720 --> 00:07:40,463
‫Então, em replaceTemplate, passamos o produto do

121
00:07:41,670 --> 00:07:45,140
‫modelo, este, que carregamos do arquivo

122
00:07:45,140 --> 00:07:48,703
‫logo no início, e depois o produto.

123
00:07:49,760 --> 00:07:53,920
‫Como mencionei, é claro, aquele que vem da matriz.

124
00:07:53,920 --> 00:07:56,450
‫E então deve ser isso.

125
00:07:56,450 --> 00:07:58,560
‫Portanto, se o modelo estiver correto,

126
00:07:58,560 --> 00:08:00,640
‫isso deve estar funcionando agora.

127
00:08:00,640 --> 00:08:02,763
‫Então, reiniciando o servidor,

128
00:08:04,000 --> 00:08:05,229
‫vamos recarregá-lo

129
00:08:05,229 --> 00:08:07,673
‫e, de fato, vamos lá.

130
00:08:08,760 --> 00:08:11,810
‫Então, isso é ótimo, isso me

131
00:08:11,810 --> 00:08:14,609
‫deixa muito feliz, quando esse

132
00:08:14,609 --> 00:08:18,633
‫tipo de coisa funciona assim, lindo, tudo é perfeito.

133
00:08:19,930 --> 00:08:24,020
‫Além disso, este botão Voltar, oh, isso não funciona.

134
00:08:24,020 --> 00:08:29,020
‫OK. Portanto, precisamos alterar o modelo HTML aqui.

135
00:08:30,490 --> 00:08:34,703
‫Onde fica isso? Tá no produto,

136
00:08:35,660 --> 00:08:39,490
‫e esse link aqui, cadê isso, ah.

137
00:08:39,490 --> 00:08:42,440
‫Sim, basicamente não aponta para lugar nenhum,

138
00:08:42,440 --> 00:08:46,347
‫e o que queremos é voltar à visão geral, certo.

139
00:08:50,460 --> 00:08:53,933
‫Reinicie o servidor, recarregue esta página

140
00:08:55,110 --> 00:08:57,543
‫e agora, agora funciona.

141
00:08:59,200 --> 00:09:01,940
‫Vamos experimentar sem o patch orgânico e,

142
00:09:01,940 --> 00:09:03,910
‫de fato, não está aqui.

143
00:09:03,910 --> 00:09:05,970
‫Antes era, e agora se foi.

144
00:09:05,970 --> 00:09:07,900
‫E tudo isso aqui, é

145
00:09:07,900 --> 00:09:12,803
‫claro, é dinâmico vindo desse arquivo JSON. Sim.

146
00:09:15,090 --> 00:09:17,650
‫Então, tudo isso funciona. Lindo.

147
00:09:17,650 --> 00:09:20,160
‫Isso é realmente ótimo.

148
00:09:20,160 --> 00:09:25,150
‫E nosso projeto, podemos dizer agora, está realmente concluído.

149
00:09:25,150 --> 00:09:28,450
‫Só mais uma pequena coisa que quero fazer,

150
00:09:28,450 --> 00:09:32,740
‫que é apenas mostrar a vocês algo bom que podemos fazer.

151
00:09:32,740 --> 00:09:35,740
‫Mas, além disso, nosso projeto está funcionando.

152
00:09:35,740 --> 00:09:39,135
‫Então, parabéns, você acabou de terminar seu primeiro

153
00:09:39,135 --> 00:09:43,430
‫nó de aparência muito legal. projeto js.

154
00:09:43,430 --> 00:09:45,520
‫E não foi tão difícil, certo?

155
00:09:45,520 --> 00:09:47,550
‫Quer dizer, algumas das

156
00:09:47,550 --> 00:09:52,550
‫coisas que fizemos estão mais relacionadas à programação JavaScript em geral, e

157
00:09:52,670 --> 00:09:56,910
‫não tanto sobre o nó. em si, certo?

158
00:09:56,910 --> 00:10:01,370
‫Coisas assim aqui, que talvez fossem meio confusas, mas

159
00:10:01,370 --> 00:10:04,180
‫no final do dia isso

160
00:10:04,180 --> 00:10:07,010
‫é apenas JavaScript normal, não é?

161
00:10:07,010 --> 00:10:09,060
‫Então, novamente, a funcionalidade está lá,

162
00:10:09,060 --> 00:10:11,740
‫há apenas mais uma pequena coisa que

163
00:10:11,740 --> 00:10:15,283
‫quero fazer no próximo vídeo, e quando você chegar lá,

164
00:10:15,283 --> 00:10:17,083
‫direi o que é.