Was ist Express.js und warum sollten Sie es verwenden?

Express.js (oder "Express") ist ein NodeJS-Web-Framework, das auf dem Back-End (oder Server-Seite) von Websites und Webanwendungen verwendet wird. Express ist flexibel und minimalistisch, was bedeutet, dass es keine umfangreiche Sammlung unnötiger Bibliotheken und Pakete enthält und auch nicht vorschreibt, wie Sie Ihre Anwendung erstellen sollten.

Das Express-Framework erstellt APIs, die die Kommunikation über HTTP-Anforderungen und -Antworten erleichtern. Eines der bemerkenswerten Dinge an Express ist, dass es Entwicklern die vollständige Kontrolle über die Anfragen und Antworten gibt, die mit den einzelnen Methoden der App verbunden sind.

In diesem Tutorial erfahren Sie, wie und warum Sie Express in Ihren eigenen Projekten verwenden sollten.

Installieren von Express in Ihrem Projekt

Bevor Sie das Express-Framework verwenden können, müssen Sie es in Ihrem Projektverzeichnis installieren. Dies ist ein einfacher Prozess, der erfordert NodeJS und npm.

Das erste, was Sie tun müssen, ist ein Paket.json Datei (innerhalb Ihres Projektverzeichnisses/-ordners) mit dem folgenden Befehl:

npm init

Wenn Sie den obigen Befehl ausführen, wird ein Prozess eingeleitet, der Sie zu den folgenden Eingaben auffordert:

• Paketnamen
• Ausführung
• Beschreibung
• Einstiegspunkt
• Testbefehl
• Schlüsselwörter
• Autor
• Lizenz

Die Felder Paketname, Version, Einstiegspunkt und Lizenz haben alle Standardwerte, die Sie einfach durch Angabe Ihrer Werte überschreiben können. Wenn Sie jedoch die Standardwerte beibehalten möchten, können Sie stattdessen einfach den folgenden Befehl verwenden:

npm init -y

Die Ausführung des obigen Befehls erzeugt Folgendes: Paket.json Datei in Ihrem Projektverzeichnis:

{
"name": "myapp",
"version": "1.0.0",
"Bezeichnung": "",
"main": "index.js",
"Skripte": {
"test": "echo \"Fehler: kein Test angegeben\" && Ausgang 1"
},
"Schlüsselwörter": [],
"Autor": "",
"Lizenz": "ISC",
}

Jetzt können Sie Express mit dem folgenden Befehl installieren:

npm install Express --save

Die Installation von Express generiert a package-lock.json Datei sowie a node_modules Mappe.

Die package.json-Datei verstehen

Der Grund, warum Sie ein erstellen müssen Paket.json Datei vor der Installation von Express ist, dass die Paket.json Datei fungiert als Repository und speichert wichtige Metadaten zu Ihrem NodeJS-Projekte.Abhängigkeiten ist der Name eines dieser Metadatenfelder und Express ist ein Abhängigkeit.

Die Installation von Express in Ihrem Projektverzeichnis aktualisiert automatisch Ihre Paket.json Datei.

Die aktualisierte Datei package.json

{
"name": "myapp",
"version": "1.0.0",
"Bezeichnung": "",
"main": "index.js",
"Skripte": {
"test": "echo \"Fehler: kein Test angegeben\" && Ausgang 1"
},
"Schlüsselwörter": [],
"Autor": "",
"Lizenz": "ISC",
"Abhängigkeiten": {
"express": "^4.17.1"
}
}

Jetzt haben Sie ein Feld „Abhängigkeiten“ mit einer Abhängigkeit – Express. Und das Abhängigkeiten object speichert Software, von der Ihr Projekt abhängig ist, um richtig zu funktionieren, in diesem Fall das Express-Framework.

Erstellen eines Servers mit Express

Eine API, die das Speichern und Verschieben von Daten handhabt, ist eine Voraussetzung für jede Full-Stack-Anwendung, und Express macht den Servererstellungsprozess schnell und einfach.

Blick zurück auf die Paket.json Datei oben und Sie sehen ein "Haupt"-Feld. Dieses Feld speichert den Einstiegspunkt zu Ihrer Anwendung, der im obigen Beispiel „index.js“ ist. Wenn Sie Ihre Anwendung (oder in diesem Fall den Server, den Sie erstellen möchten) ausführen möchten, müssen Sie Folgendes ausführen: index.js Datei mit dem folgenden Befehl:

Knotenindex.js

Bevor Sie jedoch zur Ausführungsphase gelangen, müssen Sie die index.js (oder Server-App)-Datei in Ihrem Projektverzeichnis.

Erstellen der index.js-Datei

const express = require('express');
const app = express();
konstanter Port = 5000;
app.get('/', (req, res) => {
res.send('Ihr Server ist betriebsbereit')
})
app.listen (port, () => {
console.log(`Server läuft unter: http://localhost:${port}`);
})

Die obige Datei importiert Express und verwendet sie dann zum Erstellen einer Express-Anwendung. Die Express-Anwendung bietet dann Zugriff auf die werden und Hör mal zu Methoden, die Teil des Express-Moduls sind. Der app.listen() Methode ist die erste, die Sie einrichten müssen. Sein Zweck besteht darin, Verbindungen an einem bestimmten Port des Host-Computers aufzulisten, d. h Port 5000 im obigen Beispiel.

Der Zweck der app.get() Methode besteht darin, Daten von einer bestimmten Ressource abzurufen. Diese Methode hat zwei Argumente: einen Pfad und eine Rückruffunktion. Das Pfadargument im obigen Beispiel hat einen Schrägstrich, der die Stammposition darstellt. Navigieren Sie daher zum http://localhost: 5000 URL (das Stammverzeichnis Ihrer Anwendung), während Ihre obige index.js-App ausgeführt wird, erzeugt die folgende Ausgabe in Ihrem Browser:

Der app.get() Die Methode Callback-Funktion generiert die obige Ausgabe. Diese Callback-Funktion hat zwei Argumente – Anfrage und Antwort. Die Antwort (die ist res im obigen Beispiel) ist das HTTP-Objekt, das eine Express-App nach einer HTTP-Anfrage sendet (was Sie tun, indem Sie die obige URL in Ihren Browser eingeben).

Bereitstellung einer statischen Website mit Ihrem Express-Server

Server spielen eine wichtige Rolle bei der Entwicklung von APIs, die beim Speichern und Übertragen dynamischer Daten helfen, und dort werden Sie höchstwahrscheinlich einen Express-Server in Ihren eigenen Projekten verwenden.

Ein Express-Server kann jedoch auch statische Dateien bereitstellen. Wenn Sie beispielsweise eine statische Website erstellen möchten (z. B. eine für einen Personal Trainer, einen Life Coach oder einen Stylisten), können Sie Ihren Express-Server zum Hosten der Website verwenden.

Ein statisches HTML-Website-Beispiel

 Heimat 







Herzlich willkommen

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam necessitatibus quis tempore facere totam. Dolor, Sequi-Distinktio!

Dienste anzeigen

Der obige HTML-Code erstellt eine angenehme statische Homepage einer persönlichen Stylisten-Website, indem er auf die folgende Datei style.css verlinkt:

*{
Rand: 0;
Polsterung: 0;
Box-Größe: Bordüre-Box;
}
Karosserie {
Schriftfamilie: 'Lato', serifenlos;
Zeilenhöhe: 1,5;
}
ein {
Farbe: #333;
Textdekoration: keine;
}
ul {
Listenstil: keiner;
}
P {
Rand: .5rem 0;
}
h1{
Rand-links: 2rem;
}
/* Dienstprogramm */
.Behälter {
maximale Breite: 1100px;
Rand: automatisch;
Polsterung: 0 2rem;
Überlauf versteckt;
}
.btn {
Anzeige: Inline-Block;
Rand: keine;
Hintergrund: #910505;
Farbe: #fff;
Polsterung: 0.5rem 1rem;
Randradius: 0.5rem;
}
.btn: schweben {
Opazität: 0,9;
}
/* Navigationsleiste */
#Navbar {
Hintergrund: #fff;
Position: klebrig;
oben: 0;
z-Index: 2;
}
#navbar .container {
Anzeige: Raster;
Raster-Vorlagen-Spalten: 6fr 3fr 2fr;
Polsterung: 1rem;
Ausrichten-Elemente: Mitte;
}
#navbar h1 {
Farbe: #b30707;
}
#navbar ul {
sich selbst rechtfertigen: Ende;
Anzeige: flexibel;
Rand-rechts: 3.5rem;
}
#navbar ul li a {
Polsterung: 0,5rem;
Schriftdicke: fett;
}
#navbar ul li a.current {
Hintergrund: #b30707;
Farbe: #fff;
}
#navbar ul li a: schweben {
Hintergrund: #f3f3f3;
Farbe: #333;
}
#navbar .sozial {
sich selbst rechtfertigen: Zentrum;
}
#navbar .sozial i {
Farbe: #777;
Rand rechts: .5rem;
}
/* Heimat */
#Heimat {
Farbe: #fff;
Hintergrund: #333;
Polsterung: 2rem;
Position: relativ;
}
#home: vor {
Inhalt: '';
Hintergrund: URL ( https://source.unsplash.com/random) Mitte/Abdeckung ohne Wiederholung;
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 100 %;
Opazität: 0,4;
}
#home .showcase-container {
Anzeige: Raster;
Raster-Vorlagen-Spalten: wiederholen (2, 1fr);
rechtfertigen-Inhalt: Mitte;
Ausrichten-Elemente: Mitte;
Höhe: 100vh;
}
#home .showcase-content {
z-Index: 1;
}
#home .showcase-content p {
Rand-unten: 1rem;
}

Bereitstellung der Website mit dem Express-Server

const express = require('express');
const app = express();
konstanter Port = 5000;
app.use (express.static('öffentlich'));
app.get('/', (req, res) => {
res.sendFile('index.html')
})
app.listen (port, () => {
console.log(`Server läuft unter: http://localhost:${port}`);
})

Die obigen HTML- und CSS-Dateien befinden sich in einem öffentlichen Ordner im Hauptprojektverzeichnis. Der Speicherort der HTML-Datei macht sie für den Express-Server und seine Funktionen zugänglich.

Eine der neuen Funktionen im obigen Express-Server ist die app.use() Methode. Es montiert die express.static() Middleware, die statische Dateien bereitstellt. Dadurch ist es möglich, die res.sendFile() Funktion, um der Statik zu dienen index.html Datei oben.

Navigieren zum http://localhost: 5000 location in Ihrem Browser wird etwas Ähnliches wie die folgende Ausgabe anzeigen:

Entdecken Sie die Backend-Entwicklung

Das Express-Framework ermöglicht es Ihnen, mithilfe einer Reihe vordefinierter Methoden spezifische HTTP-Anforderungen zu stellen und entsprechende Antworten zu erhalten. Es ist auch heute eines der beliebtesten Backend-Frameworks.

Zu lernen, wie man das Express-Framework verwendet, ist ein großartiger Schritt. Aber wenn Sie wirklich ein professioneller Backend-Entwickler werden möchten, müssen Sie noch viel mehr lernen.

Erfahren Sie, wie Sie 2021 Backend-Entwickler werden

Wenn Sie sich für eine Karriere in der IT interessieren, können Sie Schlimmeres tun, als die Fähigkeiten zu erlernen, die Sie als Backend-Entwickler benötigen.

Weiter lesen

Über den Autor