Heim  >  Artikel  >  Web-Frontend  >  Express für Einsteiger: Erstellen Sie noch heute Ihre erste Web-App

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

DDD
DDDOriginal
2024-09-21 20:30:03370Durchsuche

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
    
    
  3. Neues Node.js-Projekt initialisieren:

    npm init -y
    
    

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

Schritt 2: Express installieren

Express mit npm installieren:

npm install express

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}`);
    });
    
    

Schritt 4: Führen Sie den Server aus

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

node app.js

Ö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');
    });
    
    
  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)}`);
    });
    
    

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
    
    
  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;
    
    
  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}`);
    });
    
    

Schritt 7: Umgebungsvariablen verwenden (optional)

Verwenden Sie für Konfigurationseinstellungen Umgebungsvariablen.

  1. Dotenv-Paket installieren:

    npm install dotenv
    
    
  2. Erstellen Sie eine .env-Datei:

    PORT=3000
    
    
  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}`);
    });
    
    

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!

Stellungnahme:
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