Páginas HTML

Parte de la sección Conceptos básicos de Express del Journey de Node.js de Coddy. Lección 10 de 23.

Recipe Box ahora convierte los ejercicios sobre cadenas HTML y escape en una página. Crea un enlace por receta. El atributo href de un enlace determina su destino, y el texto entre sus etiquetas es la etiqueta que ve el lector.

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

El helper se proporciona en html.js. Aplícalo a cada título y conserva tus propias etiquetas de enlace como marcado. Usa map para crear los enlaces y join para unirlos en una sola cadena. Si envías el array directamente dentro de una cadena de plantilla, aparecerán comas entre los enlaces. res.send envía la página completa al navegador.

<ul> contiene la lista y <li> envuelve cada elemento. El marcado sin escapar puede modificar una página o ejecutar un script en el navegador de quien la visita; escapa cada título, incluso si proviene de tu propio archivo de datos.

Desafío

Fácil

Este paso abre el proyecto Recipe Box preparado para el curso, en lugar de los archivos de tu proyecto de Códigos de estado (incluido server.js). Tu trabajo anterior permanece en su propia lección. Lee los archivos proporcionados antes de editar server.js. Esta copia contiene rutas de Recipe Box, códigos de estado y el auxiliar compartido html.js.

La página de inicio se convierte en una página real: una lista de todas las recetas, cada una con un enlace a su propia página.

En server.js, importa el auxiliar escapeHtml proporcionado desde ./html.js.
Cambia la ruta / para que envíe una página HTML en lugar del texto de bienvenida. La página incluye un enlace por receta, que lleva a la página de esa receta y muestra su título, como aquí para la receta 2: <a href="/recipes/2">Pancakes</a>. Una lista funciona bien: cada enlace dentro de un elemento <li>, todos dentro de un <ul>. Puedes empezar con un encabezado, <h1>Recipe Box</h1>.
Pasa cada título por escapeHtml antes de que se incluya en la página. Fish & Chips llega entonces a la página como Fish & Chips, que el navegador muestra como Fish & Chips.
Crea los elementos con map y únelos con una cadena vacía. Si colocas un arreglo en una cadena de plantilla tal cual, aparecerán comas entre los elementos.

Pruébalo: Pulsa Ejecutar y envía /. La respuesta se muestra como una página con cuatro enlaces. Haz clic en Fish & Chips: se abre la página de /recipes/4 y muestra Fish & Chips.

Pruébalo tú mismo

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

const app = express();

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

// type('text') envía texto sin formato, por lo que cada título aparece en su propia línea.
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');
});