Páginas HTML

Parte da seção Fundamentos de Express do Journey de Node.js da Coddy. Lição 10 de 23.

Agora, o Recipe Box transforma os exercícios de strings HTML e escape em uma página. Crie um link para cada receita. O href de um link escolhe seu destino, e o texto entre suas tags é o rótulo que o leitor vê.

const link = `<a href="/books/${book.id}">${escapeHtml(book.title)}</a>`;

O auxiliar é fornecido em html.js. Aplique-o a cada título, mantendo suas próprias tags de link como marcação. Use map para criar os links e join para uni-los em uma única string. Enviar o array diretamente dentro de uma string de template colocaria vírgulas entre os links. res.send envia a página concluída para o navegador.

<ul> contém a lista e <li> envolve cada item. Marcação sem escape pode alterar uma página ou executar um script no navegador de um visitante; aplique escape a cada título, mesmo quando ele vier do seu próprio arquivo de dados.

Desafio

Fácil

Esta etapa abre o projeto Recipe Box preparado para o curso, em vez dos arquivos do seu projeto de Códigos de status (incluindo server.js). Seu trabalho anterior continua na própria aula. Leia os arquivos fornecidos antes de editar server.js. Esta cópia contém rotas do Recipe Box, códigos de status e o auxiliar compartilhado html.js.

A página inicial se torna uma página de verdade: uma lista de todas as receitas, cada uma com um link para sua própria página.

Em server.js, importe o auxiliar escapeHtml fornecido em ./html.js.
Altere a rota / para que ela envie uma página HTML em vez do texto de boas-vindas. A página contém um link para cada receita, que leva à página dessa receita e mostra seu título, como neste exemplo para a receita 2: <a href="/recipes/2">Pancakes</a>. Uma lista funciona bem: cada link em um item <li>, todos dentro de um <ul>. Você pode começar com um título, <h1>Recipe Box</h1>.
Passe todos os títulos por escapeHtml antes de incluí-los na página. Assim, Fish & Chips chega à página como Fish & Chips, que o navegador exibe como Fish & Chips.
Crie os itens com map e junte-os com uma string vazia. Se você inserir um array em uma string de modelo tal como está, vírgulas aparecerão entre os itens.

Experimente: Pressione Executar e envie /. A resposta é exibida como uma página com quatro links. Clique em Fish & Chips: a página de /recipes/4 abre e mostra Fish & Chips.

Experimente você mesmo

import express from 'express';
import { recipes } from './data.js';

const app = express();

app.get('/', (req, res) => {
    res.send('Welcome to Recipe Box');
});

// type('text') envia texto simples, então cada título aparece em uma linha separada.
app.get('/recipes', (req, res) => {
    const { tag } = req.query;
    const list = tag ? recipes.filter((recipe) => recipe.tags.includes(tag)) : recipes;
    res.type('text').send(list.map((recipe) => recipe.title).join('\n'));
});

app.get('/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).send('No such recipe');
        return;
    }
    res.send(recipe.title);
});

app.get('/api/recipes', (req, res) => {
    res.json(recipes);
});

app.get('/api/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).json({ error: 'No such recipe' });
        return;
    }
    res.json(recipe);
});

app.get('/about', (req, res) => {
    res.send('Recipe Box collects family recipes.');
});

app.listen(3000, () => {
    console.log('Recipe Box is running on port 3000');
});