דפי HTML

חלק מהיחידה יסודות Express במסלול ה-Node.js של Coddy. שיעור 10 מתוך 23.

‏Recipe Box הופך עכשיו את תרגילי מחרוזות ה-HTML והבריחה לדף. צרו קישור אחד לכל מתכון. מאפיין href של קישור בוחר את היעד שלו, והטקסט שבין התגיות שלו הוא התווית שהקורא רואה.

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

פונקציית העזר מסופקת בקובץ html.js. החילו אותה על כל כותרת, תוך השארת תגיות הקישור שלכם כסימון. השתמשו ב-map כדי לבנות את הקישורים וב-join כדי לחבר אותם למחרוזת אחת. שליחת המערך ישירות בתוך מחרוזת תבנית תכניס פסיקים בין הקישורים. res.send שולחת את הדף המוכן לדפדפן.

<ul> מכילה את הרשימה ו-<li> עוטפת כל פריט. סימון שלא עבר בריחה עלול לשנות דף או להריץ סקריפט בדפדפן של מבקר; בצעו בריחה לכל כותרת, גם אם היא הגיעה מקובץ הנתונים שלכם.

אתגר

קל

בשלב הזה נפתח פרויקט Recipe Box שהוכן בקורס, ולא את קובצי הפרויקט שלך מ־קודי סטטוס (כולל server.js). העבודה הקודמת שלך נשארת בשיעור משלה. קרא את הקבצים שסופקו לפני עריכת server.js. העותק הזה כולל נתיבים של Recipe Box, קודי סטטוס ואת פונקציית העזר המשותפת html.js.

דף הבית הופך לדף אמיתי: רשימה של כל המתכונים, שכל אחד מהם הוא קישור לדף משלו.

ב־server.js, ייבא את פונקציית העזר escapeHtml שסופקה מתוך ./html.js.
שנה את הנתיב / כך שישלח דף HTML במקום טקסט הפתיחה. בדף יהיה קישור אחד לכל מתכון, שיוביל לדף של אותו מתכון ויציג את הכותרת שלו, כמו כאן עבור מתכון 2: <a href="/recipes/2">Pancakes</a>. רשימה תתאים לכך היטב: כל קישור בפריט <li>, וכולם בתוך <ul> אחד. אפשר להתחיל בכותרת, <h1>Recipe Box</h1>.
העבר כל כותרת דרך escapeHtml לפני שהיא נכנסת לדף. כך Fish & Chips יגיע לדף בתור Fish & Chips, והדפדפן יציג Fish & Chips.
בנה את הפריטים באמצעות map ושרשר אותם עם מחרוזת ריקה. אם מכניסים מערך כמו שהוא לתוך מחרוזת תבנית, מופיעים פסיקים בין הפריטים.

נסה זאת: לחץ על Run ושלח בקשה אל /. התגובה מוצגת כדף ובו ארבעה קישורים. לחץ על Fish & Chips: הדף של /recipes/4 נפתח ומציג את Fish & Chips.

נסו בעצמכם

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

const app = express();

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

// type('text') שולחת טקסט פשוט, כך שכל כותרת מופיעה בשורה נפרדת.
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');
});