Maison > interface Web > js tutoriel > le corps du texte

Express pour les débutants : créez votre première application Web aujourd'hui

DDD
Libérer: 2024-09-21 20:30:03
original
373 Les gens l'ont consulté

Express for Beginners: Create Your First Web App Today

Créer une application Express implique plusieurs étapes. Express est un framework d'application Web Node.js minimal et flexible qui fournit un ensemble robuste de fonctionnalités pour les applications Web et mobiles. Vous trouverez ci-dessous un guide étape par étape pour créer une application Express de base :

Étape 1 : Configurez votre environnement

  1. Installez Node.js et npm : Si vous ne l'avez pas déjà fait, téléchargez et installez Node.js depuis nodejs.org. npm (Node Package Manager) est fourni avec Node.js.
  2. Créer un répertoire de projets :

    mkdir my-express-app
    cd my-express-app
    
    
    Copier après la connexion
  3. Initialiser un nouveau projet Node.js :

    npm init -y
    
    
    Copier après la connexion

    Cela créera un fichier package.json avec les paramètres par défaut.

Étape 2 : Installer Express

Installer Express à l'aide de npm :

npm install express

Copier après la connexion

Étape 3 : Créer le serveur de base

  1. Créer un fichier d'entrée : Créez un fichier nommé app.js (ou index.js).
  2. Configurer le serveur de base :

    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}`);
    });
    
    
    Copier après la connexion

Étape 4 : Exécuter le serveur

Exécutez votre application Express à l'aide de Node.js :

node app.js

Copier après la connexion

Ouvrez votre navigateur et accédez à http://localhost:3000. Vous devriez voir « Hello World ! » affiché.

Étape 5 : Ajouter plus de routes et de middleware (facultatif)

Vous pouvez ajouter plus d'itinéraires et de middleware à votre application Express. Par exemple :

  1. Ajouter un itinéraire :

    app.get('/about', (req, res) => {
      res.send('About Page');
    });
    
    
    Copier après la connexion
  2. Utiliser le middleware :

    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)}`);
    });
    
    
    Copier après la connexion

Étape 6 : Organisez votre code (facultatif)

Pour les applications plus volumineuses, c'est une bonne pratique d'organiser votre code en modules séparés.

  1. Créer un répertoire d'itinéraires :

    mkdir routes
    
    
    Copier après la connexion
  2. Créer un fichier de route : Créez un fichier nommé index.js dans le répertoire 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;
    
    
    Copier après la connexion
  3. Mettre à jour app.js pour utiliser le fichier de route :

    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}`);
    });
    
    
    Copier après la connexion

Étape 7 : Utiliser les variables d'environnement (facultatif)

Pour les paramètres de configuration, utilisez des variables d'environnement.

  1. Installer le package dotenv :

    npm install dotenv
    
    
    Copier après la connexion
  2. Créer un fichier .env :

    PORT=3000
    
    
    Copier après la connexion
  3. Mettre à jour app.js pour utiliser dotenv :

    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}`);
    });
    
    
    Copier après la connexion

C'est ça ! Vous avez créé une application Express de base. Vous pouvez étendre cela davantage en ajoutant plus de routes, de middleware et d'autres fonctionnalités selon vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal