Trang HTML

Thuộc phần Kiến thức cơ bản về Express trong hành trình Node.js của Coddy. Bài học 10 trên 23.

Recipe Box giờ biến các bài tập về chuỗi HTML và escape thành một trang. Tạo một liên kết cho mỗi công thức. Thuộc tính href của liên kết chọn đích đến, còn phần văn bản giữa các thẻ là nhãn mà người đọc nhìn thấy.

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

Hàm hỗ trợ này có sẵn trong html.js. Áp dụng nó cho từng tiêu đề, đồng thời giữ nguyên các thẻ liên kết do bạn tự tạo dưới dạng markup. Dùng map để tạo các liên kết rồi dùng join để ghép chúng thành một chuỗi. Nếu đưa trực tiếp mảng vào chuỗi mẫu, giữa các liên kết sẽ xuất hiện dấu phẩy. res.send gửi trang hoàn chỉnh đến trình duyệt.

<ul> chứa danh sách và <li> bao quanh từng mục. Markup chưa được escape có thể làm thay đổi trang hoặc chạy một tập lệnh trong trình duyệt của khách truy cập. Hãy escape từng tiêu đề, kể cả khi tiêu đề lấy từ tệp dữ liệu do chính bạn tạo.

Thử thách

Dễ

Bước này mở dự án Recipe Box đã được chuẩn bị sẵn trong khóa học, thay vì các tệp dự án từ Mã trạng thái (bao gồm server.js) của bạn. Phần bạn đã làm trước đó vẫn nằm trong bài học riêng. Đọc các tệp được cung cấp trước khi chỉnh sửa server.js. Bản sao này có các tuyến của Recipe Box, mã trạng thái và hàm hỗ trợ dùng chung html.js.

Trang chủ trở thành một trang thực sự: danh sách tất cả công thức, mỗi công thức đều có liên kết đến trang riêng.

Trong server.js, nhập hàm hỗ trợ escapeHtml được cung cấp từ ./html.js.
Thay đổi tuyến / để gửi một trang HTML thay vì lời chào mừng. Trang có một liên kết cho mỗi công thức, dẫn đến trang riêng của công thức đó và hiển thị tiêu đề, như ví dụ này cho công thức 2: <a href="/recipes/2">Pancakes</a>. Danh sách là lựa chọn phù hợp: đặt mỗi liên kết trong một mục <li>, tất cả nằm trong một <ul>. Bạn có thể bắt đầu bằng một tiêu đề, <h1>Recipe Box</h1>.
Truyền từng tiêu đề qua escapeHtml trước khi đưa vào trang. Khi đó, Fish & Chips sẽ được đưa vào trang dưới dạng Fish & Chips, và trình duyệt sẽ hiển thị thành Fish & Chips.
Dùng map để tạo các mục rồi nối chúng bằng chuỗi rỗng. Nếu bạn đưa mảng vào chuỗi mẫu như vậy, dấu phẩy sẽ xuất hiện giữa các mục.

Thử nhé: Nhấn Chạy rồi gửi /. Phản hồi được hiển thị dưới dạng một trang có bốn liên kết. Nhấp vào Fish & Chips: trang /recipes/4 sẽ mở ra và hiển thị Fish & Chips.

Tự làm thử

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

const app = express();

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

// type('text') gửi văn bản thuần túy, nên mỗi tiêu đề hiển thị trên một dòng riêng.
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');
});