A princípio, quando trabalhamos com servidores HTTP vamos ter que apontar para onde o navegador terá que ir com as URLs, desta forma precisamos trabalhar com as rotas.
Curso Node.js - Fundamentos
Conhecer o cursoSempre que apontamos o navegador para alguma rota, ele faz uma requisição, se tratando do protocolo HTTP, nós temos os métodos ou verbos HTTP que definem o comportamento da requisição, os mais usados são get, post, put, delete.
Caso esse assunto seja novidade para você, aconselho a leitura de dois artigos onde explicamos estes conceitos, são eles: O que HTTP? e REST não é simplesmente retornar JSON: indo além com APIs REST
Servidor HTTP com Express
Primeiramente vamos precisar ter um servidor rodando em nosso ambiente, para isso vamos precisar:
- Configurar ambiente Node.js;
- Instalar o Express com o NPM;
- Importar o Express e iniciar o servidor na nossa aplicação.
Esses passos já foram explicados em nosso artigo de como criar um servidor HTTP com Express.
Agora vamos entender o gerenciamento de rotas do Express.
Rota com Requisição GET
Vamos criar uma aplicação com a seguinte estrutura:
Nosso servidor está no arquivo index.js, da seguinte maneira:
import Express from 'Express';
const app = Express();
app.listen(3000, () =>
console.log('Servidor iniciado na porta 3000')
);
Agora precisamos criar a rota raiz, pra isso vamos utilizar o método (ou verbo) get, caso contrário ao entrarmos em localhost:3000 (endereço de nosso servidor local), vamos obter a seguinte mensagem no navegador: Cannot GET /.
Por isso vamos começar pelo get. O Express permite o uso dos métodos (verbos) HTTP de maneira muito simples, neste caso vamos utilizar o método app.get():
import Express from 'Express';
const app = Express();
app.get('/', (req, res) =>
res.send("<h3>Rotas no Express</h3><p>Rota '/'")
);
app.listen(3000, () =>
console.log('Servidor iniciado na porta 3000')
);
Como podemos ver, utilizamos o método get seguindo o primeiro parâmetro, onde apontamos a rota. Logo em seguida, passamos uma arrow function, que recebe uma request e um response, com o response podemos usar o método send e exibir o conteúdo que desejamos, neste caso, uma mensagem em formato HTML, porém no response você poderia passar um JSON por exemplo.
Ao executar o nosso servidor e entrar na rota principal, depois de configurado a rota, vamos obter o seguinte resultado:
Nós podemos, por exemplo, criar outras rotas de acordo com a necessidade da sua aplicação, como uma página sobre, desta forma, utilizando a rota /sobre:
import Express from 'Express';
const app = Express();
app.get('/', (req, res) =>
res.send("<h3>Rotas no Express</h3><p>Rota '/'")
);
app.get('/sobre', (req, res) =>
res.send("<h3>Rotas no Express</h3><p>Vamos aprender a utilizar Rotas com Express")
);
app.listen(3000, () =>
console.log('Servidor iniciado na porta 3000')
);
Utilizando a mesmo conceito do método app.get(), criamos a rota /sobre, com um conteúdo diferente da rota principal:
Nós podemos também receber parâmetro pela URL usando o método get, para isso precisamos, no momento de configurar a rota, utilizar :parametro, onde ‘:’ é o que caracteriza a variável que vamos usar, conforme exemplo abaixo:
import Express from 'Express';
const app = Express();
app.get('/', (req, res) =>
res.send("<h3>Rotas no Express</h3><p>Rota '/'")
);
app.get('/sobre', (req, res) =>
res.send("<h3>Rotas no Express</h3><p>Vamos aprender a utilizar Rotas com Express")
);
app.get('/users/:name', (req, res) => //recebe o parâmetro name
res.send('Usuário:' + req.params.name) //exibe o parametro name
);
app.listen(3000, () =>
console.log('Servidor iniciado na porta 3000')
);
Dessa forma vamos receber um parâmetro e exibir na resposta da requisição:
Rota com Requisição POST
Antes de tudo para exemplificar uma rota com express utilizando post vamos criar um array, vamos chamar esse array de carros e criar uma lista com o nome de carros aleatórios:
var carros = ['fiesta', 'saveiro'];
Em seguida vamos criar uma rota GET para consultar os dados deste array, utilizando o índice do vetor para acessar o valor de cada item do vetor, da seguinte forma:
app.get('/cars/:id', (req, res) => {
let id = req.params.id;
return res.json([carros[id]])
});
Se fizermos uma consulta passando o índice 0, vamos obter o seguinte retorno:
Que corresponde ao índice 0 de nosso array.
Curso Node.js - Templates com PUG
Conhecer o cursoAgora vamos cadastrar novos carros em nosso array utilizando o verbo POST, no Express podemos facilmente utilizar junto ao método app.post(). Então vamos criar uma rota e enviar o nome do novo carro pela requisição post da seguinte forma:
Vamos adicionar a seguinte linha após a declaração do array.
app.use(Express.urlencoded({ extended: true }));
E então, utilizar o método app.post();.
app.post('/cars/', (req, res) => {
let name = req.body.name;
carros[(carros.length)] = name;
return res.json([carros[(carros.length - 1)]]);
});
OBS: perceba que adicionamos a linha app.use(Express.urlencoded({ extended: true }));. Como estamos trabalhando com JSON, precisamos fazer o parsing do conteúdo que recebemos nas requisições. Para isso utilizamos o urlenconded, e no caso o extended: true, para selecionar a biblioteca compatível com JSON. Para mais informações sobre a função urlenconded();, você pode estar acessando a documentação do Express.
Utilizando POSTMAN
O Postman é uma ferramenta que podemos utilizar para testar requisições HTTP. Você pode acessar o site da ferramenta para saber mais sobre ela e efetuar o download (também existe a versão no navegador caso seja sua preferência).
Logo, ao criar a rota /cars, vamos pegar a informação que mandaremos pela requisição (no caso o nome do carro) e atribuir este valor na variável name. Por último, vamos adicionar ao final do nosso array. Usando o Postman, vamos então efetivamente enviar a requisição:
Para isto vamos usar a nossa rota /cars, selecionar como requisição post, e passar o valor “onix” conforme imagem acima. Observe que tivemos o retorno em JSON, para confirmar vamos fazer uma requisição GET passando o último índice do nosso array:
Conforme retorno, nossa requisição post foi efetuada com sucesso. No final deste processo, nosso código estará conforme abaixo:
import Express from 'Express';
const app = Express();
var carros = ['fiesta', 'saveiro'];
app.use(Express.urlencoded({ extended: true }));
app.get('/', (req, res) =>
res.send("<h3>Rotas no Express</h3><p>Rota '/'")
);
app.get('/sobre', (req, res) =>
res.send("<h3>Rotas no Express</h3><p>Vamos aprender a utilizar Rotas com Express")
);
app.get('/users/:name', (req, res) =>{
return res.json([name]);
});
app.post('/cars/', (req, res) => {
let name = req.body.name;
carros[(carros.length)] = name;
return res.json([carros[(carros.length - 1)]]);
});
app.get('/cars/:id', (req, res) => {
let id = req.params.id;
return res.json([carros[id]])
});
app.listen(3000, () =>
console.log('Servidor iniciado na porta 3000')
);
Rota com requisição PUT
Podemos criar também uma rota com express para atualizar os dados da nossa aplicação, para isso podemos utilizar a rota junto ao método app.put(). A requisição PUT segue o mesmo conceito da requisição POST, com a diferença que vamos atualizar uma informação. Neste exemplo vamos atualizar o nome do carro de índice 0 do nosso array já criado, carros[]:
app.put('/cars/update/:id', (req, res) => {
let name = req.body.name;
carros[req.params.id] = name;
return res.json(carros[req.params.id]);
});
Com a variável name pegamos o valor que vamos passar na requisição, localizar o índice do array com o parâmetro passado pela rota e, finalmente, atualizar os valores. Neste caso vamos atualizar o valor que está no índice 0 (fiesta), para “fusca”:
Usamos o Postman para efetuar a requisição PUT, e logo em seguida fizemos uma requisição GET na rota /cars/:id para confirmar a atualização efetuada em nosso array.
Rota com requisição DELETE
Agora, vamos criar uma rota para deletar algum dado da nossa aplicação, para isso vamos utilizar o método app.delete();. Vamos passar a rota “/cars/delete/:id, onde o id será o índice do nosso array, desta forma:
app.delete('/cars/delete/:id', (req, res) => {
let id = req.params.id;
carros[id] = null; //deletar item
return res.json(carros[id]);
});
Assim, o conteúdo do nosso array de respectivo id, que foi passado por parâmetro, será null. Fizemos isso para simular a exclusão de um dado (estamos alterando para vazio), já que estamos utilizando somente um array, por exemplo, e não necessariamente acessando um banco de dados e excluindo algum item. Para testar, seguimos o mesmo exemplo da rota usando a requisição put:
Por fim, acessamos a rota com a requisição get:
Conclusão
Em suma, vale salientar que nós utilizamos um único arquivo com várias responsabilidades (como as rotas e o servidor), fizemos isto para fins didáticos, conforme a aplicação for crescendo o ideal é criarmos vários arquivos onde cada um tenha uma responsabilidade. Como resultado, aprendemos a utilizar as rotas com Express em diferentes cenários em relação às requisições GET, POST, PUT e DELETE, onde podemos utilizar para outros métodos/verbos HTTP possibilitando criar aplicações web e APIs de forma robusta e prática.
Curso Express - Desenvolvendo aplicações web
Conhecer o cursoPor fim, caso queira aprender mais sobre Express saiba que aqui na TreinaWeb temos o curso Express - Desenvolvendo aplicações web que possui 03h09 de vídeos e um total de 18 exercícios. Conheça também nossos outros cursos de Node.js.
Veja quais são os tópicos abordados durante o curso de Express - Desenvolvendo aplicações web:
- Conhecendo a estrutura;
- Entendendo os objetos Request e Response;
- Servindo arquivos estáticos;
- Roteamento;
- Conexão com banco de dados;
- Template Engine;
- Express Generator.
