Commencer Et Afficher

1 - Création d’app.js

Dans votre IDE, créez le fichier app.js et copiez ce code :

const express   = require('express')    // chargement du module
const app       = express()             // appel du module
const port      = 8888                  // paramétrage du port
// création de la Route
app.get('/', (req, res) => {
  res.send('Hello World!');
})
// Gestion des erreurs HTTP
app.use((req, res, next) => {
  res.status(404).send("Désolé, nous ne pouvons pas accéder à votre requête !");
});
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Quelque chose bloque!');
});
// ouverture du serveur
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
})

Ouvrez le terminal et saisissez nodemon main ou nodemon app (en regardant dans le fichier package, vous comprendrez pourquoi !).
Cliquez, dans le terminal sur le lien http://localhost:8888 et vous voyez Hello World! apparaitre dans votre navigateur.

2 - Anatomie du fichier app

a - Les modules

Pour l’instant, nous n’avons qu’un module : express. Pour tous les autres que nous allons installer, la procédure sera la même, il faudra d’abord les charger, puis les appeler.

b - Les routes

L’écriture des routes est un peu différente de celle utilisée pour laravel. Certes, nous avons les deux instructions : get et post. get envoie des données au navigateur, post récupère des données du navigateur. En reprenant l’exemple précédent voici comment lire la fonction apt.get

• ‘/’ : donne le chemin auquel la fonction s’applique
• (req, res) : fonction de middleware
  • req : Argument de demande HTTP à la fonction middleware (url envoyée au navigateur), appelé “req” par convention.
  • res : Argument de réponse HTTP à la fonction middleware (lecture de l’url et exécution du code), appelé “res” par convention.

3 - Affichage statique et dynamique à partir de l’URL

Modifions notre code de cette façon :

const express = require('express')
const app = express()
const port = 8888
// Affichage statique 1
app.get('/', (req, res) => {
  res.send('Accueil')
})
// Affichage statique 2
app.get('/page', (req, res) => {
    res.send('Ceci est une page')
  })
// Affichage dynamique
  app.get('/page:num', (req, res) => {
    res.send(`Ceci est la page ${req.params.num}`)
  })
// Gestion des erreurs HTTP
app.use((req, res, next) => {
  res.status(404).send("Désolé, nous ne pouvons pas accéder à votre requête !");
});
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send('Quelque chose bloque!');
});
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

À l’affichage les résultats seront les suivants :

Affichage statique 1
si l’url est http://localhost:8888/ l’affichage sera Accueil
Affichage statique 2
si l’url est http://localhost:8888/page l’affichage sera Ceci est une page
Affichage dynamique
si l’url est http://localhost:8888/page3 l’affichage sera Ceci est la page 3