1 00:00:01,350 --> 00:00:02,270 ‫Kursleiter: 2 00:00:02,270 --> 00:00:04,360 ‫Lassen Sie uns nun eine 3 00:00:04,360 --> 00:00:06,880 ‫Middleware-Funktion eines Drittanbieters von npm namens 4 00:00:06,880 --> 00:00:10,313 ‫Morgan verwenden, um unser Entwicklungsleben ein wenig zu erleichtern. 5 00:00:11,890 --> 00:00:14,450 ‫Wie bereits erwähnt, verwenden wir 6 00:00:14,450 --> 00:00:18,400 ‫eine Middleware namens Morgan, die eine sehr beliebte Logging-Middleware ist. 7 00:00:18,400 --> 00:00:21,960 ‫Also eine Middleware, die es uns ermöglicht, Anforderungsdaten direkt 8 00:00:21,960 --> 00:00:23,640 ‫in der Konsole anzuzeigen. 9 00:00:23,640 --> 00:00:26,320 ‫Okay, dann lass es mich installieren und du 10 00:00:26,320 --> 00:00:28,863 ‫wirst sehen, wie das funktioniert, okay? 11 00:00:28,863 --> 00:00:33,340 ‫Also, ich möchte diesen Prozess jetzt hier nicht beenden, also werde ich 12 00:00:33,340 --> 00:00:36,900 ‫hier in VS Code ein neues Terminal erstellen und dafür 13 00:00:36,900 --> 00:00:40,300 ‫drücke ich hier und so auf diese Plus-Schaltfläche, jetzt 14 00:00:40,300 --> 00:00:42,750 ‫bekommen wir ein neues Terminal und 15 00:00:42,750 --> 00:00:44,390 ‫ich mache es 16 00:00:44,390 --> 00:00:48,853 ‫nicht Ich möchte nicht aktualisieren, also nein, und jetzt npm install morgan. 17 00:00:50,340 --> 00:00:52,500 ‫Okay, wie bereits erwähnt, 18 00:00:52,500 --> 00:00:54,330 ‫wird diese 19 00:00:54,330 --> 00:00:57,340 ‫Logging-Middleware unser Entwicklungsleben ein wenig erleichtern. 20 00:00:57,340 --> 00:00:58,710 ‫Aber es ist 21 00:00:58,710 --> 00:01:01,470 ‫immer noch Code, den wir tatsächlich in 22 00:01:01,470 --> 00:01:04,630 ‫unsere Anwendung aufnehmen werden, und deshalb ist es keine 23 00:01:04,630 --> 00:01:07,270 ‫Entwicklungsabhängigkeit, sondern nur eine einfache reguläre Abhängigkeit, 24 00:01:07,270 --> 00:01:10,800 ‫okay und so, deshalb habe ich save dev hier nicht 25 00:01:10,800 --> 00:01:14,110 ‫angegeben, denn wieder ist es kein a Dev-Abhängigkeit wirklich. 26 00:01:14,110 --> 00:01:18,640 ‫Okay, wir haben es in unserem Paket. json hier jetzt, morgan und so, 27 00:01:18,640 --> 00:01:21,763 ‫lass uns fortfahren und es in unserem Code fordern. 28 00:01:23,190 --> 00:01:26,593 ‫Also, hier oben wieder const morgan ist 29 00:01:29,500 --> 00:01:33,450 ‫gleich require morgan und Sie sehen wieder diese 30 00:01:33,450 --> 00:01:35,800 ‫Art von Konvention, die das 31 00:01:35,800 --> 00:01:37,530 ‫require aufdecken wird, 32 00:01:37,530 --> 00:01:41,750 ‫wenn Sie denselben Namen wie der Paketname selbst verwenden. 33 00:01:41,750 --> 00:01:43,850 ‫Wir haben also unsere Middleware hier, 34 00:01:43,850 --> 00:01:46,590 ‫also fügen wir sie gleich danach hinzu oder 35 00:01:46,590 --> 00:01:48,623 ‫schreiben wir als erste. 36 00:01:49,480 --> 00:01:52,150 ‫Okay, und der Quellcode wächst ein 37 00:01:52,150 --> 00:01:53,300 ‫wenig, 38 00:01:53,300 --> 00:01:55,670 ‫also lassen Sie uns hier 39 00:01:55,670 --> 00:01:57,603 ‫einige Kommentare hinzufügen, also 40 00:02:01,170 --> 00:02:05,753 ‫zuerst Middleware, dann hier unten beginnen wir mit unseren Route-Handlern. 41 00:02:11,510 --> 00:02:15,623 ‫Gut, dann sagen wir mal, wir haben unsere Routen. 42 00:02:20,050 --> 00:02:21,950 ‫Und dann endlich hier unten starten 43 00:02:21,950 --> 00:02:23,173 ‫wir den Server. 44 00:02:28,405 --> 00:02:31,630 ‫Okay, nur um unseren Code etwas lesbarer und 45 00:02:31,630 --> 00:02:33,700 ‫einfacher zu scannen zu machen. 46 00:02:33,700 --> 00:02:35,980 ‫Wir haben also diese erste Middleware, 47 00:02:35,980 --> 00:02:38,453 ‫aber lassen Sie uns vorher unsere verwenden. 48 00:02:39,520 --> 00:02:41,750 ‫Also natürlich App. verwenden und 49 00:02:41,750 --> 00:02:44,223 ‫jetzt hier drin nennen wir Morgan. 50 00:02:45,300 --> 00:02:47,040 ‫Okay, und an diese 51 00:02:47,040 --> 00:02:48,460 ‫Funktion können wir ein 52 00:02:48,460 --> 00:02:49,684 ‫Argument übergeben, 53 00:02:49,684 --> 00:02:52,310 ‫das angibt, wie die Protokollierung aussehen soll. 54 00:02:52,310 --> 00:02:54,920 ‫Wir können dafür einige vordefinierte Strings verwenden, und 55 00:02:54,920 --> 00:02:57,493 ‫der, den ich verwenden werde, heißt dev. 56 00:02:58,550 --> 00:03:01,140 ‫Und tatsächlich können Sie hier die verschiedenen Optionen sehen, 57 00:03:01,140 --> 00:03:03,180 ‫damit VS Code wirklich schlau ist 58 00:03:03,180 --> 00:03:04,613 ‫und mir die Optionen 59 00:03:04,613 --> 00:03:07,170 ‫geben kann, die wir in diese Funktion übergeben können. 60 00:03:07,170 --> 00:03:08,500 ‫Okay, wie ich bereits 61 00:03:08,500 --> 00:03:11,080 ‫erwähnt habe, werde ich den namens dev verwenden. 62 00:03:11,080 --> 00:03:13,650 ‫Okay und das wars dann eigentlich. 63 00:03:13,650 --> 00:03:15,180 ‫Also haben wir es 64 00:03:15,180 --> 00:03:16,960 ‫benötigt und dann hier verwendet. 65 00:03:16,960 --> 00:03:18,500 ‫Also, sehr einfache Dinge, aber 66 00:03:18,500 --> 00:03:19,860 ‫ich denke, es 67 00:03:19,860 --> 00:03:23,170 ‫ist wichtig, tatsächlich zu versuchen, zu verstehen, wie das funktioniert. 68 00:03:23,170 --> 00:03:25,260 ‫Das Aufrufen dieser 69 00:03:25,260 --> 00:03:28,407 ‫Morgan-Funktion wird also eine ähnliche 70 00:03:28,407 --> 00:03:29,910 ‫Funktion wie 71 00:03:29,910 --> 00:03:32,550 ‫diese hier und so zurückgeben 72 00:03:32,550 --> 00:03:36,010 ‫dieses Paket und das ist eine 73 00:03:36,010 --> 00:03:37,720 ‫weitere sehr 74 00:03:37,720 --> 00:03:38,810 ‫schöne 75 00:03:38,810 --> 00:03:41,170 ‫Übung, von der wir 76 00:03:41,170 --> 00:03:43,513 ‫tatsächlich einiges lernen können. 77 00:03:45,090 --> 00:03:50,090 ‫Suchen wir also nach morgan auf GitHub, also sind normalerweise alle 78 00:03:50,440 --> 00:03:53,430 ‫diese Pakete immer auf GitHub und 79 00:03:53,430 --> 00:03:55,620 ‫dort können wir uns dann 80 00:03:55,620 --> 00:03:57,463 ‫ihren Open-Source-Code ansehen. 81 00:03:58,410 --> 00:04:02,160 ‫Okay und Morgan ist eigentlich ein sehr einfaches Paket und so müssen 82 00:04:02,160 --> 00:04:05,930 ‫wir nur zu diesem Index gehen. js-Datei, das ist normalerweise 83 00:04:05,930 --> 00:04:08,000 ‫der Einstiegspunkt und in diesem 84 00:04:08,000 --> 00:04:11,233 ‫Fall ist es die einzige Datei, die es gibt. 85 00:04:12,680 --> 00:04:16,020 ‫Okay, ich werde jetzt nicht den ganzen Code durchgehen, aber 86 00:04:16,020 --> 00:04:18,510 ‫ich möchte hervorheben, dass der Hauptexport aus 87 00:04:18,510 --> 00:04:21,330 ‫dieser Datei hier morgan ist, also eine Funktion 88 00:04:21,330 --> 00:04:23,780 ‫namens morgan, also lassen Sie uns danach 89 00:04:23,780 --> 00:04:24,880 ‫suchen und 90 00:04:26,070 --> 00:04:27,623 ‫hier ist sie tatsächlich. 91 00:04:28,460 --> 00:04:31,960 ‫Okay, und wenn wir das Paket in 92 00:04:31,960 --> 00:04:35,520 ‫unserem Code benötigen, wird diese Morgan-Funktion zurückgegeben, richtig? 93 00:04:35,520 --> 00:04:38,190 ‫Auch weil sie ein Modul verwenden. export und 94 00:04:38,190 --> 00:04:41,110 ‫das ist der Standardexport, genau wie wir 95 00:04:41,110 --> 00:04:44,650 ‫es vor ein oder zwei Abschnitten in der 96 00:04:44,650 --> 00:04:47,650 ‫Vorlesung über die Pflichtmodule gelernt haben, oder? 97 00:04:47,650 --> 00:04:49,720 ‫Also, diese Morgan-Funktion hier 98 00:04:49,720 --> 00:04:54,720 ‫wird wieder diese Morgan-Funktion hier in diesem Code sein, okay? 99 00:04:55,520 --> 00:04:57,490 ‫Sehen wir uns an, was 100 00:04:57,490 --> 00:05:00,830 ‫diese Funktion macht und ich kümmere mich nicht um 101 00:05:00,830 --> 00:05:02,150 ‫diese Implementierung 102 00:05:02,150 --> 00:05:06,000 ‫hier. Was ich Ihnen wirklich zeigen wollte, ist, dass diese Funktion 103 00:05:06,000 --> 00:05:07,650 ‫tatsächlich eine andere Funktion 104 00:05:07,650 --> 00:05:09,850 ‫zurückgibt, die der Logger ist, und 105 00:05:09,850 --> 00:05:11,600 ‫Sie sehen, dass diese Funktion 106 00:05:11,600 --> 00:05:14,630 ‫nur unsere eigene hat Middleware-Funktionen haben diese sehr 107 00:05:14,630 --> 00:05:17,020 ‫typische Signatur von Request, Response und Next. 108 00:05:17,020 --> 00:05:18,200 ‫Okay? 109 00:05:18,200 --> 00:05:22,120 ‫Diese Funktion ist also genau wie unsere eigenen Middleware-Funktionen. 110 00:05:22,120 --> 00:05:24,060 ‫Und so sehen Sie, dass es 111 00:05:24,060 --> 00:05:26,620 ‫am Ende, wenn es fertig ist, auch als nächstes 112 00:05:26,620 --> 00:05:28,250 ‫anruft, also genau wie wir. 113 00:05:28,250 --> 00:05:30,370 ‫Es handelt sich also nur um 114 00:05:30,370 --> 00:05:33,393 ‫eine ganz normale Middleware-Funktion, genau wie die, die wir schreiben. 115 00:05:33,393 --> 00:05:35,078 ‫Okay? 116 00:05:35,078 --> 00:05:37,067 ‫Gehen wir also hierher zurück und 117 00:05:37,067 --> 00:05:40,430 ‫sehen wir uns jetzt das Ergebnis hier in unserem Terminal an. 118 00:05:40,430 --> 00:05:42,660 ‫Gehen wir also zu diesem ersten zurück, 119 00:05:42,660 --> 00:05:44,500 ‫also wechseln wir zwischen den 120 00:05:44,500 --> 00:05:47,423 ‫verschiedenen Terminals, die wir in VS Code geöffnet haben. 121 00:05:49,190 --> 00:05:51,190 ‫Geben Sie uns hier etwas mehr Platz, 122 00:05:51,190 --> 00:05:52,460 ‫löschen Sie dies 123 00:05:52,460 --> 00:05:54,900 ‫tatsächlich, da Sie den unteren Rand des Bildschirms 124 00:05:54,900 --> 00:05:56,710 ‫möglicherweise nicht so gut sehen können. 125 00:05:56,710 --> 00:05:59,070 ‫Also ja, lassen Sie uns jetzt 126 00:05:59,070 --> 00:06:00,893 ‫einfach eine Anfrage erstellen, 127 00:06:04,200 --> 00:06:07,240 ‫in Ordnung, gehen Sie zurück und los geht's. 128 00:06:07,240 --> 00:06:09,730 ‫Wir haben also die Informationen zu der Anfrage, die 129 00:06:09,730 --> 00:06:11,170 ‫wir gerade gestellt haben. 130 00:06:11,170 --> 00:06:13,060 ‫Wir erhalten also 131 00:06:13,060 --> 00:06:16,250 ‫die HTTP-Methode, die URL, den Statuscode, die Zeit 132 00:06:16,250 --> 00:06:18,637 ‫zum Zurücksenden der Antwort und 133 00:06:18,637 --> 00:06:21,603 ‫auch die Größe der Antwort in Byte. 134 00:06:22,440 --> 00:06:25,550 ‫Denken Sie also daran, dass wir hier eine andere 135 00:06:25,550 --> 00:06:28,183 ‫Option hätten verwenden können, zum Beispiel, tiny 136 00:06:28,183 --> 00:06:32,370 ‫war eine andere, das würde dann wahrscheinlich etwas anders aussehen und hier 137 00:06:32,370 --> 00:06:34,680 ‫sieht es tatsächlich ähnlich aus. 138 00:06:34,680 --> 00:06:36,380 ‫Es macht diese Einfärbung 139 00:06:36,380 --> 00:06:37,710 ‫dieses Statuscodes einfach 140 00:06:37,710 --> 00:06:40,923 ‫nicht und hat hier auch eine etwas andere Reihenfolge. 141 00:06:43,760 --> 00:06:46,893 ‫Okay und wenn wir etwas gemacht haben, wenn wir einen 142 00:06:48,060 --> 00:06:50,880 ‫Fehler verursacht haben, zum Beispiel einen 404, testen 143 00:06:50,880 --> 00:06:53,890 ‫wir das, indem wir hier eine ungültige ID verwenden, damit 144 00:06:56,380 --> 00:06:59,210 ‫das hier dann eine andere Farbe bekommt, richtig, kann 145 00:06:59,210 --> 00:07:00,410 ‫man das sehen? 146 00:07:01,246 --> 00:07:03,530 ‫Lassen Sie uns das noch einmal tun, falls Sie es nicht gesehen haben. 147 00:07:03,530 --> 00:07:06,440 ‫Und so, ja, es gibt uns eine andere Farbe. 148 00:07:06,440 --> 00:07:09,420 ‫Und ja, das kann für die Entwicklung sehr nützlich sein. 149 00:07:09,420 --> 00:07:11,100 ‫Sie könnten dieses Protokoll sogar in einer 150 00:07:11,100 --> 00:07:13,960 ‫Datei speichern, aber das ist ein bisschen zu viel für dieses 151 00:07:13,960 --> 00:07:15,060 ‫kleine Beispiel, also 152 00:07:15,060 --> 00:07:16,460 ‫ist dies mehr als genug 153 00:07:16,460 --> 00:07:17,800 ‫und Sie werden im Laufe 154 00:07:17,800 --> 00:07:20,910 ‫des Kurses sehen, dass es nützlich ist, es tatsächlich hier zu haben. 155 00:07:20,910 --> 00:07:23,620 ‫Okay, so verwenden wir Middleware von Drittanbietern 156 00:07:23,620 --> 00:07:28,160 ‫von npm und es gibt eine Menge Middleware dort und ich möchte 157 00:07:28,160 --> 00:07:30,010 ‫Ihnen das tatsächlich zeigen. 158 00:07:31,970 --> 00:07:34,143 ‫Also auf der 159 00:07:37,850 --> 00:07:46,490 ‫Express-Site selbst, also expressjs. 160 00:07:46,490 --> 00:07:57,400 ‫de. 161 00:07:57,400 --> 00:07:58,713 ‫x und so, hier 162 00:07:59,970 --> 00:08:01,980 ‫haben Sie alle Methoden, die auf der Anfrage stehen, 163 00:08:01,980 --> 00:08:03,980 ‫also natürlich Methoden auf Eigenschaften, also all das 164 00:08:03,980 --> 00:08:07,294 ‫Zeug, das wir zum Beispiel haben, Anfragen. Stelle, die wir bereits 165 00:08:07,294 --> 00:08:10,020 ‫verwendet haben oder hier auf die Antwort, haben 166 00:08:10,020 --> 00:08:12,920 ‫Sie beispielsweise Antwort. json oder 167 00:08:12,920 --> 00:08:14,610 ‫antwort. senden 168 00:08:14,610 --> 00:08:16,870 ‫und es gibt eine Menge anderer 169 00:08:16,870 --> 00:08:19,587 ‫Methoden und wir werden viele davon später 170 00:08:19,587 --> 00:08:22,840 ‫verwenden, aber hier haben Sie diese Ressourcen und die, 171 00:08:22,840 --> 00:08:24,210 ‫die ich Ihnen zeigen 172 00:08:24,210 --> 00:08:27,280 ‫möchte, ist Middleware und das ist eine Menge Middleware, 173 00:08:27,280 --> 00:08:28,520 ‫die Sie verwenden 174 00:08:28,520 --> 00:08:30,790 ‫können und das Express empfiehlt, okay? 175 00:08:30,790 --> 00:08:33,890 ‫Und wieder werden wir einige davon etwas später 176 00:08:33,890 --> 00:08:36,220 ‫verwenden und tatsächlich empfiehlt Express diese, 177 00:08:36,220 --> 00:08:39,510 ‫weil viele davon in Express 3 eingebaut waren, also 178 00:08:39,510 --> 00:08:40,650 ‫in einer 179 00:08:40,650 --> 00:08:43,550 ‫früheren Version, aber dann aus Express entfernt wurden. 180 00:08:43,550 --> 00:08:46,170 ‫Zum Beispiel Körper. Parser ist einer 181 00:08:46,170 --> 00:08:48,430 ‫von ihnen, aber tatsächlich in 182 00:08:48,430 --> 00:08:51,910 ‫Version 4 Punkt, ich glaube 14 oder 16, 183 00:08:51,910 --> 00:08:56,260 ‫wurde er wieder hinzugefügt und deshalb konnten wir mal sehen, wo 184 00:08:56,260 --> 00:08:57,380 ‫ist er? 185 00:08:57,380 --> 00:09:00,830 ‫Ja, deshalb konnten wir Ausdruck verwenden. json, um die 186 00:09:00,830 --> 00:09:03,380 ‫Daten aus dem Body zu parsen. 187 00:09:03,380 --> 00:09:07,360 ‫Davor müssten wir eigentlich den Körper benutzen. parser von npm und 188 00:09:07,360 --> 00:09:11,620 ‫verwenden Sie diesen, um die Daten aus dem Körper zu analysieren, aber 189 00:09:11,620 --> 00:09:14,040 ‫auch hier haben sie ihn erst kürzlich 190 00:09:14,040 --> 00:09:18,210 ‫wieder hinzugefügt, um die Verwirrung für Anfänger wie Sie etwas zu reduzieren. 191 00:09:18,210 --> 00:09:20,130 ‫Okay, spielen Sie also ein wenig 192 00:09:20,130 --> 00:09:21,950 ‫mit dieser Referenz herum. 193 00:09:21,950 --> 00:09:23,120 ‫Schauen Sie sich 194 00:09:23,120 --> 00:09:26,032 ‫einige der Sachen an, die wir vielleicht bereits gemacht haben, wenn 195 00:09:26,032 --> 00:09:28,660 ‫Ihnen danach ist, oder wenn nicht, können Sie jederzeit 196 00:09:28,660 --> 00:09:29,963 ‫direkt zum nächsten Video übergehen.