1 00:00:01,150 --> 00:00:02,170 ‫Istruttore: In questa 2 00:00:02,170 --> 00:00:05,883 ‫lezione, inizieremo a costruire davvero la pagina di panoramica del tour. 3 00:00:07,500 --> 00:00:09,170 ‫E ricorda che è 4 00:00:09,170 --> 00:00:11,900 ‫così che appare la pagina panoramica in questo momento. 5 00:00:11,900 --> 00:00:13,790 ‫Quindi non ha alcun contenuto 6 00:00:13,790 --> 00:00:16,860 ‫reale, ed è quello che aggiungeremo in questo video. 7 00:00:16,860 --> 00:00:19,740 ‫Quindi siamo qui in questo percorso di base, e 8 00:00:19,740 --> 00:00:22,803 ‫quindi di nuovo, è lì che sarà la panoramica, ok? 9 00:00:23,670 --> 00:00:25,210 ‫Quindi, dal nostro 10 00:00:25,210 --> 00:00:28,650 ‫punto di vista router, è ovviamente questo percorso, ok? 11 00:00:28,650 --> 00:00:30,650 ‫E quindi il controller che 12 00:00:30,650 --> 00:00:34,697 ‫si occupa del rendering di questa pagina è il controller getoverview, ok? 13 00:00:34,697 --> 00:00:37,650 ‫E quindi andiamo prima qui e disponiamo 14 00:00:37,650 --> 00:00:39,840 ‫i passaggi che faremo per 15 00:00:39,840 --> 00:00:41,373 ‫rendere questa pagina. 16 00:00:42,650 --> 00:00:44,950 ‫Quindi, la prima cosa che dobbiamo fare 17 00:00:44,950 --> 00:00:47,750 ‫è ottenere effettivamente tutti i dati del tour dalla 18 00:00:47,750 --> 00:00:49,273 ‫nostra raccolta, giusto? 19 00:00:51,120 --> 00:00:52,170 ‫Quindi ottieni i 20 00:00:54,740 --> 00:00:56,010 ‫dati del tour dalla raccolta. 21 00:00:56,010 --> 00:00:58,310 ‫Quindi in secondo luogo, costruiremo il nostro modello 22 00:01:00,290 --> 00:01:01,420 ‫e ovviamente non 23 00:01:01,420 --> 00:01:03,630 ‫lo faremo qui in questa funzione del controller. 24 00:01:03,630 --> 00:01:05,333 ‫Ma scriviamolo ancora qui. 25 00:01:06,800 --> 00:01:11,800 ‫Quindi, crea il modello e infine esegui il rendering di quel 26 00:01:14,210 --> 00:01:18,360 ‫modello, utilizzando i dati del tour dal passaggio uno. 27 00:01:18,360 --> 00:01:20,350 ‫Quindi, iniziando dal primo passaggio 28 00:01:20,350 --> 00:01:22,930 ‫qui, ottieni i dati del tour dalla raccolta, 29 00:01:22,930 --> 00:01:25,013 ‫il che significa che ovviamente dobbiamo 30 00:01:25,013 --> 00:01:27,413 ‫prima importare effettivamente il modello del tour. 31 00:01:31,100 --> 00:01:34,030 ‫Quindi, è qualcosa che abbiamo già fatto 32 00:01:34,030 --> 00:01:35,513 ‫molte volte prima. 33 00:01:36,490 --> 00:01:38,340 ‫Questo è in realtà un livello superiore, 34 00:01:38,340 --> 00:01:39,673 ‫e poi nei modelli. 35 00:01:41,390 --> 00:01:42,593 ‫e modello turistico. 36 00:01:45,300 --> 00:01:46,470 ‫E poi avremo 37 00:01:46,470 --> 00:01:48,163 ‫anche bisogno della funzione 38 00:01:51,240 --> 00:01:52,290 ‫catchAsync, perché 39 00:01:52,290 --> 00:01:55,513 ‫ovviamente questa panoramica di get diventerà una funzione asincrona. 40 00:02:04,190 --> 00:02:09,190 ‫Va bene, allora contrassegniamo questo come asincrono. 41 00:02:11,340 --> 00:02:14,120 ‫Ora abbiamo anche bisogno di next qui per far 42 00:02:14,120 --> 00:02:16,123 ‫funzionare effettivamente la funzione catchAsync. 43 00:02:22,690 --> 00:02:25,770 ‫Ok, quindi spero che ora inizi effettivamente a vedere il 44 00:02:25,770 --> 00:02:28,020 ‫valore di aver creato tutte le API 45 00:02:28,020 --> 00:02:29,850 ‫e tutti i codici 46 00:02:29,850 --> 00:02:33,380 ‫che abbiamo fatto fino a questo punto, in modo che tutto 47 00:02:33,380 --> 00:02:37,680 ‫ciò che dobbiamo fare ora è collegare davvero tutti questi pezzi insieme, ok? 48 00:02:37,680 --> 00:02:40,530 ‫Quindi, ora sappiamo già come fare tutte queste cose. 49 00:02:40,530 --> 00:02:44,060 ‫Abbiamo già il nostro modello di tour che funziona correttamente. 50 00:02:44,060 --> 00:02:46,033 ‫Quindi ora tutto questo è molto facile. 51 00:02:47,460 --> 00:02:51,880 ‫Quindi const tours è uguale ad aspettare. 52 00:02:51,880 --> 00:02:54,620 ‫Quindi, di nuovo, niente di nuovo a questo punto. 53 00:02:54,620 --> 00:02:58,423 ‫E trovali tutti fondamentalmente, va bene? 54 00:02:59,310 --> 00:03:01,700 ‫E ora cosa faremo effettivamente con 55 00:03:01,700 --> 00:03:03,960 ‫i dati di questo tour? 56 00:03:03,960 --> 00:03:06,510 ‫Bene, dovremo incollare tutti questi dati 57 00:03:06,510 --> 00:03:09,700 ‫del tour nel modello, in modo che possiamo effettivamente 58 00:03:09,700 --> 00:03:12,610 ‫utilizzarli e visualizzarli sul sito Web, giusto? 59 00:03:12,610 --> 00:03:14,910 ‫E quindi, in realtà è molto facile da fare. 60 00:03:14,910 --> 00:03:18,300 ‫Tutto ciò che dobbiamo fare è metterlo qui 61 00:03:18,300 --> 00:03:22,200 ‫in questo oggetto che verrà incollato nel modello di 62 00:03:22,200 --> 00:03:24,770 ‫panoramica in questo caso, ok? 63 00:03:24,770 --> 00:03:28,960 ‫Quindi, molto facile, tutto ciò che dobbiamo dire è tour. 64 00:03:28,960 --> 00:03:32,050 ‫Quindi, è lo stesso di tour uguale a tour e 65 00:03:32,050 --> 00:03:35,910 ‫di nuovo sai già che a partire da ES 6 è sufficiente 66 00:03:35,910 --> 00:03:37,460 ‫farlo in questo modo. 67 00:03:40,100 --> 00:03:42,810 ‫Ottimo, quindi ogni volta che ora c'è 68 00:03:42,810 --> 00:03:45,860 ‫una richiesta per la pagina panoramica, quindi in pratica 69 00:03:45,860 --> 00:03:49,290 ‫la nostra homepage del nostro sito Web reso dinamicamente, tutti i 70 00:03:49,290 --> 00:03:52,070 ‫dati del tour verranno recuperati dal nostro database 71 00:03:52,070 --> 00:03:55,210 ‫qui e quindi quei dati verranno incollati nel nostro modello. 72 00:03:55,210 --> 00:03:56,920 ‫E quindi ora tutto 73 00:03:56,920 --> 00:04:00,150 ‫ciò che dobbiamo fare è costruire effettivamente quel modello, giusto? 74 00:04:00,150 --> 00:04:03,560 ‫Quindi passiamo alla panoramica. carlino. 75 00:04:03,560 --> 00:04:08,270 ‫Qui possiamo effettivamente sbarazzarci di questo segnaposto h1 qui. 76 00:04:08,270 --> 00:04:10,410 ‫E ora voglio dare di 77 00:04:10,410 --> 00:04:12,683 ‫nuovo un'occhiata al file html statico qui. 78 00:04:13,950 --> 00:04:18,320 ‫Quindi, questo è nella cartella pubblica e 79 00:04:18,320 --> 00:04:22,120 ‫quindi nella panoramica. html, ok? 80 00:04:22,120 --> 00:04:24,370 ‫Quindi, abbiamo già costruito l'intestazione in 81 00:04:24,370 --> 00:04:26,000 ‫una delle lezioni precedenti 82 00:04:26,000 --> 00:04:29,780 ‫e quindi ora è il momento di costruire quella parte qui. 83 00:04:29,780 --> 00:04:31,670 ‫Ora, quando abbiamo creato il modello 84 00:04:31,670 --> 00:04:34,450 ‫per la prima volta, in realtà avevo sbagliato nel mio file 85 00:04:34,450 --> 00:04:37,010 ‫html e avevo una panoramica della classe della sezione, 86 00:04:37,010 --> 00:04:38,950 ‫ma nel tuo file di partenza avresti 87 00:04:38,950 --> 00:04:41,410 ‫dovuto avere questo principale con il principale della classe. 88 00:04:41,410 --> 00:04:43,430 ‫E quindi credo che nel tuo file 89 00:04:43,430 --> 00:04:46,240 ‫ci sia in realtà un piccolo testo che lo spiega, ok? 90 00:04:46,240 --> 00:04:49,050 ‫Ma, comunque, abbiamo effettivamente eliminato quella parte dal 91 00:04:49,050 --> 00:04:50,720 ‫nostro modello di base. 92 00:04:50,720 --> 00:04:52,480 ‫Quindi, ricorda che qui 93 00:04:52,480 --> 00:04:55,370 ‫nel contenuto in realtà non abbiamo html. 94 00:04:55,370 --> 00:04:57,800 ‫Quindi quell'elemento principale che nell'html è in 95 00:04:57,800 --> 00:05:00,510 ‫questo momento, non si trova da nessuna parte. 96 00:05:00,510 --> 00:05:05,500 ‫E quindi ora ne abbiamo bisogno nella nostra panoramica, ok? 97 00:05:05,500 --> 00:05:09,790 ‫Quindi, creiamo questa parte dell'html nella panoramica perché dopo 98 00:05:09,790 --> 00:05:12,923 ‫abbiamo tutte queste carte ripetute. 99 00:05:14,200 --> 00:05:15,770 ‫Quindi, diamo un'occhiata anche a 100 00:05:15,770 --> 00:05:17,380 ‫questo prima di copiare il codice. 101 00:05:17,380 --> 00:05:19,450 ‫Quindi, vedete che abbiamo queste carte 102 00:05:19,450 --> 00:05:23,340 ‫qui e quindi fondamentalmente, ognuna di queste carte, quindi ciascuno di 103 00:05:23,340 --> 00:05:24,990 ‫questi elementi qui, è 104 00:05:24,990 --> 00:05:27,000 ‫ciò che io chiamo una carta. 105 00:05:27,000 --> 00:05:29,813 ‫E quindi fondamentalmente avremo nove carte. 106 00:05:30,650 --> 00:05:34,490 ‫Quindi, queste nove carte in questa pagina panoramica. 107 00:05:34,490 --> 00:05:37,560 ‫E sono nove carte perché in questo momento abbiamo 108 00:05:37,560 --> 00:05:39,080 ‫nove tour, ma 109 00:05:39,080 --> 00:05:42,780 ‫ovviamente potrebbero essere meno o più di queste carte, giusto? 110 00:05:42,780 --> 00:05:45,540 ‫Ma comunque, ciò che è importante notare qui 111 00:05:45,540 --> 00:05:48,150 ‫è che queste carte in realtà si 112 00:05:48,150 --> 00:05:49,890 ‫ripetono ancora e ancora. 113 00:05:49,890 --> 00:05:52,263 ‫Quindi abbiamo questo enorme elemento di carta qui. 114 00:05:54,240 --> 00:05:56,340 ‫E quindi c'è il 115 00:05:56,340 --> 00:06:01,083 ‫primo, e poi ci sono molti elementi ripetuti uguali in seguito. 116 00:06:01,940 --> 00:06:02,820 ‫Va bene? 117 00:06:02,820 --> 00:06:05,920 ‫E così, in realtà sono andato avanti e ho creato un modello 118 00:06:05,920 --> 00:06:07,460 ‫di carlino solo per questa 119 00:06:07,460 --> 00:06:10,020 ‫carta, in modo da non doverlo scrivere manualmente ora 120 00:06:10,020 --> 00:06:12,900 ‫e perdere un sacco di tempo a farlo, va bene? 121 00:06:12,900 --> 00:06:15,660 ‫Quindi questo renderebbe il corso inutile lungo e 122 00:06:15,660 --> 00:06:18,540 ‫quindi ho deciso di creare questo modello in anticipo 123 00:06:18,540 --> 00:06:20,010 ‫per utilizzarlo ora. 124 00:06:20,010 --> 00:06:22,970 ‫Ora, naturalmente, se vuoi esercitare un po' di più 125 00:06:22,970 --> 00:06:26,010 ‫le tue abilità da carlino, sentiti libero di mettere in 126 00:06:26,010 --> 00:06:30,040 ‫pausa il video a questo punto e poi tradurre tutto questo codice in carlino. 127 00:06:30,040 --> 00:06:30,873 ‫Va bene? 128 00:06:30,873 --> 00:06:33,410 ‫E quando hai finito, puoi tornare indietro. 129 00:06:33,410 --> 00:06:36,400 ‫Ma ora andrò avanti e utilizzerò quel modello. 130 00:06:36,400 --> 00:06:39,680 ‫E questo è qui nei dati di sviluppo 131 00:06:39,680 --> 00:06:43,630 ‫e poi nei modelli e nel modello delle schede turistiche, ok? 132 00:06:43,630 --> 00:06:46,404 ‫E quindi questa è l'intera carta 133 00:06:46,404 --> 00:06:50,333 ‫per una carta, fondamentalmente tradotta in codice pug, ok? 134 00:06:51,210 --> 00:06:52,773 ‫Quindi copiamo 135 00:06:54,090 --> 00:06:58,830 ‫tutto questo, mettiamolo qui nella panoramica, ok? 136 00:06:58,830 --> 00:07:01,700 ‫E poi teniamo presente che prima abbiamo bisogno anche 137 00:07:01,700 --> 00:07:05,030 ‫di questo contenitore principale e di questo contenitore per le carte, 138 00:07:05,030 --> 00:07:06,630 ‫quindi copiamo anche questo. 139 00:07:10,440 --> 00:07:12,570 ‫Quindi solo qui come 140 00:07:12,570 --> 00:07:15,840 ‫riferimento, in modo che ora possiamo scrivere 141 00:07:16,720 --> 00:07:21,567 ‫main main e lì abbiamo un dev chiamato contenitore di carte. 142 00:07:23,870 --> 00:07:24,703 ‫Va bene? 143 00:07:24,703 --> 00:07:27,100 ‫E poi, come dice il 144 00:07:27,100 --> 00:07:29,533 ‫nome, quel contenitore conterrà la carta. 145 00:07:30,610 --> 00:07:33,240 ‫Quindi ora indentiamo questo, perché in questo momento non 146 00:07:33,240 --> 00:07:35,720 ‫è proprio all'interno del contenitore della carta. 147 00:07:35,720 --> 00:07:38,490 ‫Quindi in questo momento sarebbe all'interno del main, ma non 148 00:07:38,490 --> 00:07:39,930 ‫è quello che vogliamo. 149 00:07:39,930 --> 00:07:42,450 ‫E così, seleziono tutto e premo tab. 150 00:07:42,450 --> 00:07:44,770 ‫Premo di nuovo la linguetta e ora vediamo che 151 00:07:44,770 --> 00:07:45,950 ‫è al livello corretto. 152 00:07:45,950 --> 00:07:47,693 ‫È all'interno del contenitore della carta. 153 00:07:49,310 --> 00:07:51,820 ‫Ma in realtà non è ancora corretto 154 00:07:51,820 --> 00:07:52,995 ‫al 100% 155 00:07:52,995 --> 00:07:56,540 ‫perché questo elemento dovrebbe essere anche all'interno dell'elemento della carta. 156 00:07:56,540 --> 00:07:58,780 ‫E per qualche ragione, copiare questo 157 00:07:58,780 --> 00:08:00,600 ‫modello da un file 158 00:08:00,600 --> 00:08:03,050 ‫all'altro, ha un po' incasinato questo codice. 159 00:08:03,050 --> 00:08:07,270 ‫E quindi fai attenzione quando incolli il codice in 160 00:08:07,270 --> 00:08:08,830 ‫questo modo. 161 00:08:08,830 --> 00:08:11,490 ‫Quindi nel nostro modello originale, era tutto corretto come 162 00:08:11,490 --> 00:08:13,870 ‫vedi, ma poi quando l'abbiamo copiato, è stato 163 00:08:13,870 --> 00:08:15,023 ‫un po' incasinato. 164 00:08:16,160 --> 00:08:17,760 ‫Quindi, chiudiamolo. 165 00:08:17,760 --> 00:08:19,340 ‫Possiamo effettivamente chiudere 166 00:08:19,340 --> 00:08:21,800 ‫anche questo, non ci serve più, e 167 00:08:21,800 --> 00:08:25,030 ‫infatti anche il template base e il template tour. 168 00:08:25,030 --> 00:08:27,580 ‫Quindi stiamo lavorando solo con la panoramica ora. 169 00:08:27,580 --> 00:08:30,377 ‫E quindi in questo momento abbiamo questa carta qui. 170 00:08:30,377 --> 00:08:33,990 ‫E ora, come vedi, è anche una carta completamente statica. 171 00:08:33,990 --> 00:08:35,593 ‫Quindi non utilizza ancora 172 00:08:35,593 --> 00:08:38,750 ‫i dati che abbiamo incollato nel modello, giusto? 173 00:08:38,750 --> 00:08:42,180 ‫Quindi ha questa immagine statica, ha tutto questo testo qui 174 00:08:42,180 --> 00:08:44,660 ‫e non usa affatto la variabile. 175 00:08:44,660 --> 00:08:46,960 ‫Ok, perché quella parte la volevo davvero 176 00:08:46,960 --> 00:08:48,660 ‫fare insieme a te. 177 00:08:48,660 --> 00:08:51,440 ‫Perché in effetti questa è la parte più importante. 178 00:08:51,440 --> 00:08:53,730 ‫Quindi creare tutto questo modello 179 00:08:53,730 --> 00:08:56,370 ‫come questo non è difficile e ciò 180 00:08:56,370 --> 00:09:00,140 ‫che conta davvero è come riempirlo effettivamente di dati, ok? 181 00:09:00,140 --> 00:09:02,290 ‫E quindi è quello che faremo dopo. 182 00:09:02,290 --> 00:09:03,760 ‫Ma per ora 183 00:09:03,760 --> 00:09:06,409 ‫diamo un'occhiata a come appare in questo momento. 184 00:09:06,409 --> 00:09:09,370 ‫Quindi tieni presente che dovremmo avere solo una carta 185 00:09:09,370 --> 00:09:11,070 ‫e non nove, ok? 186 00:09:11,070 --> 00:09:14,240 ‫Perché ancora una volta, a questo punto abbiamo solo un elemento statico 187 00:09:14,240 --> 00:09:15,083 ‫della carta. 188 00:09:16,760 --> 00:09:21,690 ‫Ricarica questo, e quello non sembra così giusto. 189 00:09:21,690 --> 00:09:24,833 ‫Quindi, proviamo a capire cosa sta succedendo qui. 190 00:09:25,920 --> 00:09:28,083 ‫Quindi abbiamo il nostro elemento principale come 191 00:09:29,020 --> 00:09:31,940 ‫abbiamo creato, quindi abbiamo anche il nostro contenitore di carte. 192 00:09:31,940 --> 00:09:32,970 ‫Ma poi, per 193 00:09:32,970 --> 00:09:34,723 ‫qualche ragione, c'è di nuovo un main. 194 00:09:36,230 --> 00:09:40,180 ‫Umm ah ok, ovviamente ho bisogno di eliminare questo 195 00:09:40,180 --> 00:09:43,223 ‫elemento html originale che abbiamo lì. 196 00:09:44,150 --> 00:09:45,563 ‫Quindi, proviamo di nuovo. 197 00:09:46,920 --> 00:09:50,460 ‫E ora, ora che sembra migliore, ok? 198 00:09:50,460 --> 00:09:52,020 ‫Ora l'immagine qui è 199 00:09:52,020 --> 00:09:54,340 ‫ancora mancante, ma per ora non importa. 200 00:09:54,340 --> 00:09:55,930 ‫L'importante è 201 00:09:55,930 --> 00:09:59,570 ‫che abbiamo questo bel biglietto qui, ok? 202 00:09:59,570 --> 00:10:01,360 ‫Ora, il fatto è che 203 00:10:01,360 --> 00:10:04,940 ‫ovviamente vogliamo avere una carta per ciascuno dei tour, giusto? 204 00:10:04,940 --> 00:10:07,220 ‫E quindi, in pratica, quello 205 00:10:07,220 --> 00:10:10,343 ‫che vogliamo fare ora è scorrere l'array di 206 00:10:10,343 --> 00:10:13,070 ‫tour che abbiamo incollato nel modello, giusto? 207 00:10:13,070 --> 00:10:14,950 ‫Quindi, fondamentalmente questa variabile di tour. 208 00:10:14,950 --> 00:10:17,250 ‫E tieni presente che questo 209 00:10:17,250 --> 00:10:20,400 ‫è un array perché contiene più documenti del tour. 210 00:10:20,400 --> 00:10:22,410 ‫E quindi ora giriamo su 211 00:10:22,410 --> 00:10:26,641 ‫questo array e creiamo una scheda per ciascuno dei documenti del tour, ok? 212 00:10:26,641 --> 00:10:29,420 ‫E fortunatamente, è molto facile da fare 213 00:10:29,420 --> 00:10:33,860 ‫in carlino perché fondamentalmente il carlino viene fornito con anelli incorporati, ok? 214 00:10:33,860 --> 00:10:34,960 ‫E così 215 00:10:36,130 --> 00:10:40,530 ‫ora possiamo fare ogni tour in tour, ok? 216 00:10:40,530 --> 00:10:43,970 ‫Quindi tour qui è la variabile che abbiamo incollato e 217 00:10:43,970 --> 00:10:45,460 ‫quindi in ogni 218 00:10:45,460 --> 00:10:47,830 ‫iterazione la variabile corrente sarà chiamata tour. 219 00:10:47,830 --> 00:10:52,210 ‫Potremmo chiamarlo x o x y z o qualsiasi altra 220 00:10:52,210 --> 00:10:55,790 ‫cosa, ma ha senso chiamarlo semplicemente tour, ok? 221 00:10:55,790 --> 00:10:58,810 ‫E così in ogni iterazione quello che arriva 222 00:10:58,810 --> 00:11:01,800 ‫poi c'è quello che verrà stampato fondamentalmente. 223 00:11:01,800 --> 00:11:05,363 ‫Quindi anche questo deve essere rientrato di un altro livello. 224 00:11:06,450 --> 00:11:08,740 ‫Quindi fondamentalmente è all'interno 225 00:11:08,740 --> 00:11:11,380 ‫di questa dichiarazione di ciclo qui. 226 00:11:11,380 --> 00:11:14,753 ‫Ottimo, quindi vediamo come appare ora. 227 00:11:15,800 --> 00:11:19,380 ‫E così ora dovremmo ottenere nove carte identiche. 228 00:11:19,380 --> 00:11:24,380 ‫E infatti, è esattamente quello che è successo, va bene? 229 00:11:24,400 --> 00:11:25,730 ‫Ora, ovviamente, questi 230 00:11:25,730 --> 00:11:28,870 ‫dati qui non sono ancora stati creati dinamicamente. 231 00:11:28,870 --> 00:11:30,760 ‫Ed è proprio quello che andremo 232 00:11:30,760 --> 00:11:32,373 ‫a sistemare nel prossimo video.