HTML-Seiten

Teil des Abschnitts Express-Grundlagen der Node.js-Journey von Coddy. Lektion 10 von 23.

Recipe Box verwandelt die Übungen zu HTML-Zeichenfolgen und zum Escaping jetzt in eine Seite. Erstelle einen Link pro Rezept. Das href-Attribut eines Links bestimmt sein Ziel, und der Text zwischen den Tags ist die Beschriftung, die der Leser sieht.

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

Der Helper wird in html.js bereitgestellt. Wende ihn auf jeden Titel an und verwende deine eigenen Link-Tags weiterhin als Markup. Verwende map, um die Links zu erstellen, und füge sie mit join zu einer Zeichenfolge zusammen. Wenn du das Array direkt in eine Template-Zeichenfolge einfügst, stehen zwischen den Links Kommas. res.send sendet die fertige Seite an den Browser.

<ul> enthält die Liste, und <li> umschließt jeden Eintrag. Nicht maskiertes Markup kann eine Seite verändern oder ein Skript im Browser eines Besuchers ausführen; maskiere jeden Titel, auch wenn er aus deiner eigenen Datendatei stammt.

Aufgabe

Einfach

Dieser Schritt öffnet das vorbereitete Recipe Box-Projekt des Kurses statt deiner Projektdateien aus Status Codes (einschließlich server.js). Deine bisherige Arbeit bleibt in ihrer eigenen Lektion. Lies die bereitgestellten Dateien, bevor du server.js bearbeitest. Diese Kopie enthält Recipe Box-Routen, Statuscodes und den gemeinsam genutzten html.js-Helfer.

Die Startseite wird zu einer echten Seite: eine Liste aller Rezepte, jedes davon als Link zu seiner eigenen Seite.

Importiere in server.js den bereitgestellten Helfer escapeHtml aus ./html.js.
Ändere die Route /, sodass sie eine HTML-Seite statt des Begrüßungstextes sendet. Die Seite enthält einen Link pro Rezept, der zur Seite des jeweiligen Rezepts führt und dessen Titel anzeigt, wie hier für Rezept 2: <a href="/recipes/2">Pancakes</a>. Eine Liste eignet sich gut: jeder Link in einem <li>-Element, alle in einem <ul>. Du kannst mit einer Überschrift beginnen, <h1>Recipe Box</h1>.
Gib jeden Titel durch escapeHtml, bevor er in die Seite eingefügt wird. Fish & Chips gelangt dann als Fish & Chips auf die Seite, was der Browser als Fish & Chips anzeigt.
Erstelle die Elemente mit map und verbinde sie mit einer leeren Zeichenfolge. Wenn du ein Array unverändert in einen Template-String einfügst, erscheinen zwischen den Elementen Kommas.

Probiere es aus: Drücke auf „Spielen“ und rufe / auf. Die Antwort wird als Seite mit vier Links dargestellt. Klicke auf Fish & Chips: Die Seite für /recipes/4 wird geöffnet und zeigt Fish & Chips an.

Probier es selbst

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

const app = express();

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

// type('text') sendet reinen Text, sodass jeder Titel in einer eigenen Zeile erscheint.
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');
});