‫Istruttore: Quindi in
‫questo video impareremo come analizzare alcune variabili
‫dall'URL per poter costruire la pagina del prodotto.
‫Quindi ricorda come all'inizio
‫ho importato il modulo URL,
‫quindi questo
‫qui, per poter analizzare le variabili direttamente dall'URL.
‫Va bene. Quindi, come primo passo,
‫registriamo ancora
‫una volta "req. url" alla console e
‫poi un'altra cosa che voglio registrare è in realtà...
‫il risultato dell'utilizzo di "url. parse" su questo URL.
‫Quindi, ancora una volta, l'analisi è fondamentalmente l'analisi
‫delle variabili dall'URL.
‫Quindi, qualcosa del genere.
‫Quindi, quello che vogliamo è "id = 0", giusto, perché in
‫questo momento, il "req. url" è tutto questo, quindi
‫l'intero URL
‫e, naturalmente, non abbiamo alcun
‫percorso per quello.
‫Quindi niente qui in questo tipo di router che abbiamo qui,
‫in realtà corrisponde a questo intero URL.
‫Ecco perché otteniamo "Pagina non trovata! "E quindi
‫è anche per questo che dobbiamo cambiare alcune cose qui.
‫Ok, fammi analizzare l'URL qui, in modo che tu
‫possa dare un'occhiata al
‫risultato per vedere cosa dobbiamo fare dopo.
‫Ho anche bisogno di passare "true" qui in questa funzione di
‫analisi per analizzare effettivamente la query in un oggetto.
‫Quindi, con query, intendo questa parte qui.
‫Ok, questa si chiama stringa di query,
‫va bene, e questo è ciò che stiamo effettivamente analizzando,
‫quella parte dell'URL.
‫Quindi riavvialo
‫e diamo un'occhiata ai log che otteniamo.
‫Quindi, il primo è il "req. url" e questo
‫è quello che ci aspettavamo, giusto, ed ecco
‫il risultato del fare "url. parse" Quindi
‫otteniamo l'oggetto query qui, e quindi
‫qui abbiamo un bell'oggetto che
‫ci dice che id è 0,
‫giusto, quindi è bellissimo.
‫E poi, proprio sotto, abbiamo il
‫secondo pezzo di cui abbiamo
‫bisogno, che è solo il nome del percorso, ok.
‫Quindi, il nostro percorso utilizza questo
‫percorso, quindi solo "/product" e quindi abbiamo bisogno di conoscere
‫la query per rispondere di conseguenza all'id di 0.
‫Quindi in questo caso,
‫ad esempio, caricando il prodotto avocado, che è il primo.
‫Ma se fosse il
‫numero due, per esempio, allora caricare questo broccolo, giusto.
‫E quindi questa query e questo percorso sono
‫ciò che useremo per farlo.
‫Quindi, questo non ci serve più.
‫Inoltre, non vogliamo registrare nulla sulla console ora
‫perché ciò che vogliamo fare
‫invece è creare due variabili, chiamate query
‫e ...
‫nomepercorso.
‫E possiamo farlo usando gli stack, la strutturazione.
‫Quindi, di nuovo, spero che
‫tu abbia familiarità con questa sintassi qui, ed è così che funziona effettivamente.
‫Quindi, questo oggetto qui ha query e pathName.
‫Quindi, usando questa struttura
‫in questo modo, con questi nomi esatti
‫di proprietà, in realtà deve essere così.
‫Quindi con questi due
‫nomi di proprietà esatti, creerà queste
‫due variabili, una chiamata query e una
‫chiamata percorso, con esattamente i valori che abbiamo qui.
‫Quindi la query sarà
‫questa e il percorso sarà "/product", in questo caso.
‫Grande. Ora tutto quello che
‫devo fare è andare avanti e sostituire questo qui con questo.
‫Va bene.
‫Eliminiamo questo e,
‫solo per assicurarci, registriamo effettivamente la query sulla console nel
‫caso in cui siamo sulla pagina del prodotto.
‫"consolare. log" l'oggetto della query.
‫E ora, siamo tornati a trovare la
‫pagina e dobbiamo anche interrogare con questo ID 0.
‫Così perfetta. Quindi ora siamo
‫pronti per costruire effettivamente questa pagina usando il nostro modello.
‫E dovrebbe essere
‫molto semplice, in realtà molto più semplice della pagina panoramica,
‫perché qui non dobbiamo
‫fare nessuno di questi pazzi loop
‫qui perché c'è un modello semplice,
‫tutto ciò che dobbiamo fare è sostituire tutto.
‫Quindi, nel primo passaggio, cerchiamo di capire quale
‫è il prodotto che vogliamo visualizzare.
‫Quindi sto creando una variabile chiamata
‫prodotto e che sarà uguale all'oggetto dati nella
‫posizione "query. ID. "Va
‫bene, ha senso?
‫Quindi l'oggetto dati è un
‫array e quindi recupereremo l'elemento nella posizione che
‫proviene dalla query. ID.
‫Quindi, se è zero, allora è
‫l'elemento zero, se è due, è l'elemento numero due.
‫Ok, quindi questo è il
‫modo più semplice per recuperare un elemento basato su una stringa di query.
‫Ora un'altra cosa
‫che dobbiamo fare è ottenere questa identica testa qui, ok, e
‫alla fine creiamo semplicemente il nostro output.
‫Quindi, l'output è semplicemente replaceTemplate e
‫l'HTML che dobbiamo passare
‫è il tempOverview, o in realtà il tempProduct, e
‫ciò che passiamo è il prodotto.
‫E questo è tutto!
‫Ora inviamo semplicemente l'output come risultato, o come risposta
‫in realtà, e questo è tutto.
‫Quindi questa parte qui ha senso, giusto?
‫Quindi, ancora una volta, replaceTemplate si aspetta che
‫inseriamo un modello e un prodotto.
‫Quindi un prodotto è un oggetto con tutte queste proprietà.
‫E così quel prodotto arriva qui proprio
‫da questo oggetto dati.
‫Quindi in replaceTemplate, passiamo il prodotto modello,
‫quindi questo, che abbiamo caricato dal
‫file proprio all'inizio, e poi il prodotto.
‫Come ho detto, ovviamente, quello proveniente dall'array.
‫E quindi dovrebbe essere così.
‫Quindi, se il modello è
‫corretto, dovrebbe funzionare ora.
‫Quindi, riavviando il server,
‫ricarichiamolo,
‫e infatti, ci siamo.
‫Quindi, è fantastico, questo mi rende
‫davvero felice, quando questo genere
‫di cose funziona così, bello, tutto è perfetto.
‫Anche questo pulsante indietro, oh, non funziona.
‫Va bene. Quindi abbiamo bisogno di cambiare il modello HTML qui.
‫Allora dov'è? È nel prodotto,
‫e questo link qui, dov'è, ah.
‫Sì, sostanzialmente non punta da nessuna
‫parte, e quello che vogliamo è tornare alla panoramica, giusto.
‫Riavvia il server, ricarica questa pagina
‫e ora funziona.
‫Proviamo senza il cerotto organico, e
‫infatti, non è qui.
‫Prima lo era, e ora non c'è più.
‫E tutta questa roba qui
‫ovviamente è dinamica proveniente da quel file JSON. Sì.
‫Quindi tutto questo funziona. Bellissimo.
‫È davvero fantastico.
‫E il nostro progetto, ora possiamo dire, è effettivamente finito.
‫Solo un'altra piccola cosa che voglio fare,
‫che è solo per mostrarti una cosa carina che possiamo fare.
‫Ma oltre a questo, il nostro progetto sta funzionando.
‫Quindi congratulazioni, hai appena finito il tuo
‫primo nodo davvero interessante. progetto js.
‫E non è stato così difficile, vero?
‫Voglio dire, alcune delle
‫cose che abbiamo fatto sono più legate alla programmazione JavaScript in generale,
‫e non tanto al nodo. js stesso, giusto?
‫Quindi cose come questa qui, che forse erano un po 'confuse, ma di
‫nuovo alla fine della giornata si tratta
‫solo di JavaScript normale in realtà, non è vero?
‫Quindi di nuovo, la funzionalità c'è,
‫c'è solo un'altra piccola cosa che voglio
‫fare nel prossimo video e quando raggiungerai quella, ti dirò
‫di cosa si tratta.