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

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

DDD
DDDoriginal
2024-09-21 20:30:03246parcourir

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
    
    
  3. Initialiser un nouveau projet Node.js :

    npm init -y
    
    

    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

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

Étape 4 : Exécuter le serveur

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

node app.js

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

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

É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
    
    
  2. Créer un fichier .env :

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

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!

Déclaration:
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