Pagine HTML

Fa parte della sezione Fondamenti di Express del percorso Node.js di Coddy. Lezione 10 di 23.

Recipe Box ora trasforma gli esercizi sulle stringhe HTML e sull’escape in una pagina. Crea un link per ogni ricetta. L’href di un link sceglie la sua destinazione e il testo tra i tag è l’etichetta che il lettore vede.

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

L’helper è fornito in html.js. Applicalo a ogni titolo, mantenendo i tuoi tag di link come markup. Usa map per creare i link e join per unirli in un’unica stringa. Inserendo direttamente l’array in una stringa modello, i link sarebbero separati da virgole. res.send invia la pagina completata al browser.

<ul> contiene l’elenco e <li> racchiude ogni elemento. Il markup non sottoposto a escape può modificare una pagina o eseguire uno script nel browser di un visitatore; esegui l’escape di ogni titolo, anche quando proviene da un tuo file di dati.

Sfida

Facile

Questo passaggio apre il progetto Recipe Box preparato per il corso, invece dei file del tuo progetto di Status Codes (incluso server.js). Il lavoro precedente resta nella sua lezione. Leggi i file forniti prima di modificare server.js. Questa copia contiene le route di Recipe Box, i codici di stato e l’helper condiviso html.js.

La home page diventa una pagina vera e propria: un elenco di tutte le ricette, ciascuna collegata alla propria pagina.

In server.js, importa l’helper escapeHtml fornito da ./html.js.
Modifica la route / in modo che invii una pagina HTML invece del testo di benvenuto. La pagina contiene un link per ogni ricetta, che porta alla pagina della ricetta e ne mostra il titolo, come in questo esempio per la ricetta 2: <a href="/recipes/2">Pancakes</a>. Un elenco è una buona soluzione: ogni link in un elemento <li>, tutti all’interno di un unico <ul>. Puoi iniziare con un’intestazione, <h1>Recipe Box</h1>.
Passa ogni titolo a escapeHtml prima di inserirlo nella pagina. Fish & Chips raggiunge così la pagina come Fish & Chips, che il browser visualizza come Fish & Chips.
Crea gli elementi con map e uniscili con una stringa vuota. Se inserisci un array così com’è in una stringa template, tra gli elementi appariranno delle virgole.

Prova: premi «Esegui» e invia /. La risposta viene visualizzata come una pagina con quattro link. Fai clic su Fish & Chips: si apre la pagina di /recipes/4 e mostra Fish & Chips.

Provalo tu

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

const app = express();

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

// type('text') invia testo semplice, quindi ogni titolo appare su una riga a sé.
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');
});