In der Übung in der vorherigen Lektion
haben wir einen einfachen HTTP-Server erstellt, der statischen Inhalte bereitstellen könnte.
Dieser wurde vollständig mit Node.js erstellt.
Nun, da wir über Express gelernt haben,
das minimalistische Framework, das die Entwicklung des Servers über Node.js unterstützt,
lassen Sie uns nun untersuchen, wie wir Express verwenden können, um den gleichen Server in dieser Übung zu bauen.
Um zu beginnen, gehen Sie zu dem Ordner Node.js, den wir verwendet haben, um
den gesamten Code für diesen Kurs zu speichern, und erstellen Sie dann einen neuen Ordner mit dem Namen node-express,
und bewegen Sie sich dann in diesen Ordner.
Jetzt werden wir
einen Öffentlichen Ordner hier innerhalb des Node Express-Ordner erstellen.
Dann gehen wir zu diesem Knoten HTTP Öffentlicher Ordner und kopieren Sie dann diese beiden Dateien,
die index.HTML und aboutus.html in den öffentlichen Ordner node-express.
Wir werden diese beiden Dateien mit
dem Express-Server bereitstellen, den wir in dieser Übung erstellen werden.
Jetzt gehen Sie zu den Terminals.
Wechseln Sie in den Node-Express-Ordner im Terminal und geben Sie dann an der Eingabeaufforderung npm init ein,
um eine Knotenanwendung zu initialisieren.
Dann, für den Paketnamen lassen Sie uns einfach node-express verwenden,
und für die Beschreibung sagen wir Node Express Examples,
und Einstiegspunkt ist index.js,
und der Rest davon wie zuvor,
und lassen Sie uns die package.json-Datei erstellen.
Lassen Sie mich nun
das Projekt mit dem Editor Visual Studio Code in meinem Fall öffnen und dann
in der package.json-Datei gehen wir hinein und fügen Sie das neue Skript namens start hinzu,
das Knotenindex ist und die Änderungen speichern.
Nun, da wir das Knotenmodul initialisiert haben,
lassen Sie uns voran und installieren Sie das Express-Framework innerhalb
des Projekts, um es zu nutzen, um unseren Express-Server zu bauen. Geben
Sie an der
Eingabeaufforderung npm install express ein.
So würden Sie also ein
Knotenmodul eines Drittanbieters installieren, wenn Sie diesen Kurs zum
ersten Mal nehmen und nicht die vorherigen Kurse besucht haben,
dann ist dies etwas, das wichtig zu beachten ist.
So installieren Sie ein Knotenmodul, indem Sie das
Minus-Minus-Speichern hinzufügen, wir speichern auch die Informationen, dass
dieses Drittanbieter-Knoten-Modul eine Abhängigkeit
für unser Projekt ist und diese Informationen in der Datei package.json gespeichert werden.
Wenn Sie die vorherigen Kurse der Spezialisierung absolviert
haben, wissen Sie bereits über diese Informationen.
Also, lassen Sie uns fortfahren und das Express-Modul installieren.
Wie Sie feststellen können,
verwenden wir Express Version 4.16.3 in diesem Kurs.
Also, gehen wir jetzt zurück zu unserem Code.
Wenn Sie sich die Datei package.json ansehen,
sehen Sie, dass innerhalb der Datei package.json, indem Sie Express installieren, bereits
eine andere Eigenschaft sehen, die in der package.json Datei enthalten ist, die als Abhängigkeiten bezeichnet wird.
Diese Abhängigkeiten verfolgen alle Pakete, von
denen dieses aktuelle Projekt abhängig sein wird.
Hier sehen Sie, dass Express
dort installiert wird und die entsprechende Version von Express hier installiert wird.
Dies erklärt, dass dieses Projekt von der
Express-Version mindestens 4.16.3 abhängig ist.
Darüber hinaus sehen Sie auch diesen Ordner namens Knotenmodule, die hier erstellt werden.
Hier werden also alle Knotenmodule von Drittanbietern
gespeichert, die von Ihrer Anwendung installiert werden.
Nun, wenn wir ein Git-Commit machen,
wollen wir diesen Knoten Modulordner nicht festschreiben.
Um das zu ignorieren,
können Sie eine Datei
namens gitignore erstellen und innerhalb der.gitignore Datei,
lassen Sie uns node_ Module eingeben.
Dies lässt Git also wissen, dass wir
den Knoten Modulordner nicht in das Git-Repository übertragen möchten.
Also, damit lassen Sie uns die Änderungen speichern.
Wenn Sie also jetzt ein Git-Repository erstellen,
wird der Knoten Modulordner ignoriert. Dies
ist nicht erforderlich, da Sie den Ordner „Knotenmodule“ jederzeit neu erstellen können, wenn
Sie dieses Projekt aus Ihrem Git-Repository klonen, indem Sie einfach npm install eingeben.
Dies wird sich die Datei package.json
ansehen und alle Abhängigkeiten
und die Entwicklungsabhängigkeiten betrachten, die sich in der
Datei package.json befinden und automatisch alle diese Pakete für Sie installiert werden.
Nun, da wir dies abgeschlossen haben,
lassen Sie uns unser erstes Express-Projekt erstellen,
so dass wir eine Datei mit dem Namen index.js erstellen und in der index.js
werden wir eine const express require express deklarieren.
Nun werden Sie feststellen, dass Express ein Knotenmodul eines Drittanbieters ist und es
in unserem Knotenmodulordner im richtigen Verzeichnis installiert wurde.
Also, wenn wir dies hier erklären, sagen, dass dieses Express-Modul erforderlich ist,
dann wird es automatisch aus dem Knoten Modulordner in unsere Anwendung aufgenommen werden.
Installieren Sie jetzt auch HTTP
das Kernmodul hier.
Nun, da wir dies installiert haben,
lassen Sie uns den Kursnamen als
lokalen Host und Portnummer als 3000 erstellen.
Sie sehen also, dass wir genau die gleiche Art und Weise verwenden,
diese Übung zu machen, wie wir es für die HTTP-Übung früher getan haben.
Jetzt, an diesem Punkt,
werden wir diese const namens app als express deklarieren.
Auf diese Weise sagen wir, dass unsere Anwendung das Express-Knotenmodul verwenden wird.
Sobald wir das tun,
bietet Express eine Reihe von Methoden, die wir verwenden können, um unseren Webserver zu konstruieren.
Danach sagen wir app.use () und innen hier
werden wir eine Funktion deklarieren, die aufgerufen wird, um unseren Server einzurichten.
Also, diese Funktion nimmt drei Parameter req,
die die Anforderung ist; res,
die die Antwort ist, und nächste.
Jetzt, wie wir gesehen haben, verwendet Express zusätzliche Middleware.
Die nächste wird verwendet, wenn Sie
zusätzliche Middleware aufrufen müssen, um die Arbeit in Ihrem Namen zu erledigen.
Wir werden die Verwendung von als nächstes in einigen der späteren Übungen sehen,
aber die Funktion hier wird drei Parameter req, res, und weiter nehmen.
Weiter ist ein optionaler Parameter,
der nicht enthalten sein kann, wenn Sie ihn nicht in Ihrem Code verwenden möchten.
Also, im Inneren werden wir sagen,
Konsolenprotokoll und dann,
wir werden diese Header protokollieren,
und wir werden mit dem Statuscode auf 200 reagieren.
Legen Sie Header-Inhaltstyp
als Text HTML fest.
Sie bemerken also, dass ein Großteil dieses Codes der Art und
Weise, wie wir unsere Knotenanwendung einrichten, sehr ähnlich aussieht.
Also, wir sagen res.end und
hier HTML Körper h1.
Wir sagen einfach, das ist ein Express-Server und schließen
die Tanks dort ab, und das war's.
Aus Ihrem Verständnis des Knotens HTTP
verstehen Sie bereits, was diese drei tun
und das Gleiche wird auch auf dem Express-Server getan.
Nun, da wir den Server mit der App eingerichtet haben,
werden wir den Server einrichten,
und dann werden wir den HTTP CreateServer verwenden,
und damit CreateServer wird jetzt App als Funktionsparameter dort nehmen,
und danach werden wir einfach sagen server.listen Port,
Hostname und die
Pfeilfunktion hier, in der ich ausdrucken werde,
Konsole, Log-Backcoat-Server läuft bei HTTP: //hostname:port,
das ist es. Sie werden also sehen, dass dieser Teil dem sehr
ähnlich ist, was Sie für die HTTP-Übung getan haben,
außer dass der CreateServer jetzt diese App nimmt,
die wir früher Express erklärt haben.
Also, Express fügt zusätzliche Funktionalität hinzu, die
vom HTTP-Server verwendet werden, den wir mit Notiz erstellen.
Sobald wir damit fertig sind,
lassen Sie uns die Änderungen speichern,
und dann werden wir den Server starten
und einen Blick darauf werfen, was der Server aufbringen wird.
Gehen Sie in das Terminal, fügen Sie das Terminal hinzu,
geben Sie NPM start ein und Sie werden sehen, dass Ihr Server läuft.
Wenn wir nun entweder vom Browser oder vom Postboten darauf zugreifen,
werden Sie sehen, was es dient.
Also, hier habe ich Postbote und Geld.
Lassen Sie mich die GET-Anfrage wie zuvor an localhost 3.000 senden
und Sie werden sehen, dass dies den HTML-Code bereitstellt, den wir darin enthalten,
und so ist dies ein Express-Server. Wenn Sie
auf die Vorschau klicken,
wird dies Ihnen zeigen, wie es in einem Browser aussehen wird,
und dies zeigt die rohe Version des Codes, der von der Serverseite zurückgesendet wurde,
und Sie können sehen, dass der Statuscode 200 ist, okay?
Und der andere Header-Informationsvektor wurde von der Server-Site gesendet.
Beachten Sie insbesondere, dass es x powered by Express in der Kopfzeile sagt.
Damit schließen wir den ersten Teil dieser Übung ab, wo wir gesehen haben,
wie wir Express nutzen können, um einen einfachen Webserver einzurichten.
Lassen Sie mich jetzt den Server stoppen und dann das Git-Repository initialisieren,
also werde ich an der Eingabeaufforderung „git init“ und
dann „git status“ eingeben und Sie werden sehen, dass Dateien, die nicht verfolgt wurden,
also werde ich sagen „get and dropped“ und diese Dateien werden jetzt in das Git-Repository hinzugefügt,
und wenn Sie sagen, git status,
sehen Sie die Dateien, die hinzugefügt wurden.
Beachten Sie insbesondere, dass der Ordner „Knotenmodule“
nicht zum Git-Repository hinzugefügt wurde, da
wir in der.gitignore Datei explizit angegeben haben, dass
der Ordner „Knotenmodule“ nicht im Git-Repository enthalten sein sollte.
Also, lassen Sie uns jetzt unseren Commit-Austausch überprüfen, indem wir git
commit minus m Express-Beispiel sagen,
und wir haben dies zu unserem Git-Repository verpflichtet.
Im zweiten Teil dieser Übung
werden wir uns die Verwendung von Express Middleware namens Morgan ansehen.
Morgan wird verwendet, um Informationen auf dem Bildschirm zu
protokollieren, so dass es Informationen über eingehende Anfragen auf dem Bildschirm protokolliert, so dass wir
einige Informationen sehen können, die in unserer Konsole gedruckt werden.
Außerdem werden wir sehen, wie wir unseren Express-Server einrichten können, um statische HTML-Dateien bereitzustellen.
Um zu beginnen, geben Sie an der Eingabeaufforderung npm
install Morgan minus minus save ein.
Jetzt wird Morgan eine Abhängigkeit sein, die wir in unserer Anwendung verwenden werden.
Also, das ist, warum es minus,
minus sparen und das würde Install erhalten,
und Sie können sehen, dass ich Morgan Version 1.9.0 in diesem Kurs verwende.
Jetzt, da wir Morgan installiert haben,
lassen Sie uns sehen, wie wir es innerhalb unserer Anwendung nutzen können.
Also gehen Sie zu unserer Anwendung,
der Weg, um Morgan zu nutzen, ist hier
const Morgan erfordern Morgan zu erklären,
und dann werden wir sagen,
„App verwenden Morgan mit der Entwicklung“.
Also, das ist die Entwicklungsversion.
So wird es nach Bedarf zusätzliche Informationen auf dem Bildschirm ausdrucken.
Jetzt gehen Sie in unsere Bewerbung.
Innerhalb unserer Anwendung werde ich nicht die gesamten Header protokollieren.
Lassen Sie mich stattdessen das entfernen, da Morgan
genügend Informationen protokolliert, damit wir uns ansehen
können, und ich werde meinen Server so einrichten, dass die HTML-Dateien aus dem öffentlichen Ordner bereitgestellt werden.
Um dies zu tun,
werde ich die Verwendung deklarieren und statisch ausdrücken.
Dies weist Express an, die statischen Dateien von doppeltem Unterstrich dirname zu dienen.
Also, das sagt die Wurzel
dieses Projekts und sie werden diese Dateien
in double_dirname, plus/ public finden. Denken Sie
daran, dass wir den Öffentlichen Ordner im Knoten Express-Ordner erstellt haben.
Dies informiert Express, dass Sie sich
diesen bestimmten Ordner im Stammordner dieses Projekts und innerhalb des Öffentlichen Ordners ansehen werden.
Dies ist also der Ordner, aus dem
statische HTML-Dateien von meinem Express-Server bereitgestellt werden.
Nachdem Sie diese Änderungen vorgenommen haben,
speichern wir die Änderungen
und starten Sie dann unseren Server neu,
und sehen Sie dann, wie es funktioniert.
Gehen
wir zu dieser Eingabeaufforderung, geben Sie npm start ein,
um unseren Server zu starten,
und sobald der Server läuft,
lassen Sie uns untersuchen, was es aufbringen wird, wenn wir verschiedene Anfragen an diesen Server senden.
Verwenden Sie Postman, lassen Sie uns zuerst eine get-Anfrage an den lokalen Host senden: 3.000
und Sie werden feststellen, dass es die Datei index.html bereitstellt.
Wir haben unseren Server so eingerichtet, dass er statische Dateien aus dem öffentlichen Ordner
bereitstellt, und wenn wir nur localhost: 3000 sagen,
wird es die Datei index.html bereitstellen.
So funktioniert Ihr typischer Webserver.
Also, das ist es, was wir am Ende unseren Express-Server eingerichtet haben.
Nun, lassen Sie uns localhost eingeben: 3000 about.html und senden Sie die Anfrage,
und sagt, dass dies über unsere Strategie HTML ist,
und auch die über uns HTML-Datei wurde hier oben gespeichert.
In der Vorschau
können Sie also die resultierende Datei sehen, die von unserer Server-Site bereitgestellt wurde.
Lassen Sie uns versuchen, auf eine nicht vorhandene Datei zuzugreifen,
und Sie werden sehen, dass, wenn Sie versuchen, auf eine nicht vorhandene Datei zuzugreifen,
es standardmäßig auf die zweite Einrichtung, die wir in unserem Code getan haben, der
besagt, dass dies ein Express-Server ist.
Wir haben auf unserem Express-Server nicht angegeben, wie
Situationen behandelt werden sollen, in denen er auf eine Datei stößt, die nicht existiert.
Deshalb wird der Standardwert verwendet, der direkt unter
dem statischen Express eingerichtet wurde, der den Standardwert bereitstellt, und natürlich
ist dies nicht das idealste Verhalten,
aber das ist, was wir in diesem Moment auf dem Express-Server haben.
Später werden wir den Express-Server so ändern, dass er
Fehler genauer behandelt, in späteren Übungen.
Dies ist auch ein guter Zeitpunkt für Sie, ein Git-Commit der Änderungen zu machen.
Also, lassen Sie uns den Git-Status überprüfen, nachdem Sie den Server gestoppt haben,
und wir werden die geänderten Dateien hinzufügen,
und dann Git Commit
minus m Express tun,
statische Dateien servieren.
Das war's. Damit
schließen wir diese Übung ab.
In dieser Übung haben wir gesehen, wie wir
einen einfachen Webserver einrichten können, um Inhalte in unserem Namen bereitzustellen.