ExpressJS

A - Descoberta e Instalação
1 - ExpressJS: apresentação e grandes
princípios de funcionamento
Express JS é um framework (quadro de trabalho) [Link] de tamanho limitado e que oferece
numerosas funções para simplificar a realização de um site web. Express JS facilita
a organização da aplicação através de várias noções:

- guia na gestão da solicitação e da resposta

pilha de middlewares
- roteamentos
templates

2 - Instalação do ExpressJS
Após criar uma pasta específica, executamos os dois comandos seguintes nela.
dossier :

a) Pré-requis: criação de um pacote JSON

$ npm init

Trata-se de criar um arquivo JSON ([Link]) contendo uma descrição da aplicação

Express JS criada (nome, versão, arquivo inicial ...). O conjunto de especificações é
dados na documentação npm.

b) Instalação do módulo ExpressJS

$ npm install express

Este comando vai instalar o módulo Express em nosso projeto e adicionar sua menção no
fichier [Link] comme dépendance.
Assim, é possível implantar um projeto realizado, mesmo que os módulos não estejam presentes, em
exécutant la commande suivante au niveau du dossier racine du projet (le fichier [Link]
deve estar presente)
 $ npm install

3 - Exibição Premier
Depois de escrever este código:

varexpress =require('express');
varapp = express();

[Link]('/', function(req, res) {

[Link]('Bonjour à tous !');
});

varserver =[Link](8080,function(){
varaddresseHote =[Link]().address;
varportEcoute = [Link]().port;

[Link]('O aplicativo está disponível no endereço

[Link]
});

vamos executar isso:

$ node [Link]

Depois de digitar localhost:8080 na barra de endereços do nosso navegador, ele exibe "
Olá a todos.
 B - A gestão das rotas e dos
fichiers statiques
1 - A gestão das diferentes rotas
Cada vez que uma solicitação é enviada ao servidor, ela é tratada por este como uma rota.
Aqui estão duas rotas diferentes:

[Link]
[Link]

A primeira é gerida pelo ExpressJS da seguinte forma:

[Link]('/', function(req, res) {

[Link]('Olá');
});

e a segunda assim:

[Link]('/informacoes',function(req,res){
[Link]('Uma informação adicional');
});

Ces deux routes se placent entre l'appel du module ExpressJS ( require … ) et l'écoute du
serveur ( listen … ).

2 - Enviar arquivos estáticos para

cliente

a) Caso geral
A aplicação web permite gerar arquivos html com base nas requisições que lhe são feitas.
enviadas; mas também fornecer arquivos estáticos armazenados no servidor, como os
imagens, o CSS ou o JavaScript, por exemplo.
Express permite simplificar a escrita das URLs para esses arquivos, armazenando-os todos em um
dossiê de pais
É necessário usar, para isso, uma função middleware (veja mais abaixo para essa noção) escrevendo
:

[Link]([Link]('public'));

Agora você pode armazenar todos os seus arquivos na pasta pública, localizada na raiz do seu
aplicativo, e escrever os URLs da seguinte forma:
 [Link]
[Link]
[Link]
[Link]
[Link]

Você pode criar múltiplas pastas estáticas:

[Link]([Link]('public'));
[Link]([Link]('arquivos'));

Express buscará sucessivamente seus arquivos nas diferentes pastas estáticas indicadas.
Isso nos permite, por exemplo, enviar uma tag de imagem ao cliente:

[Link]('/imagem',function(req,res){
[Link]('<img src="public/[Link]">');
});

No servidor, a imagem está presente na pasta pública que foi, previamente, declarada ao
método de um [Link].

b) Os arquivos HTML
Por enquanto, estamos enviando uma cadeia de caracteres usando o método send do objeto
res fornecido pelo Express como segundo argumento da função de retorno.
É possível, também, enviar um documento html registrado no servidor. Este arquivo é
armazenado em uma pasta que será declarada por um [Link] (arquivos no exemplo abaixo)
Ensuite, nous pouvons écrire dans une route :

[Link]('/pagina', function(req, res) {

[Link]('[Link]',{root:'fichiers'});
});
 C - Um motor de template: Pug
1 - Princípio de base
Pug é uma linguagem de template. Isso permite separar o código que gera a exibição do resto.
código JavaScript. É necessário usar obrigatoriamente a sintaxe da linguagem.
Nós inserimos o código a seguir no arquivo JavaScript

varexpress =require('express');
varapp = express();

//définit le dossier de base pour les fichiers statiques (css, images, js,
[Link]('/static', [Link]('fichiers'));

//permite usar Pug

[Link]('view engine', 'pug');

//redefinir a pasta que recebe os arquivos .pug (por padrão: views)

[Link]('views','mestemplates');

//chemin de base de mon application :

[Link]('/', function(req, res) {
//permite a renderização do arquivo [Link] que gera um html enviado em seguida para
[Link]('index',{title:'Titre de la page',
message :'Du texte dans la page'});
});

Criamos um arquivo [Link] na pasta mestemplates.

doctype html
cabeça
title= title
corpo
h1= message

2 - A inclusão
Nas nossas páginas web, uma parte da estrutura é comum (cabeçalho, menu …). É, portanto,
préférable de séparer ces parties communes du reste. Prenons, tout d'abord, un fichier
[Link]

doctype html
html
incluir ./includes/[Link]
corpo
h1= titreH1
Um texto curto
incluir ./includes/[Link]
Nós usamos então os arquivos [Link] e [Link] localizados na pasta includes
situado na pasta mestemplates.
O arquivo cabeçalho:

cabeça
title= titrePage
script(src='[Link]')
link(rel="stylesheet", href="[Link]")

O arquivo de pé:

p
a(href='[Link] Me contactar

O conjunto nos dá um arquivo HTML completo que é enviado ao cliente.

3 - A herança (uso de um layout)

Uma outra técnica de separação de código consiste em usar um Layout. Em primeiro lugar,
vamos pegar o arquivo [Link]

doctype html
html
cabeça
título do bloco
title Default title
link(rel="stylesheet", href="[Link]")
script(src="[Link]")
corpo
conteúdo bloqueado

Se utilizarmos o arquivo [Link] abaixo, obtemos uma página completa.

estende ./[Link]

block title
title= titrePage

conteúdo bloqueado
h1= titreH1
Um texto curto

Cada arquivo .pug chamado fará referência ao layout.

 D - Améliorations
1 - Gestão de valores com o método
OBTER
Podemos passar valores na URL e recuperá-los do lado do servidor. Existem duas maneiras
de fazer.

a) [Link]
Utilizamos o seguinte endereço para a solicitação:[Link]
Podemos implementar a seguinte rota para recuperar os valores truque e máquina:

[Link]('/infos/:un/:dois',function(req,res){
[Link]([Link]); //affiche truc
[Link]([Link]); //exibe machin
});

b) [Link]
Nós usamos o seguinte endereço para a solicitação:[Link]
r=chose&t=bidule.
Podemos implementar a seguinte rota para recuperar os valores coisa e bidule:

[Link]('/pergunta', function(req, res) {

[Link]([Link].r); //exibir coisa
[Link]([Link].t); //mostra bidule
}

2 - Os middleware
Express é uma biblioteca web leve que facilita a construção de rotas e utiliza funções
middleware. Um pedido expresso é, antes de tudo, uma série de chamadas de middleware.
O middleware é uma função que será chamada entre a solicitação e a resposta para trazer
mais possibilidades adicionais ao nosso código.
Vamos pegar o seguinte código:

[Link](function(req,res,next){
[Link]('Hora:', [Link]());
próximo();
});

A cada solicitação, a hora será exibida no console. Você nota que a função
middleware tem como base a escrita [Link](). É dada como argumento uma função.
Entre os middlewares mais comuns com o Express, encontramos a definição de pastas
estáticos, o uso de uma pasta específica para o template, o tratamento das requisições em POST
ou ainda a gestão das sessões.
 3 - Gestão de valores com o método
POST
As requisições do tipo POST exigem uma gestão particular para tratar os valores
enviadas. Aqui está a parte central do modelo pug para gerar um formulário em html:
Vamos usar o seguinte formulário:

form(action='reponse'method='post')
entrada(tipo='text' nome='texte')
input(type='submit'value='Envoyer')

Para processar adequadamente os dados enviados nas solicitações, vamos usar o

módulo body-parser que nos dá o seguinte código:

varexpress =require('express');
varapp = express();
var bodyParser = require('body-parser');
Suporte a envios
[Link]([Link]({
extended: false
}));

[Link]('view engine','pug');

[Link]('/resposta', function(req, res) {

[Link]('reponse',{ titrePage:'Réponse du formualaire',
titreH1:'Une page de réponse',reponse:[Link]});
});

Notamos que o campo de texto do formulário é recuperado no final da linha 12

([Link]).
Finalmente, aqui está a parte central do template da exibição da resposta:

h1= titreH1
A resposta do formulário é:
p #{reponse}

4 - Gestion des erreurs

Par défaut, [Link] ne génère par les erreurs. Il nous faut donc envoyer une page avec un en-
cabeça 404 quando a URL solicitada não corresponde a nenhuma página do site. No código a seguir,
situado após todas as outras rotas, adicionamos o cabeçalho 404 antes de fazer a renderização da
página 404 criada por outro lugar.

[Link](function(req,res,next){
[Link](404).render('404',{ titrePage:'Erreur',titreH1:'Des erreurs
});
O erro 404 não é o único presente. Há, por exemplo, o erro 503 se o servidor não funcionar
não está correto, assim como o erro 403 para um conteúdo protegido.
Vamos pegar este trecho de uma estrada:

[Link]('/demande', function(req, res, next) {

…
se (erro) {
[Link]('503');
próximo();
retornar;
}
…
});

Não devemos esquecer de prever o argumento next para cada rota. Assim, chegamos à
middleware ci-dessous situé après toutes les routes :

[Link](function(req, res, next){

switch([Link]){
case403:
[Link]('403',{ title:'Accès interdit !'});
quebrar;
case503:
[Link]('503',{ title:'Problème'});
quebrar;
default:
[Link](404).render('404',{ title:'Page inconnue'});
}
});

Le test se fait sur le code d'erreur (statusCode) présent dans l'objet res pour afficher une page
diferente de acordo com o tipo de erro.

5 - As sessões
Uma sessão é um período delimitado durante o qual um cliente está em comunicação com um
servidor que realiza operações para este cliente identificado de forma individual. Esta
a identificação permite restringir o uso de uma parte do site a certas pessoas,
registrar dados pessoais ...
Precisamos usar aqui dois módulos: cookie-parser e express-session. Vamos pegar o código
seguinte :
 varexpress =require('express');
varcookieParser =require('cookie-parser');
varsession =require('express-session');

varapp = express();
varsess
[Link](cookieParser())
[Link](session({
secret:'123456789SECRET',
saveUninitialized : false,
resave: false
}));

[Link]('view engine','pug');
[Link]('/static', [Link]('files'));

[Link]('/', function(req, res) {

sess =[Link];
se ([Link]) {
[Link]++;
} else {
[Link] =1;
}
[Link]('index',{titre :'accueil',
nombre :[Link]});
});

[Link](8080,function(){});
[Link]('escutando na porta 8008');
});

Le template Pug suivant permet d'afficher à l'utilisateur le nombre de fois qu'il affiche la page :

doctype html
cabeça
title= titre
corpo
h1 Página inicial do site
Um texto
Você exibiu esta página #{nombre} vezes.
 E - Conexão à base de
dados
Príncipe
No código a seguir, conectamo-nos ao banco de dados. Se essa conexão não retornar
pas d'erreur, le serveur se met en écoute et l'objet lié à la base de données est disponible pour
ser usado em cada rota.

varexpress =require('express');
varapp = express();
varMongoClient = require('mongodb').MongoClient;
varmongoClient;
[Link]('view engine','pug');
[Link]('views','pugFiles');

consturlDb ='mongodb://localhost:27017';
constnameDb ='blog';
consturlConnect ='8080';

[Link]('/', function(req, res, next) {

varcollection =[Link]('articles');
[Link]().sort({date:-1}).limit(10).toArray(function(err,data){
[Link]('index',{ title:'Bonjour',h1:'Une liste',liste: data})
});
});

[Link](urlDb, function(err, client) {

se (err) {
retornar;
}
mongoClient = [Link](nomeDb);
[Link](urlConnect,function(){
[Link](' - O servidor está disponível na porta 8080');
});
});

2 - Segurança da conexão
Não temos certeza de que a conexão estará disponível constantemente. Precisamos
Portanto, realize a conexão em cada rota e feche a conexão no final da rota.
varexpress =require('express');
varapp = express();
varMongoClient = require('mongodb').MongoClient;
varmaDb;
[Link]('view engine','pug');
[Link]('views', 'pugFiles');

consturlDb ='mongodb://localhost:27017';
constnameDb ='blog';
consturlConnect ='8080';

[Link]('/',function(req,res,next){
[Link](urlDb, function(err, client) {
se (erro) {
[Link](503);
próximo();
retornar;
}
varinstance =[Link](nameDb);
varcollection = [Link]('artigos');
[Link]().sort({data:-1}).limit(10).toArray(function(err,data){
[Link]();
[Link]('index',{ title:'Bonjour',h1:'Une liste',liste: data})
});
});
});

[Link](urlConnect,function(){};
[Link](' - O servidor está disponível na porta 8080');
});
});
 3 - Fatoração da conexão
Seria mais sensato agrupar o código da conexão em um módulo ([Link]). Por exemplo
:

varurlDb ='mongodb://localhost:27017';
varnameDb ='blog';

[Link] = function(req,res,next,cb){
se ([Link] && [Link]()) {
varinstance = [Link]([Link]);
cb(instância);
} senão {
[Link](urlDb,function(err,client){
[Link] = client;
se (err) {
[Link](503);
próximo();
retornar;
}
varinstance = [Link](nomeDb);
cb(instância)
});
}
});

Nosso arquivo principal será então o seguinte:

varexpress =require('express');
varapp =express();
[Link]('view engine','pug');
[Link]('views','pugFiles');

vardbInterface =require('./db');
consturlConnect ='8080';

[Link]('/', function(req, res, next) {

[Link](req,res,next,function(db){
varcollection =[Link]('articles');
[Link]().sort({date:-1}).limit(10).toArray(function(err,data){
[Link]('index',{ title:'Bonjour',h1:'Une liste',liste: data})
});
})
});

[Link](urlConnect,function(){
[Link](' - Le serveur est disponible sur le port 8080');
});