Node.js - Express Framework

Visão geral expressa

Express é uma estrutura de aplicativo da web Node.js mínima e flexível que fornece um conjunto robusto de recursos para desenvolver aplicativos da web e móveis. Ele facilita o rápido desenvolvimento de aplicativos da Web baseados em Node. A seguir estão alguns dos principais recursos da estrutura Express -

• Permite configurar middlewares para responder a solicitações HTTP.

• Define uma tabela de roteamento que é usada para realizar diferentes ações com base no método HTTP e URL.

• Permite renderizar páginas HTML dinamicamente com base na passagem de argumentos para modelos.

Instalando o Express

Em primeiro lugar, instale a estrutura Express globalmente usando NPM para que possa ser usada para criar um aplicativo da web usando terminal de nó.

$ npm install express --save

O comando acima salva a instalação localmente no node_modulesdiretório e cria um diretório expresso dentro de node_modules. Você deve instalar os seguintes módulos importantes junto com express -

• body-parser - Este é um middleware node.js para lidar com dados de formulários codificados em JSON, Raw, Texto e URL.

• cookie-parser - Analisar o cabeçalho do cookie e preencher req.cookies com um objeto codificado pelos nomes dos cookies.

• multer - Este é um middleware node.js para lidar com multipart / form-data.

$ npm install body-parser --save
$ npm install cookie-parser --save
$ npm install multer --save

Olá, mundo, exemplo

A seguir está um aplicativo Express muito básico que inicia um servidor e escuta na porta 8081 para conexão. Este aplicativo responde comHello World!para solicitações à página inicial. Para todos os outros caminhos, ele responderá com um404 Not Found.

var express = require('express');
var app = express();

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Salve o código acima em um arquivo chamado server.js e execute-o com o seguinte comando.

$ node server.js

Você verá a seguinte saída -

Example app listening at http://0.0.0.0:8081

Abra http://127.0.0.1:8081/ em qualquer navegador para ver o seguinte resultado.

Pedido e Resposta

O aplicativo expresso usa uma função de retorno de chamada cujos parâmetros são request e response objetos.

app.get('/', function (req, res) {
   // --
})

• Objeto de solicitação - o objeto de solicitação representa a solicitação HTTP e tem propriedades para a string de consulta da solicitação, parâmetros, corpo, cabeçalhos HTTP e assim por diante.

• Objeto de resposta - o objeto de resposta representa a resposta HTTP que um aplicativo Express envia ao obter uma solicitação HTTP.

Você pode imprimir req e res objetos que fornecem muitas informações relacionadas à solicitação e resposta HTTP, incluindo cookies, sessões, URL, etc.

Roteamento Básico

Vimos um aplicativo básico que atende a solicitações HTTP para a página inicial. O roteamento refere-se à determinação de como um aplicativo responde a uma solicitação do cliente para um ponto de extremidade específico, que é um URI (ou caminho) e um método de solicitação HTTP específico (GET, POST e assim por diante).

Estenderemos nosso programa Hello World para lidar com mais tipos de solicitações HTTP.

var express = require('express');
var app = express();

// This responds with "Hello World" on the homepage
app.get('/', function (req, res) {
   console.log("Got a GET request for the homepage");
   res.send('Hello GET');
})

// This responds a POST request for the homepage
app.post('/', function (req, res) {
   console.log("Got a POST request for the homepage");
   res.send('Hello POST');
})

// This responds a DELETE request for the /del_user page.
app.delete('/del_user', function (req, res) {
   console.log("Got a DELETE request for /del_user");
   res.send('Hello DELETE');
})

// This responds a GET request for the /list_user page.
app.get('/list_user', function (req, res) {
   console.log("Got a GET request for /list_user");
   res.send('Page Listing');
})

// This responds a GET request for abcd, abxcd, ab123cd, and so on
app.get('/ab*cd', function(req, res) {   
   console.log("Got a GET request for /ab*cd");
   res.send('Page Pattern Match');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Salve o código acima em um arquivo chamado server.js e execute-o com o seguinte comando.

$ node server.js

Você verá a seguinte saída -

Example app listening at http://0.0.0.0:8081

Agora você pode tentar diferentes solicitações em http://127.0.0.1:8081 para ver a saída gerada por server.js. A seguir estão algumas capturas de tela mostrando diferentes respostas para diferentes URLs.

Tela mostrando novamente http://127.0.0.1:8081/list_user

Tela mostrando novamente http://127.0.0.1:8081/abcd

Tela mostrando novamente http://127.0.0.1:8081/abcdefg

Servindo arquivos estáticos

O Express fornece um middleware integrado express.static para servir arquivos estáticos, como imagens, CSS, JavaScript, etc.

Você simplesmente precisa passar o nome do diretório onde você mantém seus ativos estáticos, para o express.staticmiddleware para começar a servir os arquivos diretamente. Por exemplo, se você mantiver suas imagens, arquivos CSS e JavaScript em um diretório chamado public, você pode fazer isso -

app.use(express.static('public'));

Vamos manter algumas imagens em public/images subdiretório da seguinte forma -

node_modules
server.js
public/
public/images
public/images/logo.png

Vamos modificar o aplicativo "Hello Word" para adicionar a funcionalidade de lidar com arquivos estáticos.

var express = require('express');
var app = express();

app.use(express.static('public'));

app.get('/', function (req, res) {
   res.send('Hello World');
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port

   console.log("Example app listening at http://%s:%s", host, port)
})

Salve o código acima em um arquivo chamado server.js e execute-o com o seguinte comando.

$ node server.js

Agora abra http://127.0.0.1:8081/images/logo.png em qualquer navegador e observe o seguinte resultado.

Método GET

Aqui está um exemplo simples que passa dois valores usando o método HTML FORM GET. Vamos usarprocess_get roteador dentro de server.js para lidar com essa entrada.

<html>
   <body>
      
      <form action = "http://127.0.0.1:8081/process_get" method = "GET">
         First Name: <input type = "text" name = "first_name">  <br>
         Last Name: <input type = "text" name = "last_name">
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

Vamos salvar o código acima em index.htm e modificar server.js para lidar com as solicitações da página inicial, bem como a entrada enviada pelo formulário HTML.

var express = require('express');
var app = express();

app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.get('/process_get', function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.query.first_name,
      last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Acessar o documento HTML usando http://127.0.0.1:8081/index.htm irá gerar o seguinte formulário -

 
       
 
        

         
 
          
First Name:
 
          
 
         
 
         
 
          
Last Name:
 
          
 
         
 
         
 
          
 
         
 
        
       
 
      

Agora você pode inserir o nome e o sobrenome e clicar no botão enviar para ver o resultado e deve retornar o seguinte resultado -

{"first_name":"John","last_name":"Paul"}

Método POST

Aqui está um exemplo simples que passa dois valores usando o método HTML FORM POST. Vamos usarprocess_get roteador dentro de server.js para lidar com essa entrada.

<html>
   <body>
      
      <form action = "http://127.0.0.1:8081/process_post" method = "POST">
         First Name: <input type = "text" name = "first_name"> <br>
         Last Name: <input type = "text" name = "last_name">
         <input type = "submit" value = "Submit">
      </form>
      
   </body>
</html>

Vamos salvar o código acima em index.htm e modificar server.js para lidar com as solicitações da página inicial, bem como a entrada enviada pelo formulário HTML.

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use(express.static('public'));
app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/process_post', urlencodedParser, function (req, res) {
   // Prepare output in JSON format
   response = {
      first_name:req.body.first_name,
      last_name:req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Acessar o documento HTML usando http://127.0.0.1:8081/index.htm irá gerar o seguinte formulário -

 
       
 
        

         
 
          
First Name:
 
          
 
         
 
         
 
          
Last Name:
 
          
 
         
 
         
 
          
 
         
 
        
       
 
      

Agora você pode inserir o nome e o sobrenome e, em seguida, clicar no botão enviar para ver o seguinte resultado -

{"first_name":"John","last_name":"Paul"}

Upload de arquivo

O código HTML a seguir cria um formulário de upload de arquivo. Este formulário possui atributo de método definido comoPOST e o atributo enctype é definido como multipart/form-data

<html>
   <head>
      <title>File Uploading Form</title>
   </head>

   <body>
      <h3>File Upload:</h3>
      Select a file to upload: <br />
      
      <form action = "http://127.0.0.1:8081/file_upload" method = "POST" 
         enctype = "multipart/form-data">
         <input type="file" name="file" size="50" />
         <br />
         <input type = "submit" value = "Upload File" />
      </form>
      
   </body>
</html>

Vamos salvar o código acima em index.htm e modificar o server.js para lidar com as solicitações da página inicial e também com o upload de arquivos.

var express = require('express');
var app = express();
var fs = require("fs");

var bodyParser = require('body-parser');
var multer  = require('multer');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(multer({ dest: '/tmp/'}));

app.get('/index.htm', function (req, res) {
   res.sendFile( __dirname + "/" + "index.htm" );
})

app.post('/file_upload', function (req, res) {
   console.log(req.files.file.name);
   console.log(req.files.file.path);
   console.log(req.files.file.type);
   var file = __dirname + "/" + req.files.file.name;
   
   fs.readFile( req.files.file.path, function (err, data) {
      fs.writeFile(file, data, function (err) {
         if( err ) {
            console.log( err );
            } else {
               response = {
                  message:'File uploaded successfully',
                  filename:req.files.file.name
               };
            }
         
         console.log( response );
         res.end( JSON.stringify( response ) );
      });
   });
})

var server = app.listen(8081, function () {
   var host = server.address().address
   var port = server.address().port
   
   console.log("Example app listening at http://%s:%s", host, port)
})

Acessar o documento HTML usando http://127.0.0.1:8081/index.htm irá gerar o seguinte formulário -

File Upload:
Select a file to upload: 





NOTE: This is just dummy form and would not work, but it must work at your server.

Gestão de Cookies

Você pode enviar cookies para um servidor Node.js que pode lidar com o mesmo usando a seguinte opção de middleware. A seguir está um exemplo simples para imprimir todos os cookies enviados pelo cliente.

var express      = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function(req, res) {
   console.log("Cookies: ", req.cookies)
})
app.listen(8081)