‫Kursleiter: In diesem Video
‫werden wir also lernen, wie man einige Variablen
‫aus der URL parst, um die Produktseite erstellen zu können.
‫Denken Sie also daran, wie
‫ich gleich am Anfang das URL-Modul importiert
‫habe, also dieses hier,
‫um Variablen direkt von der URL aus parsen zu können.
‫Okay. Lassen Sie uns also
‫als ersten
‫Schritt noch einmal "req. url" an die Konsole und
‫dann eine andere Sache, die ich protokollieren möchte, ist eigentlich...
‫das Ergebnis der Verwendung von "url. parse" auf dieser URL.
‫Auch hier besteht Parsen darin, die Variablen aus der
‫URL heraus zu parsen.
‫Also so etwas.
‫Was wir also wollen, ist "id = 0", richtig, denn im
‫Moment ist die "req. url" ist all das, also
‫diese gesamte
‫URL, und natürlich haben wir
‫keine Route dafür.
‫Nichts hier in dieser Art von Routern, die wir hier haben, stimmt
‫also tatsächlich mit dieser gesamten URL überein.
‫Deshalb erhalten wir "Seite nicht gefunden! „Und
‫deshalb müssen wir hier auch einiges ändern.
‫Okay, lassen Sie mich die URL hier analysieren, damit Sie sich
‫das Ergebnis ansehen können, um
‫zu sehen, was als nächstes zu tun ist.
‫Ich muss hier auch "true" an diese Parse-Funktion übergeben, um
‫die Abfrage tatsächlich in ein Objekt zu parsen.
‫Also mit Abfrage meine ich diesen Teil hier.
‫Okay, das wird als Abfragezeichenfolge bezeichnet, in
‫Ordnung, und das ist es, was wir effektiv parsen, diesen
‫Teil der URL.
‫Starten Sie es also
‫neu und werfen wir einen Blick auf die Protokolle, die wir erhalten.
‫Zuerst ist also die "req. url" und das
‫haben wir erwartet, richtig, und hier ist
‫das Ergebnis von "url. parse" Also erhalten
‫wir hier das Abfrageobjekt, und hier
‫haben wir ein nettes Objekt, das
‫uns mitteilt, dass id 0 ist, richtig,
‫das ist also schön.
‫Und dann, direkt darunter, haben wir
‫tatsächlich das zweite Stück, das
‫wir brauchen, und das ist nur der Pfadname, okay.
‫Unsere Route verwendet also diesen Pfadnamen,
‫also nur "/product", und dann müssen wir die Abfrage
‫kennen, um entsprechend auf die ID 0 zu antworten.
‫In diesem Fall also
‫zum Beispiel das Laden des Avocado-Produkts, das das erste ist.
‫Aber wenn es zum
‫Beispiel Nummer zwei war, dann diesen Brokkoli laden, richtig.
‫Diese Abfrage und dieser Pfadname
‫werden wir dafür verwenden.
‫Diese brauchen wir also nicht mehr.
‫Wir möchten jetzt auch nichts in der
‫Konsole protokollieren, da wir stattdessen
‫zwei Variablen erstellen möchten, die Abfrage und
‫...
‫Pfadname.
‫Und das können wir mit den Stacks, der Strukturierung.
‫Ich hoffe also, dass Sie
‫mit dieser Syntax hier vertraut sind, und so funktioniert sie tatsächlich.
‫Dieses Objekt hier hat also eine Abfrage und einen Pfadnamen.
‫Wenn Sie also diese
‫Strukturierung so verwenden, mit diesen genauen
‫Eigenschaftsnamen, muss es tatsächlich so sein.
‫Mit diesen beiden genauen
‫Eigenschaftsnamen erstellt es also diese beiden
‫Variablen, eine namens query und eine namens
‫pathname, mit genau den Werten, die wir hier haben.
‫Die Abfrage lautet also
‫diese und der Pfadname lautet in diesem Fall "/product".
‫Toll. Jetzt muss ich
‫nur noch weitermachen und das hier durch dieses ersetzen.
‫Gut.
‫Lassen Sie uns diese
‫löschen und nur um sicherzustellen, dass wir die Abfrage tatsächlich in der
‫Konsole protokollieren, falls wir uns auf der Produktseite befinden.
‫"Konsole. log" das Abfrageobjekt.
‫Und jetzt finden wir die Seite
‫wieder und müssen auch mit dieser ID 0 abfragen.
‫So perfekt. Jetzt können
‫wir diese Seite mit unserer Vorlage erstellen.
‫Und das
‫sollte sehr einfach sein, eigentlich viel einfacher als die
‫Übersichtsseite, denn hier müssen
‫wir keine dieser verrückten Schleifen hier
‫drüben machen, weil es eine einfache
‫Vorlage gibt, wir müssen nur alles ersetzen.
‫Lassen Sie uns also im ersten Schritt herausfinden,
‫welches Produkt wir anzeigen möchten.
‫Ich erstelle also eine Variable
‫namens product, die dem Datenobjekt an der
‫Position "query. Ich würde. „Okay,
‫macht das Sinn?
‫Das Datenobjekt ist also ein Array, und
‫wir werden dann das Element an der Position abrufen, die
‫von der Abfrage kommt. Ich würde.
‫Also, wenn es null ist, dann ist es
‫Element null, wenn es zwei ist, ist es Element Nummer zwei.
‫Okay, und das ist
‫die einfachste Möglichkeit, ein Element basierend auf einer Abfragezeichenfolge abzurufen.
‫Eine andere Sache, die
‫wir jetzt tun müssen, ist, genau denselben Head hierher zu bekommen,
‫okay, und schließlich erstellen wir einfach unsere Ausgabe.
‫Die Ausgabe ist also einfach replaceTemplate,
‫und der HTML-Code, den
‫wir übergeben müssen, ist tempOverview oder eigentlich tempProduct, und
‫was wir übergeben, ist das Produkt.
‫Und das ist es!
‫Jetzt senden wir einfach die Ausgabe als Ergebnis oder
‫eigentlich als Antwort, und das war's.
‫Also macht dieser Teil hier Sinn, oder?
‫Auch hier erwartet replaceTemplate, dass wir eine
‫Vorlage und ein Produkt einfügen.
‫Ein Produkt ist also ein Objekt mit all diesen Eigenschaften.
‫Und so kommt das Produkt direkt
‫aus diesem Datenobjekt hierher.
‫Also übergeben wir in replaceTemplate das Template product,
‫also dieses, das wir gleich zu Beginn
‫aus der Datei geladen haben, und dann product.
‫Wie ich bereits erwähnt habe, natürlich diejenige, die aus dem Array kommt.
‫Und das sollte es eigentlich auch sein.
‫Wenn die Vorlage also korrekt ist,
‫sollte dies jetzt funktionieren.
‫Also, starten wir den Server neu,
‫laden wir
‫ihn neu und tatsächlich geht es los.
‫Also, das ist toll, das
‫freut mich sehr, wenn
‫so etwas funktioniert, schön, alles ist perfekt.
‫Auch diese Zurück-Taste, oh das geht nicht.
‫Okay. Daher müssen wir hier die HTML-Vorlage ändern.
‫Also wo ist das? Es ist im Produkt,
‫und dieser Link hier, wo ist das, ah.
‫Ja, es zeigt im Grunde nirgendwo
‫hin, und was wir wollen, ist, zur Übersicht zurückzukehren, richtig.
‫Starten Sie den Server neu, laden Sie diese Seite
‫neu und jetzt funktioniert es.
‫Probieren wir es ohne den Bio-Patch aus, und
‫tatsächlich ist er nicht hier.
‫Früher war es und jetzt ist es weg.
‫Und all dieses Zeug hier
‫ist natürlich dynamisch und kommt aus dieser JSON-Datei. Ja.
‫Das alles funktioniert also. Wunderschönen.
‫Das ist wirklich ganz toll.
‫Und unser Projekt, so können wir jetzt sagen, ist tatsächlich abgeschlossen.
‫Nur noch eine kleine Sache, die ich tun möchte,
‫nämlich Ihnen ein paar nette Dinge zu zeigen, die wir tun können.
‫Aber abgesehen davon funktioniert unser Projekt.
‫Herzlichen Glückwunsch, du hast gerade deinen ersten wirklich
‫cool aussehenden Knoten fertiggestellt. js-Projekt.
‫Und es war nicht so schwer, oder?
‫Ich meine, einige der
‫Dinge, die wir gemacht haben, beziehen sich eher auf die JavaScript-Programmierung im Allgemeinen
‫und nicht so sehr auf Knoten. js selbst, oder?
‫Also solche Sachen hier, die vielleicht etwas verwirrend waren, aber
‫am Ende des Tages ist
‫das wirklich nur normales JavaScript, oder?
‫Die Funktionalität ist also wieder da,
‫es gibt nur noch eine kleine Sache, die ich
‫im nächsten Video machen möchte, und wenn Sie diese erreichen, werde ich
‫Ihnen sagen, was das ist.