Initiation à Express js

Objectif général
Prendre en main Express js, le mini-framework
de Node js le plus utilisé

Objectifs spécifiques
• Installer Node js et Express js
• Créer une application Express js
• Router les requêtes
• Recevoir des données à partir de l’URL d’une requête
• Recevoir des données à partir du corps d’une requête
• Traiter des fichiers uploadés
• Utiliser un moteur de template
• Utiliser une base de données
• Utiliser des middlewares

Sommaire
1) Présentation de Node js
2) Présentation de Express js
3) Installation de Express js
4) Création d’une application Express js
5) Routage des requêtes
6) Réception des données à partir de l’URL
7) Réception des données à partir du corps
8) Traitement des fichiers uploadés
9) Utilisation d’un moteur de template
10) Persistance des données
11) Utilisation des middlewares

Présentation de Node js
• Node est non bloquant : idéal pour les
applications en temps réel
• Node est très bas niveau : rapidité mais
difficulté de prise en main (intérêt des
framework comme Express js)
• Adopté par Microsoft, Yahoo!, Groupon,
LinkedIn, PayPal, …
• Pb-déclic : le navigateur ignore l’état de progression, en temps
réel, de l’upload d’un fichier
• Sol : créer une application permettant au serveur de pousser, à
temps réel, de l'information au navigateur.
• Node js : plate-forme construite sur le moteur JavaScript V8 de
Google Chrome pour développer facilement des applications
de réseau rapides et évolutives.(Créateur : Ryan Dahl en 2009)
https://blog.newrelic.com/2012/07/11/recap-of-nodeconf-2012/

Présentation de Express js
• Express est un framework Node.js minimal et flexible
• Il permet d'utiliser plusieurs fonctionnalités très utiles et
puissantes sans avoir à réinventer la roue
• Il facilite l’organisation de l’application en partant de la
requête à la réponse, en passant par la pile de middlewares,
le routage et les templates.

Installation de Express js
• Prérequis
télécharger et installer le binaire (msi) nodeJS depuis :
http://nodejs.org/
• Installer localement express js avec les commandes suivantes
– mkdir myapp
Créer un dossier pour l’app
– cd myapp
Se mettre sur ce dossier
– npm install express
lancer l’installation
• Vérifier la création du dossier node_modules contenant
express

Création d’une application
• Saisir dans un fichier app.js (par exple) du dossier myapp
1) var express = require('express');
Importer le module express dans l’applicaton
2) var app = express();
Créer l’application app qui est une instance de express
3) var server = app.listen(xxxx)
instancier un serveur Web qui écoute sur le n° de port
xxxx spécifié
• Démarrer l’application avec la commande :
node app.js

Routage des requêtes
présentation
• Le routage permet de déterminer comment l’application doit
répondre à une requête en fonction de l’URL
• Syntaxe de la définition d’une route :
app.method(path, handler)
– app : instance de express
– method : méthode HTTP (GET, POST, PUT, DELETE, …)
– path: adresse relative de la ressource
– handler : traitement ou fonction à exécuter
• Exemple
app.get('/contact', function(req, res) {
res.send("Bienvenue sur la page de contact !");
});

Routage des requêtes
route dynamique
• Route dynamique : route avec portion(s) variable(s)
• La syntaxe d’une portion variable est :nomVariable
• Exemple
app.get('/users/:name', function(req, res) {
res.send("Vous êtes sur le compte
de"+req.params.name);
});

Réception des données à partir de l’URL
• Données transmises via l’URL
Ex : http://www.animaux.com:8080/felins/search?q=tigre
• Paramètre du chemin (path) :
– Syntaxe d’accès : req.params.nomVariable
– Exemple : avec la route "GET /:type/search" et
l’URL "/:felins/search", req.params.name contient "felins"
• Paramètre de la requête (query)
– Syntaxe d’accès : req.query.nomVariable
– Exemple : avec l’URL "/search?q=tigre",
req.query.q contient "tigre"
path query

Réception des données à partir du corps
• Données incluses dans le corps (body) de la requête avec les
méthodes POST, PUT ou DELETE.
• Installer localement le module body-parser
• Importer body-parser dans l’application
var bodyParser = require('body-parser');
• Définir body-parser comme middleware
app.use(bodyParser.urlencoded({ extended: false }))
• Syntaxe :
– Toutes les données : req.body
– Une seule donnée : req.body.nomVariable

Traitement des fichiers uploadés
• Installer localement le module multer
• Importer multer dans l’application
• Définir multer comme middleware et configurer la
nomenclature et la destination des fichiers uploadés
app.use(multer({
dest : './uploads/',
rename : function (fieldname, filename,req,res) { return …
}
}));
• L’objet req.files stocke les infos (fieldname, originalname, name,
mimetype, path, extension, size, …) sur chaque fichier uploadé
• req.body est aussi analysé mais seulement après l’upload
complète du fichier

Utilisation d’un moteur de template
présentation
• Template : modèle décrivant la manière dont les données sont
composées pour former l'aspect final d'une page Web ou d'une
partie d’une page Web
• Installer localement le module (jade, ejs, mustache, …)
• Préciser le répertoire de stockage des templates
Ex : app.set('views', __dirname + '/views');
• Préciser le moteur de template à utilser
Ex : app.set('view engine', 'jade');
• Créer un fichier dans le dossier des templates
Ex : index.jade dans le dossier views
• Définir une route pour proposer le fichier template avec
res.render(view [, local variables] [, callback])
Ex : app.get('/', function (req, res) {
res.render('index', { title: ‘Accueil', msg: 'Bjr Visiteur!'});
});

syntaxe de jade
• Élements html : Indenter (au moins 2 espaces) pour hiérarchiser
• Text interne
– 1 ligne : suffixer l’elt HTML d’un espace suivi du texte
– +sieurs lignes : suffixer l’elt HTML d’un point et commencer
le texte à la ligne suivante avec des indentations à chaque
ligne
• Attributs : liste entre-parenthèses devant l’élément HTML
• id : suffixer l’elt HTML d’un # suivi de l’identifiant
• class : suffixer l’elt HTML d’un . suivi du nom de la classe
• Variable
– Suffixer l’elt HTML d’un = suivi d’un espace et de la variable
– Suffixer l’elt HTML d’un != suivi d’un espace et de la variable
– #{nomVariable} n’importe où dans le texte

jade et structures de contrôle
• Condition
• Itération
//- Syntaxe
if (condition)
element text
else
element autreText
//- Exemple
- badge=true
if (badge)
p Bienvenu
else
p Accès interdit
//- Syntaxe
for item in list
element= item
//- Exemple
- list_nbr= {1:'one',2:'two',3:'three'}
ul
each val, index in list_nbr
li= index + ': ' + val
//- autre syntaxe
each val[, index] in list
element= utiliser val et index
<ul>
<li>1: one</li>
<li>2: two</li>
<li>3: three</li>
</ul>

exemple : index.jade
//- views/index.jade
doctype html
html
head
title!= title
body
h1!= message
res.render('index', { title: 'Accueil', message: 'Bonjour visiteur!'});
<doctype html>
<html>
<head>
<title>Accueil</title>
<body>
<h1>Bonjour visiteur ! </h1>
</body>
et
donnent

Persistance des données
présentation
• Express peut communiquer avec plusieurs SGBD dont
Cassandra, SQLite, Redis, MySQL, PostgreSQL, MongoDB, …
• Il suffit juste d’installer le driver du SGBD
• Quelques drivers de mongoDB (le plus utilisé avec Express)
– node-mongodb-native
• La plupart des autres reposent sur ce driver
• Inconvénient : multiplicité des callbacks
– mongoose
• Pour créer un ORM (object-relational mapping) pour une
bdd à schéma
– mongoskin
• Enveloppe de node-mongodb-native pour le simplifier
• Plus léger que mongoose

avec mongoskin
1) On suppose le serveur mongodb installé et opérationnel
(cf. http://fr.slideshare.net/adieng/introduction-mongodb)
2) Installer localement le module mongoskin
npm install mongoskin
3) Importer mongoskin dans l’application
4) Se connecter au serveur mongodb et sélectionner une bdd
var
DB_NAME=mongo.db("mongodb://[user:pass@]host:port/DB_NAME");
5) Choisir une collection
var COLL_NAME = DB_NAME.collection('COLL_NAME');
Exemple
var mongo = require('mongoskin');
var usersdb=mongo.db("mongodb://localhost:27017/usersdb");
var users=usersdb.collection('users');

insérer des données
• Syntaxe
collection.insert( <doc or array of docs)>, function(err,
doc_ins){
// Erreur ou ajout
});
NB : collection est une variable qui stocke la collection choisie
• Exemple
var $someusers =[
{ prenom:"moussa", sexe:true, age:30, taille:1.85 },
{ prenom:"sokhna", sexe:false, age:34 }
];
users.insert($someusers, function(err, doc_ins) {
if(err) console.log (err);
if (doc_ins) console.log(doc_ins);

consulter des données
• Syntaxe
collection.find((<query>, <fields>).toArray(function(err, rslt){
// Erreur ou traitement de rslt
});
• Exemple
users.find({sexe:false},{prenom:1,_id=0}).toArray(function(err,
rslt) {
if(err) console.log (err);
if(rslt) console.log(rslt);
});

modifier des données
• Syntaxe
collection.update(<query>,<updates>,<options>,
function(err, nombre){
// Erreur ou modif
});
• Exemple
users.update({prenom:'nafi'},{$inc:{age:8}},function(err,nbr) {
if (err) console.log(err);
if(nbr) console.log(nbr+' doc (s) modifié(s)');
});

supprimer des données
• Syntaxe
collection.remove(<query>,function(err, nombre){
// Erreur ou suppression
});
• Exemple
users.remove({prenom:'moussa'},function(err, nbr) {
if (err) console.log(err);
if(nbr) console.log(nbr+' doc (s) supprimé(s)');
});

autres méthodes
• collection.findById(id, <fields>, function(err, rslt){ … });
• collection.updateById(id, <updates>,<options>,
function(err, nbr){ … });
• collection.removeById(id, function(err, nbr){ … });
• Exemple
users.findById(req.params.id, {prenom:1},function(err, user) {
if(err) throw(err);
if(apprenant) console.log(rslt);
});

Utilisation des middlewares
présentation
• Middleware : ensemble de fonction(s) invoquée(s) entre une
requête et une réponse pour fournir une fonctionnalité
Ex : body-parser, multer, cookie-session, morgan, serve-favicon.
• Un middleware peut :
– agir sur les objets req et res ;
– arrêter le cycle requête-réponse
– appeler le middleware qui le suit sur la pile
• Syntaxe de définition :
app.use([/mount/path,] nomMdw());
ou app.use([/mount/path,] function([err,] req,res,next){…});
– mount/path : limite l’exécution du mdlw à certaines requêtes
– err : paramètre réservé aux traitements des erreurs
– next : callback vers le prochain middleware

Utilisation des middlewares
exemple
…
app.use(bodyParser.urlencoded({ extended: false }));
…
// mettre la connexion à la bdd à la disponibilité du router
app.use(function(req,res,next) {
req.db=db;
next();
});
…
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
app.use(function(err, req, res, next) {
console.error(err.stack);
res.status(404).send('Ressource introuvable !');
});

Documentation
• http://en.wikipedia.org/wiki/Node.js
• http://www.infoq.com/interviews/node-ryan-dahl
• http://openclassrooms.com/courses/des-applications-ultra-
rapides-avec-node-js
• http://expressjs.com/4x/api.html
• https://github.com/expressjs/body-parser
• https://github.com/expressjs/multer/
• http://naltatis.github.io/jade-syntax-docs/#basics
• http://webapplog.com/express-js-4-node-js-and-mongodb-
rest-api-tutorial/
• https://www.omniref.com/js/npm/mongoskin/0.5.0/files

Initiation à Express js

Contenu connexe

Tendances

En vedette

Similaire à Initiation à Express js

Plus de Abdoulaye Dieng

Initiation à Express js