Heim > Web-Frontend > js-Tutorial > Hauptteil

Express für Einsteiger: Erstellen Sie noch heute Ihre erste Web-App

DDD
Freigeben: 2024-09-21 20:30:03
Original
373 Leute haben es durchsucht

Express for Beginners: Create Your First Web App Today

Das Erstellen einer Express-App umfasst mehrere Schritte. Express ist ein minimales und flexibles Node.js-Webanwendungsframework, das eine Reihe robuster Funktionen für Web- und mobile Anwendungen bietet. Nachfolgend finden Sie eine Schritt-für-Schritt-Anleitung zum Erstellen einer einfachen Express-App:

Schritt 1: Richten Sie Ihre Umgebung ein

  1. Node.js und npm installieren: Wenn Sie es noch nicht getan haben, laden Sie Node.js von nodejs.org herunter und installieren Sie es. npm (Node Package Manager) wird im Lieferumfang von Node.js geliefert.
  2. Erstellen Sie ein Projektverzeichnis:

    mkdir my-express-app
    cd my-express-app
    
    
    Nach dem Login kopieren
  3. Neues Node.js-Projekt initialisieren:

    npm init -y
    
    
    Nach dem Login kopieren

    Dadurch wird eine package.json-Datei mit Standardeinstellungen erstellt.

Schritt 2: Express installieren

Express mit npm installieren:

npm install express

Nach dem Login kopieren

Schritt 3: Erstellen Sie den Basisserver

  1. Eintragsdatei erstellen: Erstellen Sie eine Datei mit dem Namen app.js (oder index.js).
  2. Einrichten des Basisservers:

    const express = require('express');
    const app = express();
    const port = 3000;
    
    app.get('/', (req, res) => {
      res.send('Hello World!');
    });
    
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`);
    });
    
    
    Nach dem Login kopieren

Schritt 4: Führen Sie den Server aus

Führen Sie Ihre Express-App mit Node.js aus:

node app.js

Nach dem Login kopieren

Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000. Sie sollten „Hello World!“ sehen. angezeigt.

Schritt 5: Weitere Routen und Middleware hinzufügen (optional)

Sie können Ihrer Express-App weitere Routen und Middleware hinzufügen. Zum Beispiel:

  1. Eine Route hinzufügen:

    app.get('/about', (req, res) => {
      res.send('About Page');
    });
    
    
    Nach dem Login kopieren
  2. Middleware verwenden:

    const bodyParser = require('body-parser');
    
    app.use(bodyParser.json());
    
    app.post('/data', (req, res) => {
      const data = req.body;
      res.send(`Received data: ${JSON.stringify(data)}`);
    });
    
    
    Nach dem Login kopieren

Schritt 6: Organisieren Sie Ihren Code (optional)

Bei größeren Anwendungen empfiehlt es sich, Ihren Code in separate Module zu organisieren.

  1. Erstellen Sie ein Routenverzeichnis:

    mkdir routes
    
    
    Nach dem Login kopieren
  2. Eine Routendatei erstellen: Erstellen Sie eine Datei mit dem Namen index.js im Verzeichnis routes.

    const express = require('express');
    const router = express.Router();
    
    router.get('/', (req, res) => {
      res.send('Hello World!');
    });
    
    router.get('/about', (req, res) => {
      res.send('About Page');
    });
    
    module.exports = router;
    
    
    Nach dem Login kopieren
  3. App.js aktualisieren, um die Routendatei zu verwenden:

    const express = require('express');
    const app = express();
    const port = 3000;
    const indexRouter = require('./routes/index');
    
    app.use('/', indexRouter);
    
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`);
    });
    
    
    Nach dem Login kopieren

Schritt 7: Umgebungsvariablen verwenden (optional)

Verwenden Sie für Konfigurationseinstellungen Umgebungsvariablen.

  1. Dotenv-Paket installieren:

    npm install dotenv
    
    
    Nach dem Login kopieren
  2. Erstellen Sie eine .env-Datei:

    PORT=3000
    
    
    Nach dem Login kopieren
  3. App.js aktualisieren, um dotenv zu verwenden:

    require('dotenv').config();
    const express = require('express');
    const app = express();
    const port = process.env.PORT || 3000;
    const indexRouter = require('./routes/index');
    
    app.use('/', indexRouter);
    
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`);
    });
    
    
    Nach dem Login kopieren

Das ist es! Sie haben eine einfache Express-App erstellt. Sie können dies weiter erweitern, indem Sie nach Bedarf weitere Routen, Middleware und andere Funktionen hinzufügen.

Das obige ist der detaillierte Inhalt vonExpress für Einsteiger: Erstellen Sie noch heute Ihre erste Web-App. 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage