Express والـ Routing: الـ params والـ query والترتيب والـ Router

01 / ملخص الدرس

app.get و req.params و req.query (كلهم strings)، وليه ترتيب الـ routes بيفرق (/users/me قبل /users/:id). صيغة Express 5 للـ paths: الأجزاء الاختيارية بـ {} والـ wildcard اللي ليه اسم. validation للـ params، و 404 في الآخر، و express.Router بـ prefix زي /api/v1، و router.param علشان تحمّل الحاجة مرة واحدة.

ضمن مسارباك إند Node.js للإنتاج — من تحت الصفر23 / 122

02 / شرح الدرس مكتوبًا

نص شرح المعلم والكود الذي كتبه ونتيجة تشغيله، بنفس ترتيب الدرس.

أهلًا بيك. في الدرس اللي فات عملنا الـ routing بإيدينا بـ regex و if. Express بتعمل ده بدالك: app dot get بياخد path و function. slash users: بيقرا req dot query، يعني اللي بعد علامة الاستفهام في الـ URL: role و limit. slash users slash colon id: الـ colon معناها: الجزء ده متغير، وقيمته في req dot params. و slash users slash me: المستخدم الحالي. نشغّل ونجرّب.

server.js

import express from "express";
import { users } from "./data.js";

const app = express();

app.get("/users", (req, res) => {
  const { role, limit = "10" } = req.query;
  let list = role ? users.filter((u) => u.role === role) : users;
  res.json(list.slice(0, Number(limit)));
});

app.get("/users/:id", (req, res) => {
  const user = users.find((u) => u.id === Number(req.params.id));
  if (!user) return res.status(404).json({ error: "مش موجود" });
  res.json(user);
});

app.get("/users/me", (req, res) => {
  res.json(users[0]);
});

app.listen(3000, () => console.log("http://localhost:3000"));

المخرجات

$ node server.js
http://localhost:3000

→ GET /users?role=student&limit=1
← 200 OK
[
  {
    "id": 2,
    "name": "عمر",
    "role": "student"
  }
]

→ GET /users/2
← 200 OK
{
  "id": 2,
  "name": "عمر",
  "role": "student"
}

→ GET /users/me
← 404 Not Found
{
  "error": "مش موجود"
}

الـ query اشتغلت: student واحد بس. slash users slash two: عمر. بس slash users slash me رجّعت four oh four! ليه؟ Express بيمشي على الـ routes بالترتيب، وأول route يطابق بياخد الـ request. و slash users slash colon id طابقت me، على إن الـ id قيمته me، و Number بتاعها NaN، فمالقاش حد. والـ route بتاع me عمره ما اتوصل له. القاعدة: الأخص الأول، فـ me قبل colon id. وكمان validation للـ id: لو مش رقم صحيح موجب، four hundred بدل ما ندوّر بـ NaN. وفي Express خمسة، فيه صيغة جديدة: جزء اختياري بين curly braces، و wildcard لازم يبقى ليه اسم بعد الـ star. وفي الآخر app dot use من غير path: أي حاجة ما طابقتش، four oh four بالـ JSON. نشغّل.

server.js

import express from "express";
import { users } from "./data.js";

const app = express();

// الأخص الأول: /users/me قبل /users/:id
app.get("/users/me", (req, res) => res.json(users[0]));

app.get("/users/:id", (req, res) => {
  const id = Number(req.params.id);
  if (!Number.isInteger(id) || id < 1) {
    return res.status(400).json({ error: "id لازم رقم صحيح موجب" });
  }
  const user = users.find((u) => u.id === id);
  if (!user) return res.status(404).json({ error: "مش موجود" });
  res.json(user);
});

// Express 5: جزء اختياري بالـ {} ، و wildcard ليه اسم
app.get("/files{/:format}", (req, res) => res.json({ format: req.params.format ?? "json" }));
app.get("/assets/*path", (req, res) => res.json({ path: req.params.path }));

app.use((req, res) => res.status(404).json({ error: `${req.method} ${req.path} مش موجود` }));

app.listen(3000, () => console.log("http://localhost:3000"));

المخرجات

$ node server.js
http://localhost:3000

→ GET /users/me
← 200 OK
{
  "id": 1,
  "name": "مُنى",
  "role": "admin"
}

→ GET /users/abc
← 400 Bad Request
{
  "error": "id لازم رقم صحيح موجب"
}

→ GET /users/9
← 404 Not Found
{
  "error": "مش موجود"
}

→ GET /files
← 200 OK
{
  "format": "json"
}

→ GET /files/csv
← 200 OK
{
  "format": "csv"
}

→ GET /assets/img/logo.png
← 200 OK
{
  "path": [
    "img",
    "logo.png"
  ]
}

→ GET /nope
← 404 Not Found
{
  "error": "GET /nope مش موجود"
}

me رجعت مُنى. abc: four hundred. تسعة: four oh four. files من غير format: الـ default json، وبـ csv: csv. الـ wildcard رجّع الـ path كـ array من الأجزاء: img و logo dot png. و nope: الـ four oh four بتاعنا. وخد بالك: كل حاجة في params و query strings دايمًا، حتى لو شكلها رقم، زي ما اتعلمنا في تحت الصفر. لما الـ routes تكتر، بنقسّمها على ملفات بـ express dot Router. الـ Router زي app صغير: ليه routes، وبيتركّب على prefix. courses dot js فيه coursesRouter. router dot param بيتنادي مرة واحدة لأي route فيه colon slug: بيدوّر على الكورس، ولو مش موجود four oh four، ولو موجود يحطه في req dot course ويكمّل بـ next. وفي server dot js: app dot use بـ slash api slash v one slash courses. نشغّل.

server.js

import express from "express";
import { coursesRouter } from "./courses.js";

const app = express();
app.use("/api/v1/courses", coursesRouter);

app.use((req, res) => res.status(404).json({ error: `${req.method} ${req.path} مش موجود` }));

app.listen(3000, () => console.log("http://localhost:3000"));

المخرجات

$ node server.js
http://localhost:3000

→ GET /api/v1/courses
← 200 OK
[
  {
    "slug": "node",
    "title": "Node.js"
  },
  {
    "slug": "sql",
    "title": "PostgreSQL"
  }
]

→ GET /api/v1/courses/node
← 200 OK
{
  "slug": "node",
  "title": "Node.js",
  "lessons": [
    "intro",
    "modules",
    "streams"
  ]
}

→ GET /api/v1/courses/php
← 404 Not Found
{
  "error": "الكورس مش موجود"
}

الـ list. node بكل تفاصيله. و php: four oh four من الـ param. والـ routes جُوّه الـ router مكتوبة من غير الـ prefix: slash و slash colon slug. فلو غيرت v one لـ v two، بتغيّر سطر واحد. التحدي: routes الدروس. route لكل دروس الكورس. route لدرس برقمه من واحد. validation: لو الرقم مش صحيح أو أقل من واحد four hundred، ولو أكبر من عدد الدروس four oh four. و format short ترجّع اسم الدرس بس كنص. وكله جُوّه courses dot js، وتستخدم req dot course. سبع حالات اختبار في الكومنت.

تمرين

في courses.js: GET /:slug/lessons و GET /:slug/lessons/:n (400 لو مش رقم من 1، 404 لو أكبر من العدد، ?format=short ← الاسم كنص).

الحل. lessons بترجّع req dot course. و colon n: نحوّل لرقم، ونتأكد إنه صحيح وموجب. والدرس من الـ array بـ n minus one، لأن الـ array بتبدأ من zero والمستخدم بيعدّ من واحد. ولو format short: res dot type text و send. نشغّل بالسبع حالات.

courses.js

import express from "express";
import { courses } from "./data.js";

export const coursesRouter = express.Router();

// router.param: بيتنادي مرة لأي route فيه :slug
coursesRouter.param("slug", (req, res, next, slug) => {
  const course = courses.find((c) => c.slug === slug);
  if (!course) return res.status(404).json({ error: "الكورس مش موجود" });
  req.course = course;
  next();
});

coursesRouter.get("/", (req, res) => res.json(courses.map(({ slug, title }) => ({ slug, title }))));
coursesRouter.get("/:slug", (req, res) => res.json(req.course));


coursesRouter.get("/:slug/lessons", (req, res) => {
  res.json({ course: req.course.slug, lessons: req.course.lessons });
});

coursesRouter.get("/:slug/lessons/:n", (req, res) => {
  const n = Number(req.params.n);
  if (!Number.isInteger(n) || n < 1) {
    return res.status(400).json({ error: "n لازم رقم من 1" });
  }
  const lesson = req.course.lessons[n - 1];
  if (!lesson) return res.status(404).json({ error: "الدرس مش موجود" });
  if (req.query.format === "short") return res.type("text").send(lesson);
  res.json({ course: req.course.slug, n, lesson });
});

المخرجات

$ node server.js
http://localhost:3000

→ GET /api/v1/courses/node/lessons
← 200 OK
{
  "course": "node",
  "lessons": [
    "intro",
    "modules",
    "streams"
  ]
}

→ GET /api/v1/courses/node/lessons/2
← 200 OK
{
  "course": "node",
  "n": 2,
  "lesson": "modules"
}

→ GET /api/v1/courses/node/lessons/0
← 400 Bad Request
{
  "error": "n لازم رقم من 1"
}

→ GET /api/v1/courses/node/lessons/abc
← 400 Bad Request
{
  "error": "n لازم رقم من 1"
}

→ GET /api/v1/courses/sql/lessons/9
← 404 Not Found
{
  "error": "الدرس مش موجود"
}

→ GET /api/v1/courses/php/lessons/1
← 404 Not Found
{
  "error": "الكورس مش موجود"
}

→ GET /api/v1/courses/node/lessons/3?format=short
← 200 OK
streams

السبعة زي الاختبار. الدرس الجاي: إيه اللي اتغيّر في Express خمسة، وإزاي تنقل مشروع قديم من أربعة من غير ما تكسره.

03 / دروس المسار (122)