Essen gehen und die Grundlagen von Express.js verstehen

Essen gehen und die Grundlagen von Express.js verstehen

Wenn Sie jemals ein Restaurant besucht haben, können Sie die Grundlagen von Express verstehen. Aber wenn Sie gerade erst anfangen, Ihr erstes Node.js-Backend zu erstellen, könnten Sie auf eine holprige Fahrt warten.

Ja - es ist sicherlich einfacher, Node zu lernen, wenn Sie bereits Erfahrungen mit JavaScript gesammelt haben. Die Herausforderungen beim Erstellen eines Backends sind jedoch völlig anders als bei der Verwendung von JavaScript im Frontend.

Als ich Node lernte, entschied ich mich für den harten Weg. Ich studierte immer wieder eBooks, schriftliche Tutorials und Videos, bis ich endlich verstand, warum ich das tat, was ich tat.

Es gibt einen einfacheren Weg. Ich werde eine Restaurant-Analogie verwenden, um vier wichtige Teile Ihrer ersten Express-App zu erklären. Express.js ist ein beliebtes Framework zum Organisieren Ihres Codes, und ich würde es jedem Anfänger empfehlen. Ich werde gleich weiter erklären.

Hier sind die vier Hauptteile, die wir behandeln werden:

  1. Die erfordern Anweisungen
  2. Middleware
  3. Routing
  4. App.listen () / Server starten

In dieser Analogie sind Sie ein Restaurantbesitzer, der einen General Manager einstellen möchte - die Person, die alle Prozesse erstellt und den Ort so verwaltet, dass er reibungslos funktioniert und die Kunden zufrieden sind.

Hier ist eine Vorschau auf das, was als nächstes kommt:

Am Ende werden Sie die Funktionalität jedes Teils einer einfachen Express-App verstehen.

Schritt 1: Einstellung des Managers (Erklärungen erforderlich)

In diesem Beispiel sind Sie der Restaurantbesitzer. Und Sie müssen einen Experten beauftragen, um den täglichen Betrieb Ihres neuen Restaurants zu leiten. Sie sind sicherlich kein Experte, und Sie können es nicht dem Personal und der Küche überlassen, es herauszufinden.

Wenn Sie ein effizientes und sicheres Restaurant betreiben möchten, benötigen Sie jemanden, der Ihre Mitarbeiter bei maximaler Effizienz arbeiten lässt. Express ist der neue Manager.

Der erste Teil ist ziemlich einfach. Wie bei jedem anderen NPM-Paket müssen Sie das Express-Modul npm installieren und dann eine require- Anweisung verwenden, um das Modul zu laden.

Im Gegensatz zu vielen anderen NPM-Paketen müssen Sie auch diese Zeile verwenden:

const app = express();

Dies liegt daran, dass Sie eine Variable benötigen, um Ihre neue Express-Anwendung zu speichern. Express ist kein Standardbestandteil von Node.

Schritt 2: Entscheidungen im Restaurant treffen (Middleware)

Machen wir hier einen Schritt zurück. Was sind einige übliche Routinen, die in Restaurants passieren? Es gibt drei, die mir sofort in den Kopf springen:

  1. Neue Kunden gewinnen
  2. Essensbestellungen entgegennehmen
  3. Vorlage des Schecks am Ende des Essens

Für jeden gibt es eine Reihe von Überprüfungen, die Sie ausführen müssen, bevor Sie die Aktion ausführen können. Bevor Sie beispielsweise Kunden setzen, müssen Sie Folgendes wissen:

  1. Tragen sie ein Hemd und Schuhe (und Hosen)? Andernfalls können sie nicht gesetzt werden.
  2. Wenn sie an der Bar sitzen wollen, sind sie 21 Jahre alt (wenn Sie in den USA sind)?

Dies ist keine Strandbar! In ähnlicher Weise müssen Sie in Ihrem Code überprüfen, ob Anforderungen bestimmte Kriterien haben, bevor sie fortgesetzt werden können. Wenn beispielsweise eine Person versucht, sich bei Ihrer Site anzumelden:

  1. Haben sie einen Account?
  2. Haben sie das richtige Passwort eingegeben?

Hier kommt das Konzept der Middleware ins Spiel. Mit den Middleware-Funktionen können Sie auf eingehende Anforderungen reagieren und diese ändern, bevor Sie eine Antwort zurücksenden.

In Ihrem Restaurant benötigen Sie eine Reihe von Regeln, um zu entscheiden, ob Sie eingehende Personen aufnehmen sollen oder nicht. Nehmen wir an, ein Paar geht durch Ihre Tür. Sie haben eine Regel, bevor Sie ihnen einen Tisch geben: Tragen sie ein Hemd und Schuhe?

Zunächst beginnen Sie mit app.use (). Dies bedeutet, dass dies einfach Regeln sind, die für die nächsten Routen angewendet werden müssen. Sie sind kein GET, POST, PUT oder DELETE.

In Zeile 4 haben Sie eine anonyme Funktion mit den Parametern req, res und next. Für die Zwecke dieses Codeblocks überprüfen Sie lediglich die Anforderung (req), um festzustellen, ob sie Hemd und Schuhe enthält.

Sie müssen am Ende auch die next () -Funktion verwenden, da Sie hier lediglich die Kleidung validieren. Später auf den Routen erlauben Sie den Gästen, einen tatsächlichen Tisch zu bekommen.

In den Zeilen 5 und 6 prüfen Sie, ob sie ein Hemd und Schuhe haben.

In den Zeilen 7 bis 9 fahren Sie nur fort, wenn beide vorhanden sind.

Dem obigen Codeblock fehlt eine wichtige Sache: Ein Pfad . Dies ist die spezifische Zeichenfolge, die in der Anforderung enthalten ist. Und da ein Pfad fehlt, wird er bei jeder einzelnen Anforderung ausgeführt.

Kannst Du Dir vorstellen? Wenn Kunden das Restaurant betraten… Essen bestellten… nach dem Scheck fragten… mussten die Mitarbeiter auf und ab schauen, um sicherzustellen, dass sie bekleidet waren! Das ist ein schneller Weg, um aus dem Geschäft auszusteigen.

Also ändern wir Zeile 4 im obigen Beispiel. Jetzt führen wir diesen Code nur aus, wenn ein Benutzer entlang der Route '/ table' anfordert.

Die vollständige Erklärung:

Schritt 3: Ausführen allgemeiner Routinen (Routing)

Fahren wir mit dem Sitzbeispiel fort. Bisher wissen wir nur, wie wir überprüfen können, ob jemand Platz nehmen soll oder nicht. Aber wir wissen eigentlich nicht, wie wir sie zu einem Tisch führen und sie hinsetzen sollen.

Hier kommen Routen ins Spiel. Mithilfe von Routen können wir bestimmte Aktionen basierend auf dem Pfad skripten . Die Optionen sind GET, POST, PUT und DELETE, aber wir werden uns vorerst auf GET und POST konzentrieren.

Im Kontext eines Restaurants müssen wir eine GET-Anfrage erstellen, um einen bestimmten Tisch auszuwählen und die Gäste unterzubringen. GETs ändern oder ergänzen Ihre Datenbank nicht. Sie rufen nur Informationen basierend auf bestimmten Parametern ab.

Nehmen wir in diesem Fall an, Sie müssen eine Prozedur erstellen, um eine Gruppe von zwei Personen unterzubringen. Die Nummer 2 kam aus der Kundenanfrage .

Okay, bevor ich erkläre: Ja, dies sendet nur am Ende eine Nachricht. Es wurde noch kein bestimmter Tisch für den Kunden gefunden. Ich müsste ein Array nach einer offenen Tabelle durchsuchen, eher eine Hintergrundgeschichte haben ... das liegt außerhalb des Rahmens dieses Tutorials.

In Zeile 12 definieren wir die Prozedur zum Suchen einer Tabelle, wenn ein Gast entlang der Route '/ table' anfordert . Genau wie im obigen Middleware-Beispiel stehen Anforderungs- und Antwortparameter zur Verfügung. Es hat auch einen Parameter , Menge. In diesem Beispiel sind dies zwei.

Tatsächlich ist alles nach der Funktionsdeklaration in Zeile 12 technisch Middleware, da es eine Benutzeranforderung ändert. Sie sehen in der Abbildung am Ende.

In Zeile 13 greifen wir über die Parameter des Anforderungsobjekts auf die Anzahl der Personen in der Partei zu . Das wird nirgendwo deklariert, da die Anfrage vom Benutzer kam und wir keinen Front-End-Code haben. So könnte die Anfrage aussehen, wenn dies eine echte App wäre:

req = { params: { amount: 2; }}

In Zeile 13 greift unsere Partei Variable die Menge Eigenschaft des params Objekt innerhalb der Anfrage .

Schließlich senden wir in Zeile 14 eine Antwort an den Kunden zurück: Wir suchen nach einem Tisch mit geeigneter Größe.

Das ist viel auf einmal. Hier ist ein Diagramm:

Schritt 3.5: Machen Sie Ihr Restaurant effizient (Router)

Jetzt können Sie den vollständigen Pfad von der Anforderung bis zur Antwort verfolgen. Mit zunehmender Größe Ihrer App möchten Sie jedoch nicht die Regeln für jede Route einzeln codieren. Sie werden feststellen, dass einige Routen dieselben Regeln verwenden. Daher müssen Sie eine Möglichkeit finden, einen Regelsatz auf mehrere Routen anzuwenden.

In Bezug auf die Sitzplätze können Sie Ihre Kunden entweder an der Bar oder an einem Tisch platzieren. Diese haben gemeinsame Regeln wie Hemd + Schuhe, aber für das Sitzen an der Bar muss jedes Mitglied der Gruppe 21 Jahre alt sein.

Und um Kunden zu bedienen, müssen Sie ein etwas anderes Verfahren anwenden, um die Vorspeise, das Hauptgericht und das Abendessen zu servieren. Aber diese drei Routen haben auch viele Gemeinsamkeiten.

Hier kommt der Router ins Spiel . Mit dem Router können Sie Ihre Routen gruppieren, um gemeinsame Regeln zu erstellen.

Wir müssen Middleware erstellen, um jeden dieser Fälle abzudecken. Ich werde vorerst nur die Sitzkoffer behandeln, da der obige Code überschrieben wird.

Hier ist das vollständige Code-Snippet:

Ich werde jeden Teil einzeln behandeln.

In Zeile 4 deklarieren wir unseren Router.

In den Zeilen 6 und 14 haben wir jetzt seatRouter.use () anstelle von app.use (), um anzuzeigen, dass diese Middleware nur mit SeatingRouter-Routen zusammenhängt.

Schließlich fügen wir in Zeile 21 weitere Middleware hinzu, um zu zeigen, dass jede Routing-Route mit '/ seating' beginnt. Wenn also jemand einen Platz an der Bar anfordert, lautet der vollständige Pfad "/ Sitzplatz / Bar". Dies kann sich etwas unpassend anfühlen, da Sie möglicherweise erwarten, dass der Pfad definiert wird, wenn Sie den Router in Zeile 4 erstellen. Das ist normal!

Hier ist das in Diagrammform:

Wenn Sie eine GET-Route hinzufügen, geht diese über die letzte Anweisung hinaus, in der Sie dem Router Routen zuweisen.

Schritt 4: Eröffnung für Unternehmen (Häfen)

Okay, letzter Teil. Bisher haben Sie einen Manager eingestellt, festgelegt, was zu tun ist, bevor Kundenanfragen angenommen werden, und festgelegt, was mit bestimmten Kundenanfragen zu tun ist, sobald diese eingehen. Jetzt müssen Sie nur noch die Adresse für den Ort bestimmen, an dem dies alles geschehen soll.

Ihr Server verfügt über Ports , die der Adresse des Restaurants selbst entsprechen.Da Ihr Server viele Arten von Restaurants (oder serverseitigen Skripten) gleichzeitig verarbeiten kann, müssen Sie ihm mitteilen, wo jedes Skript ausgeführt werden soll.

Im obigen Beispiel ist der Port 3000 und befindet sich auf Ihrem Computer. Wenn Sie also Folgendes eingeben:

//localhost:3000/

In Ihrem Browser und wenn Sie Ihre Node-App ausführen, kann der Server das spezifische Skript ausführen. In diesem Fall protokollieren Sie die Nachricht in der Konsole, sobald Sie die URL eingeben, und können jede Ihrer Routen verwenden . Wenn das Restaurant selbst Ihre gesamte App ist, ist es jetzt unter der Adresse 3000 für den Geschäftsbetrieb geöffnet.

Hat dir das gefallen? Klatschen Sie, damit auch andere es entdecken können. Wenn Sie benachrichtigt werden möchten, wenn ich zukünftige Tutorials mit Analogien veröffentliche, melden Sie sich hier an: