Pages HTML

Fait partie de la section Les bases d’Express du Journey Node.js de Coddy. Leçon 10 sur 23.

Recipe Box transforme maintenant les exercices sur les chaînes HTML et leur échappement en une page. Crée un lien par recette. Le href d’un lien détermine sa destination, et le texte entre ses balises est le libellé que le lecteur voit.

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

L’assistant est fourni dans html.js. Applique-le à chaque titre, tout en gardant tes propres balises de lien comme balisage. Utilise map pour construire les liens et join pour les réunir en une seule chaîne. Placer directement le tableau dans une chaîne template insérerait des virgules entre les liens. res.send transmet la page terminée au navigateur.

<ul> contient la liste et <li> encadre chaque élément. Un balisage non échappé peut modifier une page ou exécuter un script dans le navigateur d’un visiteur ; échappe chaque titre, même s’il provient de ton propre fichier de données.

Défi

Facile

Cette étape ouvre le projet Recipe Box préparé pour le cours, et non les fichiers de votre projet de Codes d’état (y compris server.js). Votre travail précédent reste dans sa propre leçon. Lisez les fichiers fournis avant de modifier server.js. Cette copie contient les routes de Recipe Box, les codes d’état et l’utilitaire partagé html.js.

La page d’accueil devient une vraie page : une liste de toutes les recettes, chacune étant un lien vers sa propre page.

Dans server.js, importez l’utilitaire fourni escapeHtml depuis ./html.js.
Modifiez la route / pour qu’elle envoie une page HTML au lieu du texte de bienvenue. La page contient un lien par recette, qui mène à la page de cette recette et affiche son titre, comme ceci pour la recette 2 : <a href="/recipes/2">Pancakes</a>. Une liste convient bien : chaque lien dans un élément <li>, le tout à l’intérieur d’un seul <ul>. Vous pouvez commencer par un titre, <h1>Recipe Box</h1>.
Faites passer chaque titre par escapeHtml avant de l’insérer dans la page. Fish & Chips arrive alors dans la page sous la forme Fish & Chips, que le navigateur affiche comme Fish & Chips.
Construisez les éléments avec map et reliez-les avec une chaîne vide. Si vous insérez un tableau tel quel dans une chaîne de modèle, des virgules apparaissent entre les éléments.

Essayez : Appuyez sur Run et envoyez /. La réponse s’affiche sous forme de page avec quatre liens. Cliquez sur Fish & Chips : la page de /recipes/4 s’ouvre et affiche Fish & Chips.

Essayez vous-même

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

const app = express();

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

// type('text') envoie du texte brut, donc chaque titre s’affiche sur sa propre ligne.
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');
});