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

Bases d'Express.js : Guide du débutant - Série de didacticiels Node.js - Partie 10

Barbara Streisand
Libérer: 2024-09-27 06:33:02
original
630 Les gens l'ont consulté

Express.js Basics: A Beginner

Présentation :

Salut ! Si vous êtes nouveau sur Node.js, vous avez probablement entendu parler d'Express.js, un framework léger, rapide et flexible pour créer des serveurs Web et des API. Dans ce guide, je vais vous expliquer les bases d'Express, vous montrant à quel point il est facile de démarrer.

Prêt ? Allons-y !


1. Installation d'Express

Tout d’abord, installons Express. Assurez-vous que Node.js et npm (le gestionnaire de packages de Node) sont configurés sur votre machine. Une fois que vous êtes prêt à partir, ouvrez votre terminal et exécutez cette commande :

npm install express
Copier après la connexion

Boum ! Vous venez d'installer Express dans votre projet. C'est aussi simple que cela.


2. Création de votre premier serveur express

Maintenant, construisons quelque chose ! Voici comment créer un serveur Express très simple qui écoute les demandes et répond par « Hello World » lorsque quelqu'un visite votre site.

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

Si vous exécutez ceci avec node app.js et ouvrez http://localhost:3000 dans votre navigateur, vous verrez « Hello World ». C'est aussi simple que cela de mettre en place un serveur et de le faire fonctionner !


3. Qu’est-ce qu’un middleware ?

Vous avez peut-être beaucoup entendu le terme « middleware ». En termes simples, le middleware n'est qu'une fonction qui est exécutée entre la réception d'une requête et l'envoi d'une réponse.

Regardons un exemple simple :

app.use((req, res, next) => {
  console.log('Request received');
  next();  // Moves to the next middleware or route
});
Copier après la connexion

Dans ce cas, chaque fois qu'une demande est effectuée, il enregistre "Demande reçue" sur la console. La fonction next() est cruciale ici car elle permet à la requête de passer à la fonction middleware ou au gestionnaire de route suivant. Sans cela, la demande s'arrêterait et aucune réponse ne serait envoyée.

Si vous souhaitez en savoir plus sur le fonctionnement détaillé du middleware, consultez Comprendre le middleware dans Express.js avec Node.js. Il couvre différents types de middleware, tels que les middlewares au niveau du routeur et de gestion des erreurs.


4. Routage : l'épine dorsale de votre application

Le routage est la façon dont vous configurez différentes URL dans votre application. Vous avez déjà vu un itinéraire de base pour le chemin racine (/), mais vous pouvez également gérer d'autres méthodes HTTP, comme POST, pour gérer les soumissions de formulaires ou les mises à jour de données.

app.post('/submit', (req, res) => {
  res.send('Form submitted!');
});
Copier après la connexion

Désormais, lorsqu'un utilisateur soumet un formulaire à /submit, cette route le gérera. Vous pouvez créer autant d'itinéraires que nécessaire : Express facilite les choses !


5. Servir des fichiers statiques

Que faire si vous souhaitez diffuser des images, des fichiers CSS ou d'autres éléments statiques ? Express a ce qu'il vous faut ! Déposez simplement ces fichiers dans un dossier, comme public, et indiquez à Express où les trouver :

app.use(express.static('public'));
Copier après la connexion

Désormais, n'importe quel fichier du dossier public (comme style.css ou une image) est accessible directement par le navigateur.


6. Gestion des données JSON

Dans les applications modernes, vous devrez souvent gérer des données JSON, peut-être à partir d'un formulaire ou d'une requête API. Express rend cela très simple :

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

Désormais, lorsqu'une requête POST avec des données JSON est envoyée à /data, Express analysera automatiquement le JSON et vous pourrez y accéder dans req.body. Simple, non ?


Emballage du tout

Et voilà, une introduction rapide et facile à Express.js ! Avec seulement quelques lignes de code, vous avez appris à :

  • Installer Express,
  • Configurer un serveur de base,
  • Utiliser un middleware,
  • Gérer différents itinéraires,
  • Servir des fichiers statiques,
  • Et travaillez avec des données JSON.

Express est un framework puissant qui rend la création de serveurs Web et d'API amusante et simple. Au fur et à mesure que vous serez plus à l'aise, vous pourrez commencer à explorer des fonctionnalités plus avancées telles que les routeurs, la gestion des erreurs ou même l'intégration à une base de données.


Conseils de pro pour votre voyage express

  • Utilisez nodemon : Il redémarre automatiquement votre serveur lorsque vous apportez des modifications. Exécutez simplement npm install -g nodemon et utilisez nodemon app.js au lieu de node app.js.
  • Structurez votre application : À mesure que votre projet se développe, vous souhaiterez organiser vos itinéraires et vos contrôleurs dans des fichiers séparés. Cela garde votre code propre et gérable.

J'espère que ce guide vous aidera à démarrer avec Express ! Continuez à expérimenter et avant de vous en rendre compte, vous créerez de superbes applications Web comme un pro.

Bon codage !

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal