Pengalihan

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

Halaman berubah, dan tautan lama di bookmark serta hasil pencarian seharusnya tetap mengarah ke suatu tempat.

app.get('/old-prices', (req, res) => {
    res.redirect(301, '/prices');
});

Redirect memberikan respons dengan status dan header Location yang mencantumkan URL baru, lalu browser langsung meminta URL tersebut. res.redirect menetapkan keduanya.

Status menunjukkan berapa lama perpindahan itu berlaku. 301 berarti berpindah secara permanen: browser dan mesin pencari mengingat alamat baru dan berhenti meminta alamat lama. 302, nilai default saat kamu tidak memberikan status, berarti hanya sementara, jadi browser dan mesin pencari tetap menggunakan URL lama.

Tantangan

Mudah

Halaman menu lama telah berpindah secara permanen ke halaman resep, dan bookmark lama seharusnya tetap berfungsi.

Di server.js, tambahkan rute untuk /menu yang mengalihkan ke /recipes dengan status 301, yang berarti berpindah secara permanen.
Tambahkan rute untuk /menu/:id yang mengalihkan ke halaman resep dengan id yang sama, juga dengan status 301: /menu/3 menuju ke /recipes/3.

Coba: Tekan Jalankan dan kirim /menu/3. Kamu akan melihat status 301 dan header Location bernilai /recipes/3. Kirim /menu: status 301 dengan Location bernilai /recipes. Kirim /menu/42: status 301 dengan Location bernilai /recipes/42. Pengalihan ini tidak memeriksa apakah resep 42 ada; /recipes/42 kemudian merespons dengan 404.

Coba sendiri

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

const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
    const items = recipes.map((r) => `<li><a href="/recipes/${r.id}">${escapeHtml(r.title)}</a></li>`);
    res.send(`<link rel="stylesheet" href="/style.css"><h1>Recipe Box</h1><ul>${items.join('')}</ul>`);
});

// type('text') mengirim teks biasa, sehingga setiap judul tampil 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');
});