HTML Sayfaları

Coddy'nin Node.js Journey'sinin Express Temelleri bölümünün bir parçası. Ders 10 / 23.

Recipe Box artık HTML dizgesi ve kaçış karakterleri alıştırmalarını bir sayfaya dönüştürüyor. Her tarif için bir bağlantı oluştur. Bağlantının href özelliği hedefini belirler, etiketleri arasındaki metin ise okuyucunun gördüğü etikettir.

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

Yardımcı işlev html.js dosyasında sağlanmıştır. Kendi bağlantı etiketlerini işaretleme olarak korurken her başlığa uygula. Bağlantıları oluşturmak için map kullan ve bunları tek bir dizgede birleştirmek için join kullan. Diziyi doğrudan bir şablon dizgesinin içine koymak, bağlantıların arasına virgül ekler. res.send tamamlanmış sayfayı tarayıcıya gönderir.

Listeyi <ul> içerir ve her öğeyi <li> sarar. Kaçış uygulanmamış işaretleme bir sayfayı değiştirebilir veya ziyaretçinin tarayıcısında bir betik çalıştırabilir; her başlığa, kendi veri dosyandan gelse bile, kaçış uygula.

Görev

Kolay

Bu adım, Status Codes bölümündeki kendi proje dosyalarınız ( server.js dâhil) yerine kurs için hazırlanmış Recipe Box projesini açar. Önceki çalışmalarınız kendi dersinde kalır. server.js dosyasını düzenlemeden önce sağlanan dosyaları okuyun. Bu kopyada Recipe Box rotaları, durum kodları ve paylaşılan html.js yardımcı dosyası bulunur.

Ana sayfa artık gerçek bir sayfaya dönüşür: her tarifin kendi sayfasına giden bir bağlantı olduğu tariflerin listesi.

server.js içinde, sağlanan escapeHtml yardımcısını ./html.js dosyasından içe aktarın.
/ rotasını, karşılama metni yerine bir HTML sayfası gönderecek şekilde değiştirin. Sayfada her tarif için, o tarifin sayfasına giden ve başlığını gösteren bir bağlantı bulunur; örneğin 2 numaralı tarif için: <a href="/recipes/2">Pancakes</a>. Bir liste kullanmak uygundur: her bağlantı bir <li> öğesinde, hepsi de tek bir <ul> içinde yer alır. Bir başlıkla başlayabilirsiniz: <h1>Recipe Box</h1>.
Her başlığı sayfaya eklemeden önce escapeHtml işlevinden geçirin. Böylece Fish & Chips sayfaya Fish & Chips olarak ulaşır; tarayıcıda Fish & Chips olarak görünür.
Öğeleri map ile oluşturun ve boş bir dizeyle birleştirin. Bir diziyi olduğu gibi şablon dizesine koyarsanız öğelerin arasına virgül eklenir.

Deneyin: “Run” düğmesine basın ve / isteğini gönderin. Yanıt, dört bağlantı içeren bir sayfa olarak görüntülenir. Fish & Chips'e tıklayın: /recipes/4 sayfası açılır ve Fish & Chips'i gösterir.

Kendin dene

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

const app = express();

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

// type('text') düz metin gönderir, böylece her başlık ayrı bir satırda görünür.
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');
});