Desenvolvimento Web – Jair C Leite
DESENVOLVIMENTO
WEB
Jair C Leite
© Jair C Leite
Desenvolvimento Web – Jair C Leite
EXPRESS JS
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Express JS
• Versão [Link] mínima e flexível para criar
servidores HTTP
• Utiliza o módulo http do [Link]
• Oferece recursos robustos para aplicações Web e
em dispositivos móveis
• Fácil para criar APIs Express
Fast, unopinionated,
minimalist web
framework for [Link]
([Link])
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Instalando Express JS
• Instale o express usando o npm
• npm init
• npm install express --save
• Adicionalmente (mais tarde) instale ainda:
• body-parser − para processar JSON, Raw, Text e URL
• npm install body-parser –save
• cookie-parser − para Cookies
• npm install cookie-parser –save
• multer − para multipart/form-data.
• npm install multer --save
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Exemplo – Olá Mundo
var express = require('express');
var app = express();
[Link]('/', function (req, res) {
[Link]('Olá Mundo');
})
var server = [Link](8081, function () {
var host = [Link]().address
var port = [Link]().port
[Link]("Exemplo escutando em [Link] host,
port)
})
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Exemplo – roteando métodos HTTP
var express = require('express');
var app = express();
// This responds with "Hello World" on the homepage
[Link]('/', function (req, res) {
[Link]("GET request para homepage");
[Link]('Hello GET');
})
// This responds a POST request for the homepage
[Link]('/', function (req, res) {
[Link]("POST request para homepage");
[Link]('Hello POST');
})
// This responds a DELETE request for the /del_user page.
[Link]('/del_user', function (req, res) {
[Link]("DELETE request para /del_user");
[Link]('Hello DELETE');
})
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Usando recursos estáticos
• Recursos estáticos são
• Páginas HTML, programas JS, estilos CSS, imagens,..
• O middleware [Link] permite ao servidor
Express tratar recursos estáticos
• [Link]([Link]('public'));
• Onde ’public’ é o diretório (pasta) onde os arquivos
estáticos estarão colocados.
Crie uma pasta ‘public’ ou com o nome que
você desejar e coloque arquivos lá
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Exemplo – recursos estáticos
var express = require('express');
var app = express();
[Link]([Link]('public'));
[Link]('/', function (req, res) {
[Link]('Hello World');
})
var server = [Link](8081, function () {
var host = [Link]().address
var port = [Link]().port
[Link]("Exemplo escutando em [Link] host, port)
})
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Manuseando formulários – 1
• O servidor express pode trabalhar de forma tradicional
para processar formulários HTML
• Seja um formulário para nome e sobrenome:
<html>
<body>
<form action = "[Link] method =
"GET">
Nome: <input type = "text" name = "primnome"> <br>
Sobrenome: <input type = "text" name = "sobrenome">
<input type = "submit" value = "Submit">
</form>
</body>
</html>
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Manuseando formulários – 2
• O servidor express para processar o formulário seria
...
[Link]([Link]('public'));
[Link]('/[Link]', function (req, res) {
[Link]( __dirname + "/" + "[Link]" );
})
[Link]('/process_get', function (req, res) {
// Prepare output in JSON format
response = {
primnome:[Link],
sobrenome:[Link]
};
[Link](response);
[Link]([Link](response));
})
…
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Usando POST para enviar arquivos
• Para enviar um arquivo para o servidor, use POST
• Instale o body-parser e multer
• npm install multer --save
• npm install body-parser --save
• Arquivo HTML: [Link]
<form action = "[Link] method =
"POST"
enctype = "multipart/form-data">
<input type="file" name="file" size="50" />
<br />
<input type = "submit" value = "Enviar arquivo" />
</form>
© Jair C Leite
Desenvolvimento Web – Jair C Leite
[Link] – parte 1
var bodyParser = require('body-parser');
var multer = require('multer');
[Link]([Link]('public'));
[Link]([Link]({ extended: false }));
[Link](multer({ dest: '/tmp/'}));
[Link]('/[Link]', function (req, res) {
[Link]( __dirname + "/" + "[Link]" );
})
© Jair C Leite
Desenvolvimento Web – Jair C Leite
[Link] – parte 2
[Link]('/file_upload', function (req, res) {
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
var file = __dirname + "/" + [Link];
[Link]( [Link], function (err, data) {
[Link](file, data, function (err) {
if( err ) {
[Link]( err );
} else {
response = {
message:'File uploaded successfully',
filename:[Link]
};
}
[Link]( response );
[Link]( [Link]( response ) );
});
});
})
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Iniciando um sistema Web com
ExpressJS
Chrome /public
GET /[Link]
[Link] html/[Link]
(server)
[Link]
Módulo
ExpressJS
images/*.jpg
© Jair C Leite
Desenvolvimento Web – Jair C Leite
[Link]
• var express = require('express');
• var app = express();
• [Link]([Link]('public'));
• [Link]('[Link]', function (req, res) {
• [Link]( __dirname + "/" + "[Link]" );
• })
• [Link]('/processform', function (req, res) {
• // Prepare output in JSON format
• response = {
• Name:[Link],
• Email:[Link],
• Message:[Link]
• };
• [Link](response);
• [Link]([Link](response));
• })
• [Link](8081, [Link]("Exemplo escutando na porta 8081"));
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Processando o form com GET
Chrome
GET /[Link]/?Name=Jair&Email=jair@...
{Name:’Jair’, Email:’jair@...}
[Link]
(server)
[Link]
Módulo
ExpressJS
© Jair C Leite
Desenvolvimento Web – Jair C Leite
[Link] (outra parte)
• var express = require('express');
• var app = express();
• [Link]([Link]('public'));
• [Link]('[Link]', function (req, res) {
• [Link]( __dirname + "/" + "[Link]" );
• })
• [Link]('/processform', function (req, res) {
• // Prepare output in JSON format
• response = {
• Name:[Link],
• Email:[Link],
• Message:[Link]
• };
• [Link](response);
• [Link]([Link](response));
• })
• [Link](8081, [Link]("Exemplo escutando na porta 8081"));
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Processando o form com POST
Chrome
POST /[Link]
{Name:’Jair’, Email:’jair@...}
[Link]
(server)
[Link]
Módulo
ExpressJS
© Jair C Leite
Desenvolvimento Web – Jair C Leite
[Link] (estende o anterior)
• var express = require('express');
• var bodyParser = require('body-parser');
• var app = express();
• // for parsing application/xwww-
• [Link]([Link]({ extended: true }));
• [Link]([Link]('public'));
• [Link]('[Link]', …)
• [Link]('/processform', …)
• [Link]('/processform', function (req, res) {
• // Prepare output in JSON format
• response = {
• Name:[Link],
• Email:[Link],
• Message:[Link]
• };
• [Link]("Processando requisição POST:");
• [Link](response);
• [Link]([Link](response));
• })
• [Link](8081, [Link]("Exemplo escutando na porta 8081"));
© Jair C Leite
Desenvolvimento Web – Jair C Leite
Referências
• [Link]
• [Link]
press_framework.htm
© Jair C Leite