Express: rotas e dados

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

O servidor do capítulo 30 já escuta em 127.0.0.1:3000. Agora o foco é a rota /livros e o arquivo dados.json. A Biblioteca da Ribeira continua fictícia: Maré Alta e Caderno do Cais não existem fora deste volume.

Pasta: exemplos/31-express-rotas-e-dados/. npm install e npm start. Leia, copie, mude um título no JSON, preveja, recarregue e confira.

O que você vai aprender

• Explicar o recorte: JSON local no lugar de Mongo/Mongoose.
• Ler dados.json e montar a lista em /livros.
• Distinguir rota / e rota /livros.
• Incluir um terceiro livro fictício só neste arquivo.

Recorte: sem Mongo neste volume

A origem deste material usa MongoDB e Mongoose no tutorial Express. Aqui o recorte é outro. Você não instala banco na nuvem. Não cria conta. Não precisa de cluster.

Os títulos ficam em dados.json na mesma pasta do app.js. É um arquivo de texto. O Node lê com fs.readFileSync. Para estudar rotas e HTML, isso basta.

Mongo faria sentido se vários servidores compartilhassem o acervo. Este exercício tem um computador e dados inventados. JSON local evita ferramenta extra e senha de serviço.

O arquivo desta pasta:

[
  {"id": 1, "titulo": "Maré Alta", "autoria": "Iara Campos"},
  {"id": 2, "titulo": "Caderno do Cais", "autoria": "Lina Bezerra"}
]

Cada objeto tem id, titulo e autoria. Vírgula entre objetos. Sem vírgula depois do último.

Erro comum: tratar este JSON como cadastro real. Não coloque nome de colega, telefone ou e-mail. Use só personagens da Ribeira.

A rota /livros

Uma rota é o caminho depois da porta. / é a home. /livros é o catálogo.

const express = require("express");
const fs = require("fs");
const path = require("path");
const app = express();
app.use(express.urlencoded({ extended: false }));
app.get("/", function (_req, res) {
  res.type("html").send(`<!DOCTYPE html><html lang="pt-BR"><head><meta charset="utf-8"><title>Ribeira Express</title></head><body><h1>Biblioteca da Ribeira (Express)</h1><p><a href="/livros">Livros</a></p></body></html>`);
});
app.get("/livros", function (_req, res) {
  const livros = JSON.parse(fs.readFileSync(path.join(__dirname, "dados.json"), "utf8"));
  const itens = livros.map((l) => `<li>${l.titulo} — ${l.autoria}</li>`).join("");
  res.type("html").send(`<!DOCTYPE html><html lang="pt-BR"><head><meta charset="utf-8"><title>Livros</title></head><body><h1>Livros</h1><ul>${itens}</ul></body></html>`);
});
app.listen(3000, "127.0.0.1", function () {
  console.log("http://127.0.0.1:3000");
});

path.join(__dirname, "dados.json") monta o caminho do arquivo ao lado do app.js. JSON.parse transforma texto em lista. map vira cada livro num <li>.

Abra http://127.0.0.1:3000/livros. Os dois títulos devem aparecer.

Pare e experimente. Em dados.json, troque só “Maré Alta” por “Maré Baixa”. Salve. Recarregue /livros. Preveja uma linha nova e Lina Bezerra igual. Se nada mudar, o servidor ainda lê uma cópia antiga: pare com Ctrl+C e rode npm start de novo.

Um livro a mais

Inclua um terceiro objeto, com vírgula depois do segundo:

[
  {"id": 1, "titulo": "Maré Alta", "autoria": "Iara Campos"},
  {"id": 2, "titulo": "Caderno do Cais", "autoria": "Lina Bezerra"},
  {"id": 3, "titulo": "Mapa do Recife Antigo", "autoria": "Nilo Serra"}
]

id 3 é só um número neste arquivo. Não é banco relacional. Reinicie o Node e recarregue.

Erro comum: JSON inválido (vírgula a mais no fim ou aspas tipográficas). O terminal mostra erro de parse e a rota quebra. Abra dados.json no editor e confira as aspas retas.

A home continua com um link para /livros. Os dois caminhos são GET: só leitura. POST entra no capítulo 32.

Se a home abrir e /livros não, a rota não registrou ou o listen não rodou. Confira o terminal. A mensagem precisa ser http://127.0.0.1:3000.

Pare e experimente. Na home, o href é /livros sem porta. O navegador reutiliza 127.0.0.1:3000. Não escreva outro host no link.

Quando os três títulos fictícios listarem em 127.0.0.1:3000/livros, avance.

Atividades

1. Por que este volume usa dados.json em vez de Mongo/Mongoose?
2. O que app.get("/livros", ...) faz quando a barra pede esse caminho?
3. Onde vivem os títulos que a página lista?

Respostas comentadas

1. Para estudar rotas e HTML sem conta, cluster nem banco na nuvem. O recorte cabe num arquivo local com dados fictícios.
2. Lê o JSON, monta uma lista HTML e envia a página. É a resposta da rota /livros.
3. No arquivo dados.json da pasta do exemplo. Não estão na internet. Mudar o arquivo e reiniciar o Node muda a lista.