‫Kursleiter: In
‫diesem Video werden wir über ein Konzept
‫namens Routing sprechen und es implementieren.
‫Im Moment reagiert der von
‫uns geschriebene Code also überhaupt nicht auf die von uns angeforderte URL.
‫Nehmen wir an, wir haben diese URL und
‫erhalten diese Antwort, aber wenn wir
‫beispielsweise ein Produkt haben, erhalten wir genau dieselbe Antwort, oder?
‫Wenn wir uns das Beispiel,
‫das letzte Projekt, ansehen, sehen wir hier
‫zum Beispiel Übersicht.
‫Im Moment haben wir also den Host, dann den Port und
‫/overview, und die Route hier ist /overview, und dann sehen wir
‫diese Seite.
‫Aber sehen Sie sich jetzt an, was passiert.
‫So, jetzt haben wir Produkt.
‫Und deshalb bekommen wir diese Produktseite.
‫Und dann gehen wir zurück, wir kommen zurück zur Übersicht,
‫und so sehen wir wieder die Seite, die wir am Anfang hatten.
‫Auch wenn wir überhaupt nichts
‫haben, dann sehen wir immer noch dieselbe Seite.
‫Und das ist im Grunde Routing.
‫Routing bedeutet also im Grunde das Implementieren verschiedener
‫Aktionen für verschiedene URLs.
‫Okay, und im Moment haben wir so etwas nicht.
‫Wie gesagt, egal welche URL wir haben, wir
‫erhalten immer die gleiche Antwort.
‫Also müssen wir jetzt eine Logik implementieren,
‫die das ändert.
‫Okay, und das wird wieder Routing sein.
‫Nun kann das Routing in einer großen, realen Anwendung
‫tatsächlich sehr, sehr kompliziert werden, und in diesem Fall
‫verwenden wir ein Tool wie Express, also werden wir das im
‫nächsten großen Projekt in diesem Kurs tun,
‫in dem wir Express verwenden das alles zu tun.
‫Aber jetzt, da wir gerade erst anfangen, Node
‫zu lernen, möchten wir lernen, wie
‫man alles von Grund auf ohne diese Abhängigkeiten macht, oder?
‫Lassen Sie uns hier in diesem Server
‫ein sehr einfaches Routing implementieren.
‫Der erste Schritt besteht nun
‫darin, die URL tatsächlich analysieren zu können.
‫Und dafür verwenden wir noch ein weiteres eingebautes Node-Modul, das
‫URL heißt.
‫Und ich dupliziere nur
‫das hier und dann die URL.
‫Und nur als Randnotiz, also habe ich URL ausgewählt
‫und dann, um die
‫nächste auszuwählen, einfach Command + D auf meiner Tastatur gedrückt.
‫Okay, ich weiß, dass wahrscheinlich jemand in den Fragen und Antworten fragen
‫wird, wie ich
‫diesen Trick gemacht habe, und deshalb antworte ich jetzt im Grunde und
‫sage, wie es funktioniert.
‫Wie auch immer, werfen wir zunächst einen Blick
‫auf die Anfrage. url.
‫Und natürlich möchte ich eine Konsole. Protokoll davon.
‫Stoppen Sie also den Server und führen Sie ihn erneut aus.
‫Und es gibt ein Werkzeug für uns, um dies automatisch zu tun.
‫Das werden sicher einige von euch wissen.
‫Und natürlich werden wir das etwas
‫später verwenden, aber im Moment möchte ich es so machen.
‫Okay, also lass uns das neu laden.
‫Funktioniert genauso, und hier erhalten wir die URL.
‫Okay, und wir bekommen tatsächlich zwei davon.
‫Und das bedeutet, dass wir tatsächlich zwei Anfragen haben
‫und diese Callback-Funktion hier also tatsächlich
‫zweimal ausgeführt wird.
‫Also eine Konsole. log hat nur
‫den Schrägstrich und das zweite hat /favicon.
‫Wenn wir also einen Browser
‫verwenden, führt der Browser automatisch eine Anfrage
‫nach dem Favicon der Website durch.
‫In Ordnung, in diesem Fall haben wir also kein
‫Favicon und wir ignorieren es einfach, okay?
‫Das ist also nicht wirklich wichtig.
‫Nehmen wir nun an, dass wir hier /overview schreiben.
‫Mal sehen, was wir dann bekommen.
‫Wir erhalten also /overview und /favicon, okay.
‫Wichtig ist auch hier die /overview.
‫Für einfache URLs wie
‫diese brauchen wir eigentlich nicht einmal das URL-Modul,
‫aber wir werden es für komplexere Dinge brauchen.
‫Nehmen wir also an,
‫wir haben hier zum Beispiel die ID
‫23 und einige andere Parameter angegeben.
‫Sagen wir, das ist so etwas.
‫Und ich bin sicher, Sie haben diese Art von Muster in einer URL
‫gesehen, in der wir Parameter angeben können.
‫Wenn wir also so etwas haben,
‫sehen Sie, dass die URL diese ist.
‫Und das URL-Modul wird uns dabei
‫helfen, diese Parameter und ihre Werte im Grunde
‫in ein schön formatiertes Objekt zu parsen, okay?
‫Im Moment werden
‫wir das URL-Modul also noch nicht verwenden.
‫Wir werden es etwas später brauchen.
‫Lassen Sie uns nun das Routing tatsächlich implementieren, und es
‫ist sehr, sehr einfach.
‫Im Grunde brauchen wir hier also nur eine große Wenn-Sonst-Anweisung.
‫Okay, also zuerst werde ich tatsächlich req speichern. url in eine Variable,
‫oh, sorry,
‫in eine Variable namens pathName.
‫Okay, und jetzt werden wir basierend auf
‫diesem Pfadnamen Entscheidungen treffen.
‫Senden Sie also grundsätzlich verschiedene Antworten zurück.
‫Wenn also der Pfadname gleich Übersicht oder /Übersicht ist,
‫dann senden wir etwas an den Client.
‫Und sagen wir einfach, das ist die ÜBERSICHT.
‫Andernfalls, wenn pathName gleich product ist, /product, na
‫ja, dann wollen wir nur
‫das PRODUCT senden.
‫Okay, jetzt für den Fall, dass wir an der Wurzel der Site sind.
‫Also im Grunde so, na ja, dann wollen wir
‫auch die Übersicht zeigen.
‫Und das fügen wir auch hier hinzu.
‫Pfadname ist also gleich und Schrägstrich.
‫Und dann das oder.
‫Wenn der Pfadname also entweder root oder /overview ist, dann senden Sie ihn
‫als OVERVIEW zurück, oder wenn es
‫sich um ein Produkt handelt, dann senden Sie PRODUCT zurück.
‫Also ganz einfaches Zeug, und lass es uns jetzt testen.
‫Eigentlich können wir einfach neu laden, oder stattdessen
‫müssen wir das zuerst noch einmal beenden und alles neu starten.
‫Es funktioniert also bereits, dies ist die ÜBERSICHT.
‫Wenn ich jetzt
‫Produkt sage, dann ist dies ein PRODUKT, perfekt.
‫Um nur das letzte zu überprüfen, gibt uns
‫die Übersicht noch einmal ÜBERSICHT.
‫Okay, nehmen wir jetzt an, dass wir tatsächlich etwas anfordern, das wir
‫nicht bearbeitet haben.
‫Also sowas.
‫Was passiert also?
‫Nun, wie Sie sehen, hört dieses Rad hier
‫nicht wirklich auf, sich zu drehen.
‫Es versucht also, eine Antwort zurückzusenden, aber es kann nicht wirklich.
‫Der Server weiß also nicht, was er in dieser Situation tun
‫soll, da wir keinen Fallback hinzugefügt haben.
‫Also lasst uns diesen armen
‫Kerl hier stoppen und im Grunde hier einfach eine else-Anweisung hinzufügen.
‫Wenn es also nicht die Wurzel, nicht die Übersicht, nicht das Produkt ist,
‫dann möchten wir sagen, dass diese Seite nicht gefunden werden konnte.
‫Seite nicht gefunden.
‫Nun, wenn Sie auf der Website versuchen,
‫eine Seite zu öffnen, die
‫nicht gefunden wird, sehen Sie oft diesen 404-Fehler, richtig?
‫Und das ist eigentlich ein sogenannter HTTP-Statuscode.
‫Da wir also eine Antwort zurücksenden,
‫können wir der Antwort auch den Statuscode hinzufügen.
‫Dafür können wir mehrere Möglichkeiten verwenden, aber ich werde eine
‫verwenden, die mehr kann als
‫nur Statuscode, und
‫ich werde Ihnen gleich zeigen, warum.
‫Aber im Moment sage ich
‫nur hier, res. schreibe den Kopf und dann 404, okay?
‫Lass uns das jetzt testen.
‫Und was passiert hier?
‫Ah, hier passiert nichts,
‫weil ich den Server nicht neu gestartet habe.
‫Seite wurde also nicht gefunden.
‫So toll, was ist nun mit dem 404-Statuscode?
‫Nun, wir können hier auf Inspect klicken, um die Dev Tools zu
‫öffnen, oder ich möchte stattdessen Command + J drücken, und
‫das öffnet dann auch die Dev Tools.
‫Unter Windows ist es wahrscheinlich Alt
‫+ Control + J, oder Sie können einfach zu
‫View und dann Developer und Developer Tools kommen, okay?
‫Gehen Sie dann zum Netzwerk-Tab, aber
‫tatsächlich können Sie es bereits wie hier sehen.
‫Der Server hat also mit dem Statuscode 404 nicht gefunden geantwortet.
‫Aber Sie können es auch im Netzwerk sehen und einfach neu laden,
‫und dann sehen Sie hier 404
‫und den roten Text, um anzuzeigen, dass ein Fehler aufgetreten ist.
‫Okay, jetzt kann dieser writeHead hier auch
‫noch Header senden.
‫Und um Header zu senden, müssen wir hier ein Objekt angeben
‫und dann dort die Header einfügen, die wir senden möchten.
‫Was ist nun eigentlich ein Header?
‫Nun, ein HTTP-Header ist im Grunde eine Information über
‫die Antwort, die wir zurücksenden.
‫Und auch hierüber werden Sie in einem
‫späteren Abschnitt des Kurses noch viel mehr erfahren, okay?
‫Für den Moment wissen Sie nur,
‫dass es viele verschiedene Standard-Header gibt, die
‫wir angeben können, um den Browser oder den
‫Client, der eine Antwort erhält, über die Antwort selbst zu informieren.
‫Einer der Standard-Header ist beispielsweise,
‫den Browser über den Inhaltstyp zu informieren.
‫Wir können
‫also Content-Type sagen und auf text/html setzen.
‫Und
‫so erwartet der Browser jetzt etwas HTML.
‫Also können wir
‫jetzt zum Beispiel hier ein
‫h1-Element machen, um im Grunde HTML zurückzusenden.
‫Also einfach so.
‫Und aufgrund dieses
‫Headers hier erwartet der Browser jetzt tatsächlich, dass HTML hereinkommt.
‫Wir können auch unsere eigenen Kopfzeilen spezifizieren.
‫Sagen wir also mein-eigener-Header, hallo-world, also so
‫etwas in der Art, okay?
‫Hier kommt es nun darauf an,
‫dass diese Header und auch der Statuscode immer
‫gesetzt werden müssen, bevor wir die Antwort versenden.
‫Okay, wir können also niemals Header nach
‫dem Antwortinhalt selbst senden.
‫Versuchen wir es noch einmal,
‫oder eigentlich sollte ich den Server neu starten.
‫Und so versuchen wir es jetzt noch einmal.
‫Und tatsächlich bekommen wir immer noch unseren Fehler, aber
‫jetzt sieht es anders aus.
‫Jetzt haben wir hier also tatsächlich ein h1-Element.
‫Und wenn wir auch auf der Registerkarte Netzwerk auf diese Anfrage klicken, erhöhen
‫wir sie hier tatsächlich ein wenig.
‫Ich bin mir also nicht
‫sicher, ob Sie das wirklich sehen können, aber wenn wir hier auf
‫diese Anfrage klicken, können wir tatsächlich auch die Antwortheader sehen.
‫Hier haben wir also den Inhaltstyp,
‫den wir als text/html angegeben haben, und dann
‫den anderen
‫Header, sodass mein eigener Header auf hello-world gesetzt ist.
‫Und wieder können wir dies verwenden, um einige Metadaten über
‫die Antwort selbst zu senden, in Ordnung?
‫Jetzt gibt es auch einige Request-Header, und diese
‫wurden vom Browser automatisch gesetzt, aber machen Sie
‫sich jetzt keine Sorgen darüber.
‫Wichtig ist, dass wir angegeben haben, dass der
‫Inhalt, den wir senden, HTML ist,
‫und auch der Statuscode,
‫den wir zurückgesendet haben, ist 404 nicht gefunden, okay?
‫Lassen Sie uns das jetzt einfach loswerden.
‫Öffnen Sie es, und jetzt sehen Sie,
‫dass wir einen Status von 200 haben, was OK
‫bedeutet, und diese anderen Header sind tatsächlich weg.
‫Okay, jetzt hat
‫diese Antwort diese beiden anderen Header nicht, oder?
‫Und wir sehen die
‫200 jetzt OK, und ja, im Moment funktioniert alles gut.
‫Wir haben das grundlegende Routing
‫implementiert, sodass wir für
‫verschiedene Pfadnamen jetzt verschiedene Aktionen haben.
‫Eine letzte Sache, die ich zum Routing sagen möchte, ist,
‫dass diese Routen, die wir hier in unserem Code definiert
‫haben und die Routen, die wir in die URLs im Browser
‫eingeben, nichts mit den Dateien und Ordnern
‫im Dateisystem unseres Projekts zu tun haben, okay ?
‫Als Anfänger könnten Sie also
‫denken, dass, wenn wir zum Beispiel /templates öffnen,
‫dies den Vorlagenordner öffnen würde, den wir
‫in unserem Dateisystem haben.
‫Aber das ist natürlich nicht der Fall.
‫Wenn wir also eine Template-Route haben wollten,
‫dann müssten wir diese
‫im Grunde in unserem Router definieren
‫und dann eine spezielle Antwort nur für diese Route senden.
‫Jedenfalls denke ich, dass das für ein Video reicht.
‫Wir sehen uns im nächsten.