Heim > Web-Frontend > js-Tutorial > Hauptteil

Express.js-Grundlagen: Ein Leitfaden für Anfänger – Node.js-Tutorialreihe – Teil 10

Barbara Streisand
Freigeben: 2024-09-27 06:33:02
Original
630 Leute haben es durchsucht

Express.js Basics: A Beginner

Einführung:

Hallo! Wenn Sie neu bei Node.js sind, haben Sie wahrscheinlich schon von Express.js gehört – einem leichten, schnellen und flexiblen Framework zum Erstellen von Webservern und APIs. In diesem Leitfaden führe ich Sie durch die Grundlagen von Express und zeige Ihnen, wie einfach der Einstieg ist.

Fertig? Lasst uns eintauchen!


1. Express installieren

Das Wichtigste zuerst: Lassen Sie uns Express installieren. Stellen Sie sicher, dass Node.js und npm (Nodes Paketmanager) auf Ihrem Computer eingerichtet sind. Sobald Sie bereit sind, öffnen Sie Ihr Terminal und führen Sie diesen Befehl aus:

npm install express
Nach dem Login kopieren

Boom! Sie haben Express gerade in Ihrem Projekt installiert. So einfach ist das.


2. Erstellen Sie Ihren ersten Express-Server

Jetzt lasst uns etwas bauen! So können Sie einen supereinfachen Express-Server erstellen, der auf Anfragen wartet und mit „Hallo Welt“ antwortet, wenn jemand Ihre Website besucht.

const express = require('express');  // Import Express
const app = express();  // Initialize your Express app

app.get('/', (req, res) => {  // Set up a route for GET requests to the root URL
  res.send('Hello World');  // Send a response
});

app.listen(3000, () => {  // Tell the app to listen on port 3000
  console.log('Server is running on port 3000');
});
Nach dem Login kopieren

Wenn Sie dies mit node app.js ausführen und http://localhost:3000 in Ihrem Browser öffnen, wird „Hello World“ angezeigt. So einfach ist es, einen Server zum Laufen zu bringen!


3. Was ist Middleware?

Vielleicht haben Sie den Begriff „Middleware“ schon oft gehört. Einfach ausgedrückt ist Middleware lediglich eine Funktion, die zwischen dem Empfang einer Anfrage und dem Senden einer Antwort ausgeführt wird.

Sehen wir uns ein einfaches Beispiel an:

app.use((req, res, next) => {
  console.log('Request received');
  next();  // Moves to the next middleware or route
});
Nach dem Login kopieren

In diesem Fall wird jedes Mal, wenn eine Anfrage gestellt wird, „Anfrage empfangen“ in der Konsole protokolliert. Die Funktion next() ist hier von entscheidender Bedeutung, da sie es der Anforderung ermöglicht, mit der nächsten Middleware-Funktion oder dem nächsten Routenhandler fortzufahren. Ohne sie würde die Anfrage gestoppt und es würde keine Antwort gesendet werden.

Wenn Sie mehr darüber erfahren möchten, wie Middleware im Detail funktioniert, lesen Sie Understanding Middleware in Express.js with Node.js. Es deckt verschiedene Arten von Middleware ab, z. B. Middleware auf Routerebene und Fehlerbehandlungs-Middleware.


4. Routing: Das Rückgrat Ihrer App

Routing ist die Art und Weise, wie Sie verschiedene URLs in Ihrer App einrichten. Sie haben bereits eine grundlegende Route für den Root-Pfad (/) gesehen, aber Sie können auch andere HTTP-Methoden wie POST verwenden, um Formularübermittlungen oder Datenaktualisierungen zu verarbeiten.

app.post('/submit', (req, res) => {
  res.send('Form submitted!');
});
Nach dem Login kopieren

Wenn ein Benutzer nun ein Formular an /submit sendet, wird es von dieser Route verarbeitet. Sie können so viele Routen erstellen, wie Sie benötigen – Express macht es ganz einfach!


5. Statische Dateien bereitstellen

Was ist, wenn Sie Bilder, CSS-Dateien oder andere statische Assets bereitstellen möchten? Express ist für Sie da! Legen Sie diese Dateien einfach in einem Ordner ab, z. B. „öffentlich“, und teilen Sie Express mit, wo sie zu finden sind:

app.use(express.static('public'));
Nach dem Login kopieren

Jetzt kann der Browser direkt auf jede Datei im öffentlichen Ordner zugreifen (z. B. style.css oder ein Bild).


6. Umgang mit JSON-Daten

In modernen Apps müssen Sie häufig JSON-Daten verarbeiten – möglicherweise aus einem Formular oder einer API-Anfrage. Express macht das ganz einfach:

app.use(express.json());  // Add this middleware to parse JSON

app.post('/data', (req, res) => {
  console.log(req.body);  // Access the parsed JSON data
  res.send('Data received!');
});
Nach dem Login kopieren

Wenn jetzt eine POST-Anfrage mit JSON-Daten an /data gesendet wird, analysiert Express den JSON automatisch und Sie können in req.body darauf zugreifen. Ganz einfach, oder?


Alles zum Abschluss

Und da haben Sie es – eine schnelle und einfache Einführung in Express.js! Mit nur wenigen Codezeilen haben Sie Folgendes gelernt:

  • Express installieren,
  • Einen Basisserver einrichten
  • Middleware verwenden,
  • Verschiedene Routen bewältigen,
  • Statische Dateien bereitstellen,
  • Und mit JSON-Daten arbeiten.

Express ist ein leistungsstarkes Framework, das das Erstellen von Webservern und APIs unterhaltsam und unkompliziert macht. Wenn Sie sich damit vertraut machen, können Sie mit der Erkundung erweiterter Funktionen wie Router, Fehlerbehandlung oder sogar der Integration in eine Datenbank beginnen.


Profi-Tipps für Ihre Express-Reise

  • Verwenden Sie nodemon: Es startet Ihren Server automatisch neu, wenn Sie Änderungen vornehmen. Führen Sie einfach npm install -g nodemon aus und verwenden Sie nodemon app.js anstelle von node app.js.
  • Strukturieren Sie Ihre App: Wenn Ihr Projekt wächst, möchten Sie Ihre Routen und Controller in separaten Dateien organisieren. Dadurch bleibt Ihr Code sauber und überschaubar.

Ich hoffe, dieser Leitfaden hilft Ihnen beim Einstieg in Express! Experimentieren Sie weiter, und bevor Sie es merken, werden Sie fantastische Web-Apps wie ein Profi erstellen.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonExpress.js-Grundlagen: Ein Leitfaden für Anfänger – Node.js-Tutorialreihe – Teil 10. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage