Programação Web Back-end
Mustache e Rotas com Express
Universidade Tecnológica Federal do Paraná (UTFPR)
Diego Addan
Departamento de Computação 2024
Conteúdo
Templates
Rotas
Ambiente e testes
Templates
Moustache JS é uma biblioteca JavaScript para criação de modelos HTML que
funcionam com dados dinâmicos. Mustache n]ao é um mecanismo de
modelagem, mas sim uma especificação para uma linguagem de modelagem
Estruturas de dados complexas
Angular, React, knockout etc.
Exibir dados dinâmicos na interface do usuário
Criação de tabela dinâmica , visualização de lista, etc.,
Exemplo prático
A
Templates
Olá {{planeta}}
"planeta Terra"
Olá Terra
Exemplo prático
A
Templates
Daremos um exemplo simples de exibição de informações de funcionários.
Modelo mustache
Templates
Depois de criar o modelo, você precisa compilá-lo usando o método
[Link] . O método [Link] aceita dois argumentos, ou
seja, modelo e dados.
Exemplo prático
Vamos criar outro modelo que pegue a lista de funcionários e exiba a lista formatada na
página. Nosso EmployeeList é
um array de objetos de funcionários
que já criamos.
Exemplo prático
modelo mustache que pega o objeto EmployeeList e o compila
Exemplo prático
modelo mustache que pega o objeto EmployeeList e o compila
Exemplo prático
modelo mustache que pega o objeto EmployeeList e o compila
Exemplo prático
modelo mustache que pega o objeto EmployeeList e o compila
Exemplo prático
A
Exemplo prático
A
Exemplo prático
A
Mustache
O mecanismo de modelagem expande as tags (as chaves) pelo que encontra nos dados
de entrada.
Condicionais:
{{#myCondition}} {
… "minhaCondição": falso
{{/myCondition}} }
Mustache
O mecanismo de modelagem expande as tags (as chaves) pelo que encontra nos dados
de entrada.
Loop:
Dados
{ "usuários": ["Hans", "Fritz", "Geraldine"] }
Mustache
{{#Usuários}} {{.}} {{/Usuários}}
Saída
Hans Fritz Geraldine
Mustache
O mecanismo de modelagem expande as tags (as chaves) pelo que encontra nos dados
de entrada.
Loop:
Dados
{ "usuários": ["Hans", "Fritz", "Geraldine"] }
Mustache
{{#Usuários}} {{.}} {{/Usuários}}
Saída
Hans Fritz Geraldine
Exemplo prático
A
Rotas com [Link]
Ambiente
● Configurar ambiente [Link];
● Instalar o Express com o NPM;
● Importar o Express e iniciar o servidor na nossa aplicação.
Gerenciamento de rotas do Express
Rotas
Rota com Requisição GET
Rotas
Precisamos criar a rota raiz, utilizando o verbo get,
O Express permite o uso dos métodos (verbos) HTTP de maneira muito simples, neste
caso vamos utilizar o método [Link]():
Rotas
Precisamos criar a rota raiz, utilizando o verbo get,
O Express permite o uso dos métodos (verbos) HTTP de maneira muito simples, neste
caso vamos utilizar o método [Link]():
apontamos a rota e passamos
uma arrow function, que
recebe uma request e um
response. O método send
exibe o conteúdo. No
response você poderia passar
um JSON por exemplo.
Rotas
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:
Rotas
Rotas
Utilizando a mesmo conceito do método [Link](),
criamos a rota /sobre, com um conteúdo diferente
da rota principal:
Rotas
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:
Rota com Requisição POST
Vamos criar um array 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:
Se fizermos uma consulta passando o índice 0:
Rota com Requisição POST
Vamos cadastrar novos carros em nosso array utilizando o verbo POST, no Express
podemos facilmente utilizar junto ao método [Link]().
Então vamos criar uma rota e enviar o nome do novo carro pela requisição post da
seguinte forma:
[Link]
Rota com Requisição POST
Utilizando POSTMAN ou ferramentas para testar requisições HTTP
Rota com Requisição PUT
A requisição PUT segue o mesmo conceito da requisição POST, com a diferença que atualizamos
uma informação. Neste exemplo vamos atualizar o nome do carro de índice 0 do nosso array já
criado, carros[]
Rota com Requisição PUT
A requisição PUT segue o mesmo conceito da requisição POST, com a diferença que atualizamos
uma informação. Neste exemplo vamos atualizar o nome do carro de índice 0 do nosso array já
criado, carros[]
Rota com Requisição PUT
A requisição PUT segue o mesmo conceito da requisição POST, com a diferença que atualizamos
uma informação. Neste exemplo vamos atualizar o nome do carro de índice 0 do nosso array já
criado, carros[]
Rota com Requisição DELETE
Vamos passar a rota “/cars/delete/:id, onde o id será o índice do nosso array
Estamos utilizando somente um array, e não necessariamente acessando um banco de dados e
excluindo algum item.
Vimos como utilizar as rotas com Express em diferentes cenários em relação às requisições GET,
POST, PUT e DELETE. Próximo de navegação em APIs