Menu
CoddyTech

Etykiety

Część sekcji API REST ścieżki Node.js w Coddy. Lekcja 24 z 25.

Zadania otrzymują etykiety, takie jak office lub money, a aplikacja z tablicą chce mieć menu wszystkich etykiet wraz z liczbą zadań. Ten krok dodaje trzy elementy: regułę schematu dla listy, filtr i trasę zliczającą etykiety. Zliczanie do obiektu, pokazane poniżej, jest nowością.

// genres: z.array(z.string()).max(3).optional() w schemacie
const counts = {};
for (const book of books) {
    for (const genre of book.genres) {
        counts[genre] = (counts[genre] ?? 0) + 1;
    }
}
// { poetry: 2, drama: 1 }

Object.entries(counts) przekształca ten obiekt w pary [["poetry", 2], ...], gotowe do przekształcenia w listę. Takie podsumowanie jest osobnym zasobem z własnym adresem URL.

optional() pozwala pominąć to pole, a jednocześnie sprawdza jego wartość, gdy jest obecne. Przekształć pary wpisów w obiekty za pomocą Object.entries(counts).map(([genre, count]) => ({ genre, count })): nawiasy kwadratowe rozpakowują każdą parę; nawiasy okrągłe zwracają obiekt.

challenge icon

Wyzwanie

Łatwy

Aplikacja tablicy chce grupować zadania według etykiet, takich jak office lub money, i wyświetlać menu wszystkich etykiet wraz z liczbą zadań, które je mają. Dodaj etykiety do swojego API.

  1. W pliku routes/tasks.js dodaj opcjonalne pole labels do schematu Task: listę zawierającą maksymalnie 5 etykiet, z których każda jest ciągiem o długości od 1 do 20 znaków po usunięciu białych znaków z początku i końca. POST i PATCH również je obsługują, ponieważ ich schematy są tworzone na podstawie Task. Nieprawidłowa lista powoduje standardowy błąd 400 invalid_body. Nieprawidłowe listy to między innymi "labels": "office" (tekst, a nie lista), "labels": [""] i lista zawierająca sześć etykiet.
  2. Każde zapisane zadanie ma listę labels:
    • Jeśli POST lub PUT nie zawiera labels, zapisz []. PUT zastępuje całe zadanie, więc PUT bez etykiet je usuwa.
    • PATCH zmienia labels tylko wtedy, gdy je wysyła.
  3. W pliku store.js przypisz etykiety zadaniom początkowym: ["office"] dla zadań 1 i 2 oraz ["money"] dla zadania 3.
  4. Nadal w pliku routes/tasks.js dodaj filtr do trasy listy: GET /api/v1/tasks?label=office zwraca tylko te zadania, których lista labels zawiera dokładnie office. Działa on razem z pozostałymi filtrami i ze stronicowaniem, tak jak wcześniej.
  5. W pliku server.js dodaj GET /api/v1/labels obok montowania routera i zaimportuj tam tasks z store.js. Zwraca ona wszystkie używane etykiety wraz z liczbą zadań, które je mają, posortowane alfabetycznie według etykiety. Dla zadań początkowych wynik wygląda tak:
    [
      { "label": "money", "count": 1 },
      { "label": "office", "count": 2 }
    ]

Wypróbuj:

  • GET /api/v1/labels zwraca powyższą listę.
  • Wyślij POST z { "title": "Order chairs", "labels": ["office"] } do /api/v1/tasks: otrzymasz odpowiedź 201, a nowe zadanie będzie miało "labels": ["office"]. GET /api/v1/labels pokaże teraz dla office wartość "count": 3.
  • Wyślij POST z { "title": "Water the plants" }: nowe zadanie będzie miało "labels": [].
  • GET /api/v1/tasks?label=money zwraca tylko zadanie 3. GET /api/v1/tasks?label=nope zwraca "items": [] i "total": 0.
  • PUT /api/v1/tasks/2 z { "title": "Book the meeting room", "done": false } zwraca zadanie 2 z "labels": [].

Spróbuj swoich sił

import { Router } from 'express';
import { z } from 'zod';
import { config } from '../config.js';
import { sendError, sendInvalid } from '../errors.js';
import { nextId, tasks } from '../store.js';

const router = Router();

// Całe zadanie w postaci przesyłanej przez PUT. .strict() odrzuca pola, których nie wymienia.
const Task = z
    .object({
        title: z.string().trim().min(1).max(100),
        done: z.boolean(),
    })
    .strict();
const NewTask = Task.partial({ done: true });
const TaskChanges = Task.partial();
const SORT_FIELDS = ['title', 'createdAt'];

// True, jeśli inne zadanie ma już taki tytuł, niezależnie od wielkości liter.
const titleTaken = (title, exceptId) =>
    tasks.some((t) => t.id !== exceptId && t.title.toLowerCase() === title.toLowerCase());

router.get('/', (req, res) => {
    const { done, q, sort } = req.query;
    let list = tasks;
    if (done !== undefined) {
        if (done !== 'true' && done !== 'false') {
            return sendError(res, 400, 'invalid_query', 'done must be true or false');
        }
        list = list.filter((t) => t.done === (done === 'true'));
    }
    if (q !== undefined) {
        const words = String(q).toLowerCase();
        list = list.filter((t) => t.title.toLowerCase().includes(words));
    }
    if (sort !== undefined) {
        const field = String(sort).startsWith('-') ? String(sort).slice(1) : String(sort);
        if (!SORT_FIELDS.includes(field)) {
            return sendError(
                res,
                400,
                'invalid_query',
                'sort must be title or createdAt, with - in front to reverse',
            );
        }
        const direction = String(sort).startsWith('-') ? -1 : 1;
        list = list.toSorted((a, b) => a[field].localeCompare(b[field]) * direction);
    }
    const page = req.query.page === undefined ? 1 : Number(req.query.page);
    const limit = req.query.limit === undefined ? config.pageSize : Number(req.query.limit);
    if (!Number.isInteger(page) || page < 1) {
        return sendError(res, 400, 'invalid_query', 'page must be a whole number from 1');
    }
    if (!Number.isInteger(limit) || limit < 1 || limit > 50) {
        return sendError(res, 400, 'invalid_query', 'limit must be a whole number from 1 to 50');
    }
    const start = (page - 1) * limit;
    res.json({
        items: list.slice(start, start + limit),
        page,
        total: list.length,
        pages: Math.ceil(list.length / limit),
    });
});

router.get('/:id', (req, res) => {
    const task = tasks.find((t) => t.id === Number(req.params.id));
    if (!task) {
        return sendError(res, 404, 'not_found', 'Task not found');
    }
    res.json(task);
});

router.post('/', (req, res) => {
    const result = NewTask.safeParse(req.body);
    if (!result.success) {
        return sendInvalid(res, result.error);
    }
    const { title, done = false } = result.data;
    if (titleTaken(title)) {
        return sendError(res, 409, 'conflict', 'A task with this title already exists');
    }
    const task = { id: nextId(), title, done, createdAt: new Date().toISOString() };
    tasks.push(task);
    res.status(201).location(`/api/v1/tasks/${task.id}`).json(task);
});

router.patch('/:id', (req, res) => {
    const task = tasks.find((t) => t.id === Number(req.params.id));
    if (!task) {
        return sendError(res, 404, 'not_found', 'Task not found');
    }
    const result = TaskChanges.safeParse(req.body);
    if (!result.success) {
        return sendInvalid(res, result.error);
    }
    if (result.data.title !== undefined && titleTaken(result.data.title, task.id)) {
        return sendError(res, 409, 'conflict', 'A task with this title already exists');
    }
    Object.assign(task, result.data);
    res.json(task);
});

router.put('/:id', (req, res) => {
    const index = tasks.findIndex((t) => t.id === Number(req.params.id));
    if (index === -1) {
        return sendError(res, 404, 'not_found', 'Task not found');
    }
    const result = Task.safeParse(req.body);
    if (!result.success) {
        return sendInvalid(res, result.error);
    }
    const { id, createdAt } = tasks[index];
    if (titleTaken(result.data.title, id)) {
        return sendError(res, 409, 'conflict', 'A task with this title already exists');
    }
    tasks[index] = { id, ...result.data, createdAt };
    res.json(tasks[index]);
});

router.delete('/:id', (req, res) => {
    const index = tasks.findIndex((t) => t.id === Number(req.params.id));
    if (index === -1) {
        return sendError(res, 404, 'not_found', 'Task not found');
    }
    tasks.splice(index, 1);
    res.status(204).end();
});

export default router;

Wszystkie lekcje w sekcji API REST

Poćwicz samodzielnie: Edytor online Express