Strony HTML

Część sekcji Podstawy Express ścieżki Node.js w Coddy. Lekcja 10 z 23.

Recipe Box zamienia teraz ćwiczenia z ciągami HTML i ich escapowaniem w stronę. Utwórz jeden link dla każdego przepisu. Atrybut href linku określa jego miejsce docelowe, a tekst między jego znacznikami to etykieta widoczna dla czytelnika.

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

Funkcja pomocnicza jest dostępna w html.js. Zastosuj ją do każdego tytułu, zachowując własne znaczniki linków jako znaczniki. Użyj map, aby utworzyć linki, a następnie połącz je w jeden ciąg. Wysłanie tablicy bezpośrednio wewnątrz ciągu szablonowego umieściłoby przecinki między linkami. res.send przekazuje gotową stronę do przeglądarki.

<ul> zawiera listę, a <li> obejmuje każdy element. Niezescapowane znaczniki mogą zmienić stronę lub uruchomić skrypt w przeglądarce osoby odwiedzającej stronę; escapuj każdy tytuł, nawet jeśli pochodzi z twojego własnego pliku danych.

Wyzwanie

Łatwy

Ten krok otwiera przygotowany projekt Recipe Box z kursu, a nie pliki Twojego projektu z lekcji Kody statusu (w tym server.js). Twoja wcześniejsza praca pozostaje w swojej lekcji. Przed edycją server.js przeczytaj dostarczone pliki. Ta kopia zawiera trasy Recipe Box, kody statusu i współdzielony pomocniczy plik html.js.

Strona główna staje się prawdziwą stroną: listą wszystkich przepisów, z których każdy jest linkiem do własnej strony.

W server.js zaimportuj dostarczoną funkcję pomocniczą escapeHtml z ./html.js.
Zmień trasę /, aby wysyłała stronę HTML zamiast tekstu powitalnego. Strona zawiera jeden link do strony każdego przepisu, wyświetlający jego tytuł, tak jak w przypadku przepisu 2: <a href="/recipes/2">Pancakes</a>. Dobrze sprawdzi się lista: każdy link w elemencie <li>, wszystkie wewnątrz jednego <ul>. Możesz zacząć od nagłówka: <h1>Recipe Box</h1>.
Przed umieszczeniem każdego tytułu na stronie przekaż go przez escapeHtml. Dzięki temu Fish & Chips trafia na stronę jako Fish & Chips, co przeglądarka wyświetla jako Fish & Chips.
Zbuduj elementy za pomocą map i połącz je pustym ciągiem. Jeśli wstawisz tablicę do ciągu szablonowego bez zmian, między elementami pojawią się przecinki.

Wypróbuj: Naciśnij „Uruchom” i wyślij żądanie do /. Odpowiedź zostanie wyświetlona jako strona z czterema linkami. Kliknij Fish & Chips: otworzy się strona /recipes/4 i wyświetli Fish & Chips.

Spróbuj swoich sił

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

const app = express();

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

// type('text') wysyła zwykły tekst, więc każdy tytuł pojawia się w osobnym wierszu.
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');
});