OW Interactive
Published in

OW Interactive

Entendendo o express.Router e usando módulos de forma simples

O express.Router nos ajuda a manipular nossas rotas em aplicativos NodeJS, nesse exemplo criaremos rotas de forma modularizada, criando um arquivo para lidar com nossas rotas de produtos e um arquivo para nossa rota de usuarios.

Estrutura dos arquivos

Criamos uma pasta chamada routes e os arquivos produtos.js e usuarios.js, esses arquivos serão os responsaveis por manipular nossas rotas.

A pasta views abriga os arquivos HTML que as rotas irão servir ao serem chamadas, dentro dela há uma pasta produtos e uma pasta usuarios apenas para organizar melhor

o app.js é nosso arquivo principal, o responsavel por criar o servidor e importar nossos arquivos — produtos.js e usuarios.js — com as rotas

Módulos necessários

Ao criar a pasta principal, deveremos dar o npm init -y para criar nossa nova aplicação, e após isso npm install express para instalarmos nossa dependência do ExpressJS, o framework responsável por facilitar nosso trabalho através do express.Routes

Criando o servidor

No arquivo app.js vamos criar nosso servidor, para isso usaremos o seguinte código

Criando nossas routes no arquivo produtos.js

Vamos as explicações do que fizemos no arquivo acima, começando nos imports, primeiro importamos o express que é o coração das nossas rotas, feito isso, criamos uma constante "router" e atribuímos a ela a função express.router que vai ser exportada e jaja importaremos no app.js para dizer que esse arquivo gerencia nossas rotas para os produtos.

Uma vez os imports realizados (eu sei que não expliquei um ainda, vamos chegar lá!), criaremos nossa primeira rota. Ela será responsável por devolver o arquivo views/produtos/produtos.html, o conteúdo do arquivo HTML é irrelevante e você pode montar como quiser.

Enviando arquivo HTML como resposta à requisição

Essa é a nossa rota, retirei o trecho do código do arquivo acima para melhor visualização.

Na primeira parte, realizamos um router.get para o diretório "/" dessa forma ao acessarmos localhost:3000 (caminho definido como nosso servidor) usaremos uma função callback passando como parâmetros requisição, responsta e next (não precisaremos do next aqui, resolvi passar apenas como lembrete que ele existe)

Na segunda parte, usamos o res.sendFile como resposta a requiseição, ela é responsavel pela entrega do arquivo HTML. Agora que entra nosso import que ficou para atrás, o path, nós importamos essa função do core do NodeJS e usamos path.join para encontrar o arquivo HTML, independente do sistema operacional do nosso servidor (linux e Mac usam / e windows usa \, o que pode dar problema ao "chumbar" o caminho) __dirname é uma variavel global do nodeJS e representa o caminho até o arquivo de onde é invocada, dessa forma usamos virgulas para separar as pastas até o arquivo final. Primeiro usamos o '../' para sair da pasta routes e entramos em views, produtos, produtos.html.

O ultimo passo é no final do arquivo exportar a função router com o module.exports = router

Importando em app.js

A importação agora é bem simples, criamos uma constante produtosRoutes dando require no arquivo produtos.js e então usamos app.use(produtosRoutes) — Dessa forma todas as rotas que estão sendo tratadas no arquivo produtos.js já são validas na nossa aplicação, ao acessarmos http://localhost:3000 teremos acesso ao arquivo produtos.html

Adicionando mais rotas

Podemos adicionar mais rotas, copiando a rota do arquivo produtos, alterando o endereço da requisição e o arquivo da resposta

lembrando que podemos agora adicionar quantas rotas quisermos no arquivo produtos.js e nada mais precisará ser importado no arquivo app.js

Um outro exemplo, criamos o arquivo usuarios.js que trata uma requisção para o endereço http://localhost:3000/usuarios

Agora sim precisaremos ir até o arquivo app.js e importarmos o novo arquivo usuarios.js

Criamos a constante usuariosRoutes e adicionamos app.use(usuariosRoutes) dessa forma todas as rotas criadas nos arquivos produtos.js e usuarios.js já estão vinculadas ao nosso arquivo principal app.js!

Espero que tenha ficado claro como o express.Routes funciona de forma a modularizar nossos arquivos de rotas, facilitando o gerenciamento em aplicações mais complexas!

Qualquer coisa, sinta-se livre de conversar comigo no twitter, lembre-se que eu sou apenas um estudante compartilhando aquilo que aprendo =)

https://twitter.com/MetaLcsgo91

--

--

We are part of the digital universe, focused on creating and developing interactive experiences by integrating planning, creativity and technology.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store