Halaman HTML

Termasuk bagian Dasar-Dasar Express dalam perjalanan Node.js di Coddy. Pelajaran 10 dari 23.

Recipe Box kini mengubah latihan string HTML dan escaping menjadi sebuah halaman. Buat satu tautan untuk setiap resep. href pada tautan menentukan tujuannya, dan teks di antara tag-nya adalah label yang dilihat pembaca.

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

Helper tersedia di html.js. Terapkan pada setiap judul, sambil tetap menggunakan tag tautanmu sendiri sebagai markup. Gunakan map untuk membuat tautan dan join untuk menggabungkannya menjadi satu string. Mengirim array secara langsung di dalam template string akan menyisipkan koma di antara tautan. res.send mengirim halaman yang sudah selesai ke browser.

<ul> menampung list dan <li> membungkus setiap item. Markup yang tidak di-escape dapat mengubah halaman atau menjalankan skrip di browser pengunjung. Escape setiap judul, bahkan jika judul itu berasal dari file datamu sendiri.

Tantangan

Mudah

Langkah ini membuka proyek Recipe Box yang telah disiapkan untuk kursus, bukan file proyekmu dari Status Codes (termasuk server.js). Pekerjaanmu sebelumnya tetap berada di pelajarannya sendiri. Baca file yang disediakan sebelum mengedit server.js. Salinan ini berisi rute Recipe Box, kode status, dan helper html.js bersama.

Halaman beranda menjadi halaman sungguhan: daftar semua resep, masing-masing berupa tautan ke halamannya sendiri.

Di server.js, impor helper escapeHtml yang disediakan dari ./html.js.
Ubah rute / agar mengirim halaman HTML, bukan teks sambutan. Halaman ini memuat satu tautan untuk setiap resep, yang menuju ke halaman resep tersebut dan menampilkan judulnya, seperti ini untuk resep 2: <a href="/recipes/2">Pancakes</a>. Daftar cocok digunakan: setiap tautan berada dalam item <li>, semuanya di dalam satu <ul>. Kamu bisa memulai dengan judul, <h1>Recipe Box</h1>.
Teruskan setiap judul ke escapeHtml sebelum memasukkannya ke halaman. Fish & Chips kemudian masuk ke halaman sebagai Fish & Chips, yang ditampilkan browser sebagai Fish & Chips.
Buat item menggunakan map dan gabungkan dengan string kosong. Jika kamu memasukkan array ke dalam string templat apa adanya, koma akan muncul di antara item.

Coba: Tekan Jalankan dan kirim permintaan ke /. Respons ditampilkan sebagai halaman dengan empat tautan. Klik Fish & Chips: halaman untuk /recipes/4 terbuka dan menampilkan Fish & Chips.

Coba sendiri

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

const app = express();

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

// type('text') mengirim teks biasa, sehingga setiap judul muncul di baris tersendiri.
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');
});