‫Kursleiter:
‫Lassen Sie uns nun eine
‫Middleware-Funktion eines Drittanbieters von npm namens
‫Morgan verwenden, um unser Entwicklungsleben ein wenig zu erleichtern.
‫Wie bereits erwähnt, verwenden wir
‫eine Middleware namens Morgan, die eine sehr beliebte Logging-Middleware ist.
‫Also eine Middleware, die es uns ermöglicht, Anforderungsdaten direkt
‫in der Konsole anzuzeigen.
‫Okay, dann lass es mich installieren und du
‫wirst sehen, wie das funktioniert, okay?
‫Also, ich möchte diesen Prozess jetzt hier nicht beenden, also werde ich
‫hier in VS Code ein neues Terminal erstellen und dafür
‫drücke ich hier und so auf diese Plus-Schaltfläche, jetzt
‫bekommen wir ein neues Terminal und
‫ich mache es
‫nicht Ich möchte nicht aktualisieren, also nein, und jetzt npm install morgan.
‫Okay, wie bereits erwähnt,
‫wird diese
‫Logging-Middleware unser Entwicklungsleben ein wenig erleichtern.
‫Aber es ist
‫immer noch Code, den wir tatsächlich in
‫unsere Anwendung aufnehmen werden, und deshalb ist es keine
‫Entwicklungsabhängigkeit, sondern nur eine einfache reguläre Abhängigkeit,
‫okay und so, deshalb habe ich save dev hier nicht
‫angegeben, denn wieder ist es kein a Dev-Abhängigkeit wirklich.
‫Okay, wir haben es in unserem Paket. json hier jetzt, morgan und so,
‫lass uns fortfahren und es in unserem Code fordern.
‫Also, hier oben wieder const morgan ist
‫gleich require morgan und Sie sehen wieder diese
‫Art von Konvention, die das
‫require aufdecken wird,
‫wenn Sie denselben Namen wie der Paketname selbst verwenden.
‫Wir haben also unsere Middleware hier,
‫also fügen wir sie gleich danach hinzu oder
‫schreiben wir als erste.
‫Okay, und der Quellcode wächst ein
‫wenig,
‫also lassen Sie uns hier
‫einige Kommentare hinzufügen, also
‫zuerst Middleware, dann hier unten beginnen wir mit unseren Route-Handlern.
‫Gut, dann sagen wir mal, wir haben unsere Routen.
‫Und dann endlich hier unten starten
‫wir den Server.
‫Okay, nur um unseren Code etwas lesbarer und
‫einfacher zu scannen zu machen.
‫Wir haben also diese erste Middleware,
‫aber lassen Sie uns vorher unsere verwenden.
‫Also natürlich App. verwenden und
‫jetzt hier drin nennen wir Morgan.
‫Okay, und an diese
‫Funktion können wir ein
‫Argument übergeben,
‫das angibt, wie die Protokollierung aussehen soll.
‫Wir können dafür einige vordefinierte Strings verwenden, und
‫der, den ich verwenden werde, heißt dev.
‫Und tatsächlich können Sie hier die verschiedenen Optionen sehen,
‫damit VS Code wirklich schlau ist
‫und mir die Optionen
‫geben kann, die wir in diese Funktion übergeben können.
‫Okay, wie ich bereits
‫erwähnt habe, werde ich den namens dev verwenden.
‫Okay und das wars dann eigentlich.
‫Also haben wir es
‫benötigt und dann hier verwendet.
‫Also, sehr einfache Dinge, aber
‫ich denke, es
‫ist wichtig, tatsächlich zu versuchen, zu verstehen, wie das funktioniert.
‫Das Aufrufen dieser
‫Morgan-Funktion wird also eine ähnliche
‫Funktion wie
‫diese hier und so zurückgeben
‫dieses Paket und das ist eine
‫weitere sehr
‫schöne
‫Übung, von der wir
‫tatsächlich einiges lernen können.
‫Suchen wir also nach morgan auf GitHub, also sind normalerweise alle
‫diese Pakete immer auf GitHub und
‫dort können wir uns dann
‫ihren Open-Source-Code ansehen.
‫Okay und Morgan ist eigentlich ein sehr einfaches Paket und so müssen
‫wir nur zu diesem Index gehen. js-Datei, das ist normalerweise
‫der Einstiegspunkt und in diesem
‫Fall ist es die einzige Datei, die es gibt.
‫Okay, ich werde jetzt nicht den ganzen Code durchgehen, aber
‫ich möchte hervorheben, dass der Hauptexport aus
‫dieser Datei hier morgan ist, also eine Funktion
‫namens morgan, also lassen Sie uns danach
‫suchen und
‫hier ist sie tatsächlich.
‫Okay, und wenn wir das Paket in
‫unserem Code benötigen, wird diese Morgan-Funktion zurückgegeben, richtig?
‫Auch weil sie ein Modul verwenden. export und
‫das ist der Standardexport, genau wie wir
‫es vor ein oder zwei Abschnitten in der
‫Vorlesung über die Pflichtmodule gelernt haben, oder?
‫Also, diese Morgan-Funktion hier
‫wird wieder diese Morgan-Funktion hier in diesem Code sein, okay?
‫Sehen wir uns an, was
‫diese Funktion macht und ich kümmere mich nicht um
‫diese Implementierung
‫hier. Was ich Ihnen wirklich zeigen wollte, ist, dass diese Funktion
‫tatsächlich eine andere Funktion
‫zurückgibt, die der Logger ist, und
‫Sie sehen, dass diese Funktion
‫nur unsere eigene hat Middleware-Funktionen haben diese sehr
‫typische Signatur von Request, Response und Next.
‫Okay?
‫Diese Funktion ist also genau wie unsere eigenen Middleware-Funktionen.
‫Und so sehen Sie, dass es
‫am Ende, wenn es fertig ist, auch als nächstes
‫anruft, also genau wie wir.
‫Es handelt sich also nur um
‫eine ganz normale Middleware-Funktion, genau wie die, die wir schreiben.
‫Okay?
‫Gehen wir also hierher zurück und
‫sehen wir uns jetzt das Ergebnis hier in unserem Terminal an.
‫Gehen wir also zu diesem ersten zurück,
‫also wechseln wir zwischen den
‫verschiedenen Terminals, die wir in VS Code geöffnet haben.
‫Geben Sie uns hier etwas mehr Platz,
‫löschen Sie dies
‫tatsächlich, da Sie den unteren Rand des Bildschirms
‫möglicherweise nicht so gut sehen können.
‫Also ja, lassen Sie uns jetzt
‫einfach eine Anfrage erstellen,
‫in Ordnung, gehen Sie zurück und los geht's.
‫Wir haben also die Informationen zu der Anfrage, die
‫wir gerade gestellt haben.
‫Wir erhalten also
‫die HTTP-Methode, die URL, den Statuscode, die Zeit
‫zum Zurücksenden der Antwort und
‫auch die Größe der Antwort in Byte.
‫Denken Sie also daran, dass wir hier eine andere
‫Option hätten verwenden können, zum Beispiel, tiny
‫war eine andere, das würde dann wahrscheinlich etwas anders aussehen und hier
‫sieht es tatsächlich ähnlich aus.
‫Es macht diese Einfärbung
‫dieses Statuscodes einfach
‫nicht und hat hier auch eine etwas andere Reihenfolge.
‫Okay und wenn wir etwas gemacht haben, wenn wir einen
‫Fehler verursacht haben, zum Beispiel einen 404, testen
‫wir das, indem wir hier eine ungültige ID verwenden, damit
‫das hier dann eine andere Farbe bekommt, richtig, kann
‫man das sehen?
‫Lassen Sie uns das noch einmal tun, falls Sie es nicht gesehen haben.
‫Und so, ja, es gibt uns eine andere Farbe.
‫Und ja, das kann für die Entwicklung sehr nützlich sein.
‫Sie könnten dieses Protokoll sogar in einer
‫Datei speichern, aber das ist ein bisschen zu viel für dieses
‫kleine Beispiel, also
‫ist dies mehr als genug
‫und Sie werden im Laufe
‫des Kurses sehen, dass es nützlich ist, es tatsächlich hier zu haben.
‫Okay, so verwenden wir Middleware von Drittanbietern
‫von npm und es gibt eine Menge Middleware dort und ich möchte
‫Ihnen das tatsächlich zeigen.
‫Also auf der
‫Express-Site selbst, also expressjs.
‫de.
‫x und so, hier
‫haben Sie alle Methoden, die auf der Anfrage stehen,
‫also natürlich Methoden auf Eigenschaften, also all das
‫Zeug, das wir zum Beispiel haben, Anfragen. Stelle, die wir bereits
‫verwendet haben oder hier auf die Antwort, haben
‫Sie beispielsweise Antwort. json oder
‫antwort. senden
‫und es gibt eine Menge anderer
‫Methoden und wir werden viele davon später
‫verwenden, aber hier haben Sie diese Ressourcen und die,
‫die ich Ihnen zeigen
‫möchte, ist Middleware und das ist eine Menge Middleware,
‫die Sie verwenden
‫können und das Express empfiehlt, okay?
‫Und wieder werden wir einige davon etwas später
‫verwenden und tatsächlich empfiehlt Express diese,
‫weil viele davon in Express 3 eingebaut waren, also
‫in einer
‫früheren Version, aber dann aus Express entfernt wurden.
‫Zum Beispiel Körper. Parser ist einer
‫von ihnen, aber tatsächlich in
‫Version 4 Punkt, ich glaube 14 oder 16,
‫wurde er wieder hinzugefügt und deshalb konnten wir mal sehen, wo
‫ist er?
‫Ja, deshalb konnten wir Ausdruck verwenden. json, um die
‫Daten aus dem Body zu parsen.
‫Davor müssten wir eigentlich den Körper benutzen. parser von npm und
‫verwenden Sie diesen, um die Daten aus dem Körper zu analysieren, aber
‫auch hier haben sie ihn erst kürzlich
‫wieder hinzugefügt, um die Verwirrung für Anfänger wie Sie etwas zu reduzieren.
‫Okay, spielen Sie also ein wenig
‫mit dieser Referenz herum.
‫Schauen Sie sich
‫einige der Sachen an, die wir vielleicht bereits gemacht haben, wenn
‫Ihnen danach ist, oder wenn nicht, können Sie jederzeit
‫direkt zum nächsten Video übergehen.