1
00:00:01,450 --> 00:00:03,480
‫Istruttore: Quindi in

2
00:00:03,480 --> 00:00:07,408
‫questo video impareremo come analizzare alcune variabili

3
00:00:07,408 --> 00:00:11,563
‫dall'URL per poter costruire la pagina del prodotto.

4
00:00:13,320 --> 00:00:15,690
‫Quindi ricorda come all'inizio

5
00:00:15,690 --> 00:00:18,733
‫ho importato il modulo URL,

6
00:00:20,120 --> 00:00:22,080
‫quindi questo

7
00:00:22,080 --> 00:00:26,663
‫qui, per poter analizzare le variabili direttamente dall'URL.

8
00:00:28,420 --> 00:00:33,420
‫Va bene. Quindi, come primo passo,

9
00:00:34,040 --> 00:00:35,990
‫registriamo ancora

10
00:00:38,100 --> 00:00:42,080
‫una volta "req. url" alla console e

11
00:00:44,250 --> 00:00:47,970
‫poi un'altra cosa che voglio registrare è in realtà...

12
00:00:51,070 --> 00:00:55,843
‫il risultato dell'utilizzo di "url. parse" su questo URL.

13
00:00:58,780 --> 00:01:03,290
‫Quindi, ancora una volta, l'analisi è fondamentalmente l'analisi

14
00:01:03,290 --> 00:01:05,703
‫delle variabili dall'URL.

15
00:01:06,710 --> 00:01:08,590
‫Quindi, qualcosa del genere.

16
00:01:08,590 --> 00:01:13,410
‫Quindi, quello che vogliamo è "id = 0", giusto, perché in

17
00:01:13,410 --> 00:01:17,970
‫questo momento, il "req. url" è tutto questo, quindi

18
00:01:17,970 --> 00:01:19,480
‫l'intero URL

19
00:01:19,480 --> 00:01:22,310
‫e, naturalmente, non abbiamo alcun

20
00:01:22,310 --> 00:01:24,190
‫percorso per quello.

21
00:01:24,190 --> 00:01:29,190
‫Quindi niente qui in questo tipo di router che abbiamo qui,

22
00:01:30,510 --> 00:01:33,750
‫in realtà corrisponde a questo intero URL.

23
00:01:33,750 --> 00:01:35,797
‫Ecco perché otteniamo "Pagina non trovata! "E quindi

24
00:01:36,910 --> 00:01:40,663
‫è anche per questo che dobbiamo cambiare alcune cose qui.

25
00:01:43,240 --> 00:01:46,620
‫Ok, fammi analizzare l'URL qui, in modo che tu

26
00:01:46,620 --> 00:01:48,380
‫possa dare un'occhiata al

27
00:01:48,380 --> 00:01:51,090
‫risultato per vedere cosa dobbiamo fare dopo.

28
00:01:51,090 --> 00:01:54,800
‫Ho anche bisogno di passare "true" qui in questa funzione di

29
00:01:54,800 --> 00:01:58,430
‫analisi per analizzare effettivamente la query in un oggetto.

30
00:01:58,430 --> 00:02:02,260
‫Quindi, con query, intendo questa parte qui.

31
00:02:02,260 --> 00:02:05,163
‫Ok, questa si chiama stringa di query,

32
00:02:06,270 --> 00:02:10,480
‫va bene, e questo è ciò che stiamo effettivamente analizzando,

33
00:02:10,480 --> 00:02:12,363
‫quella parte dell'URL.

34
00:02:14,260 --> 00:02:15,600
‫Quindi riavvialo

35
00:02:17,810 --> 00:02:21,463
‫e diamo un'occhiata ai log che otteniamo.

36
00:02:23,490 --> 00:02:26,420
‫Quindi, il primo è il "req. url" e questo

37
00:02:26,420 --> 00:02:29,510
‫è quello che ci aspettavamo, giusto, ed ecco

38
00:02:29,510 --> 00:02:33,133
‫il risultato del fare "url. parse" Quindi

39
00:02:34,810 --> 00:02:38,030
‫otteniamo l'oggetto query qui, e quindi

40
00:02:38,030 --> 00:02:41,130
‫qui abbiamo un bell'oggetto che

41
00:02:41,130 --> 00:02:44,760
‫ci dice che id è 0,

42
00:02:44,760 --> 00:02:46,950
‫giusto, quindi è bellissimo.

43
00:02:46,950 --> 00:02:49,400
‫E poi, proprio sotto, abbiamo il

44
00:02:49,400 --> 00:02:51,620
‫secondo pezzo di cui abbiamo

45
00:02:51,620 --> 00:02:55,380
‫bisogno, che è solo il nome del percorso, ok.

46
00:02:55,380 --> 00:02:58,183
‫Quindi, il nostro percorso utilizza questo

47
00:02:58,183 --> 00:03:02,000
‫percorso, quindi solo "/product" e quindi abbiamo bisogno di conoscere

48
00:03:02,000 --> 00:03:05,810
‫la query per rispondere di conseguenza all'id di 0.

49
00:03:05,810 --> 00:03:07,670
‫Quindi in questo caso,

50
00:03:07,670 --> 00:03:11,063
‫ad esempio, caricando il prodotto avocado, che è il primo.

51
00:03:11,959 --> 00:03:14,440
‫Ma se fosse il

52
00:03:14,440 --> 00:03:19,070
‫numero due, per esempio, allora caricare questo broccolo, giusto.

53
00:03:19,070 --> 00:03:21,770
‫E quindi questa query e questo percorso sono

54
00:03:21,770 --> 00:03:23,943
‫ciò che useremo per farlo.

55
00:03:25,860 --> 00:03:29,740
‫Quindi, questo non ci serve più.

56
00:03:29,740 --> 00:03:33,010
‫Inoltre, non vogliamo registrare nulla sulla console ora

57
00:03:33,010 --> 00:03:35,530
‫perché ciò che vogliamo fare

58
00:03:35,530 --> 00:03:38,630
‫invece è creare due variabili, chiamate query

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

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

61
00:03:43,150 --> 00:03:46,903
‫E possiamo farlo usando gli stack, la strutturazione.

62
00:03:49,200 --> 00:03:51,560
‫Quindi, di nuovo, spero che

63
00:03:51,560 --> 00:03:56,560
‫tu abbia familiarità con questa sintassi qui, ed è così che funziona effettivamente.

64
00:03:57,380 --> 00:04:02,380
‫Quindi, questo oggetto qui ha query e pathName.

65
00:04:02,780 --> 00:04:04,880
‫Quindi, usando questa struttura

66
00:04:04,880 --> 00:04:07,521
‫in questo modo, con questi nomi esatti

67
00:04:07,521 --> 00:04:10,050
‫di proprietà, in realtà deve essere così.

68
00:04:10,050 --> 00:04:12,150
‫Quindi con questi due

69
00:04:12,150 --> 00:04:15,000
‫nomi di proprietà esatti, creerà queste

70
00:04:15,000 --> 00:04:18,254
‫due variabili, una chiamata query e una

71
00:04:18,254 --> 00:04:22,230
‫chiamata percorso, con esattamente i valori che abbiamo qui.

72
00:04:22,230 --> 00:04:24,300
‫Quindi la query sarà

73
00:04:24,300 --> 00:04:28,113
‫questa e il percorso sarà "/product", in questo caso.

74
00:04:29,580 --> 00:04:31,880
‫Grande. Ora tutto quello che

75
00:04:31,880 --> 00:04:34,733
‫devo fare è andare avanti e sostituire questo qui con questo.

76
00:04:41,370 --> 00:04:42,203
‫Va bene.

77
00:04:45,572 --> 00:04:47,100
‫Eliminiamo questo e,

78
00:04:47,100 --> 00:04:51,080
‫solo per assicurarci, registriamo effettivamente la query sulla console nel

79
00:04:51,080 --> 00:04:53,933
‫caso in cui siamo sulla pagina del prodotto.

80
00:04:55,597 --> 00:04:59,373
‫"consolare. log" l'oggetto della query.

81
00:05:05,070 --> 00:05:07,800
‫E ora, siamo tornati a trovare la

82
00:05:10,110 --> 00:05:13,360
‫pagina e dobbiamo anche interrogare con questo ID 0.

83
00:05:13,360 --> 00:05:15,350
‫Così perfetta. Quindi ora siamo

84
00:05:15,350 --> 00:05:18,350
‫pronti per costruire effettivamente questa pagina usando il nostro modello.

85
00:05:18,350 --> 00:05:19,923
‫E dovrebbe essere

86
00:05:19,923 --> 00:05:23,710
‫molto semplice, in realtà molto più semplice della pagina panoramica,

87
00:05:23,710 --> 00:05:25,480
‫perché qui non dobbiamo

88
00:05:25,480 --> 00:05:28,000
‫fare nessuno di questi pazzi loop

89
00:05:28,000 --> 00:05:30,500
‫qui perché c'è un modello semplice,

90
00:05:30,500 --> 00:05:33,543
‫tutto ciò che dobbiamo fare è sostituire tutto.

91
00:05:36,040 --> 00:05:39,860
‫Quindi, nel primo passaggio, cerchiamo di capire quale

92
00:05:39,860 --> 00:05:42,903
‫è il prodotto che vogliamo visualizzare.

93
00:05:46,910 --> 00:05:50,130
‫Quindi sto creando una variabile chiamata

94
00:05:50,130 --> 00:05:54,080
‫prodotto e che sarà uguale all'oggetto dati nella

95
00:05:56,770 --> 00:06:00,827
‫posizione "query. ID. "Va

96
00:06:02,680 --> 00:06:04,080
‫bene, ha senso?

97
00:06:04,080 --> 00:06:06,570
‫Quindi l'oggetto dati è un

98
00:06:06,570 --> 00:06:09,950
‫array e quindi recupereremo l'elemento nella posizione che

99
00:06:09,950 --> 00:06:13,010
‫proviene dalla query. ID.

100
00:06:13,010 --> 00:06:15,130
‫Quindi, se è zero, allora è

101
00:06:15,130 --> 00:06:17,663
‫l'elemento zero, se è due, è l'elemento numero due.

102
00:06:19,170 --> 00:06:21,389
‫Ok, quindi questo è il

103
00:06:21,389 --> 00:06:26,389
‫modo più semplice per recuperare un elemento basato su una stringa di query.

104
00:06:26,520 --> 00:06:28,120
‫Ora un'altra cosa

105
00:06:28,120 --> 00:06:32,493
‫che dobbiamo fare è ottenere questa identica testa qui, ok, e

106
00:06:36,800 --> 00:06:39,990
‫alla fine creiamo semplicemente il nostro output.

107
00:06:43,196 --> 00:06:46,279
‫Quindi, l'output è semplicemente replaceTemplate e

108
00:06:49,383 --> 00:06:51,898
‫l'HTML che dobbiamo passare

109
00:06:51,898 --> 00:06:55,981
‫è il tempOverview, o in realtà il tempProduct, e

110
00:06:58,340 --> 00:07:01,257
‫ciò che passiamo è il prodotto.

111
00:07:03,960 --> 00:07:05,003
‫E questo è tutto!

112
00:07:08,230 --> 00:07:12,330
‫Ora inviamo semplicemente l'output come risultato, o come risposta

113
00:07:12,330 --> 00:07:15,850
‫in realtà, e questo è tutto.

114
00:07:15,850 --> 00:07:18,900
‫Quindi questa parte qui ha senso, giusto?

115
00:07:18,900 --> 00:07:22,550
‫Quindi, ancora una volta, replaceTemplate si aspetta che

116
00:07:22,550 --> 00:07:25,513
‫inseriamo un modello e un prodotto.

117
00:07:26,350 --> 00:07:30,223
‫Quindi un prodotto è un oggetto con tutte queste proprietà.

118
00:07:31,250 --> 00:07:33,610
‫E così quel prodotto arriva qui proprio

119
00:07:33,610 --> 00:07:35,223
‫da questo oggetto dati.

120
00:07:36,720 --> 00:07:40,463
‫Quindi in replaceTemplate, passiamo il prodotto modello,

121
00:07:41,670 --> 00:07:45,140
‫quindi questo, che abbiamo caricato dal

122
00:07:45,140 --> 00:07:48,703
‫file proprio all'inizio, e poi il prodotto.

123
00:07:49,760 --> 00:07:53,920
‫Come ho detto, ovviamente, quello proveniente dall'array.

124
00:07:53,920 --> 00:07:56,450
‫E quindi dovrebbe essere così.

125
00:07:56,450 --> 00:07:58,560
‫Quindi, se il modello è

126
00:07:58,560 --> 00:08:00,640
‫corretto, dovrebbe funzionare ora.

127
00:08:00,640 --> 00:08:02,763
‫Quindi, riavviando il server,

128
00:08:04,000 --> 00:08:05,229
‫ricarichiamolo,

129
00:08:05,229 --> 00:08:07,673
‫e infatti, ci siamo.

130
00:08:08,760 --> 00:08:11,810
‫Quindi, è fantastico, questo mi rende

131
00:08:11,810 --> 00:08:14,609
‫davvero felice, quando questo genere

132
00:08:14,609 --> 00:08:18,633
‫di cose funziona così, bello, tutto è perfetto.

133
00:08:19,930 --> 00:08:24,020
‫Anche questo pulsante indietro, oh, non funziona.

134
00:08:24,020 --> 00:08:29,020
‫Va bene. Quindi abbiamo bisogno di cambiare il modello HTML qui.

135
00:08:30,490 --> 00:08:34,703
‫Allora dov'è? È nel prodotto,

136
00:08:35,660 --> 00:08:39,490
‫e questo link qui, dov'è, ah.

137
00:08:39,490 --> 00:08:42,440
‫Sì, sostanzialmente non punta da nessuna

138
00:08:42,440 --> 00:08:46,347
‫parte, e quello che vogliamo è tornare alla panoramica, giusto.

139
00:08:50,460 --> 00:08:53,933
‫Riavvia il server, ricarica questa pagina

140
00:08:55,110 --> 00:08:57,543
‫e ora funziona.

141
00:08:59,200 --> 00:09:01,940
‫Proviamo senza il cerotto organico, e

142
00:09:01,940 --> 00:09:03,910
‫infatti, non è qui.

143
00:09:03,910 --> 00:09:05,970
‫Prima lo era, e ora non c'è più.

144
00:09:05,970 --> 00:09:07,900
‫E tutta questa roba qui

145
00:09:07,900 --> 00:09:12,803
‫ovviamente è dinamica proveniente da quel file JSON. Sì.

146
00:09:15,090 --> 00:09:17,650
‫Quindi tutto questo funziona. Bellissimo.

147
00:09:17,650 --> 00:09:20,160
‫È davvero fantastico.

148
00:09:20,160 --> 00:09:25,150
‫E il nostro progetto, ora possiamo dire, è effettivamente finito.

149
00:09:25,150 --> 00:09:28,450
‫Solo un'altra piccola cosa che voglio fare,

150
00:09:28,450 --> 00:09:32,740
‫che è solo per mostrarti una cosa carina che possiamo fare.

151
00:09:32,740 --> 00:09:35,740
‫Ma oltre a questo, il nostro progetto sta funzionando.

152
00:09:35,740 --> 00:09:39,135
‫Quindi congratulazioni, hai appena finito il tuo

153
00:09:39,135 --> 00:09:43,430
‫primo nodo davvero interessante. progetto js.

154
00:09:43,430 --> 00:09:45,520
‫E non è stato così difficile, vero?

155
00:09:45,520 --> 00:09:47,550
‫Voglio dire, alcune delle

156
00:09:47,550 --> 00:09:52,550
‫cose che abbiamo fatto sono più legate alla programmazione JavaScript in generale,

157
00:09:52,670 --> 00:09:56,910
‫e non tanto al nodo. js stesso, giusto?

158
00:09:56,910 --> 00:10:01,370
‫Quindi cose come questa qui, che forse erano un po 'confuse, ma di

159
00:10:01,370 --> 00:10:04,180
‫nuovo alla fine della giornata si tratta

160
00:10:04,180 --> 00:10:07,010
‫solo di JavaScript normale in realtà, non è vero?

161
00:10:07,010 --> 00:10:09,060
‫Quindi di nuovo, la funzionalità c'è,

162
00:10:09,060 --> 00:10:11,740
‫c'è solo un'altra piccola cosa che voglio

163
00:10:11,740 --> 00:10:15,283
‫fare nel prossimo video e quando raggiungerai quella, ti dirò

164
00:10:15,283 --> 00:10:17,083
‫di cosa si tratta.