تقديم المحتوى

قدِّم الملفات الثابتة، وتعامل مع نماذج HTML، واقبل عمليات رفع بسيطة باستخدام multer.

9 دقيقة · 3 أسئلة

لا تُرجِع الواجهة البرمجية JSON فقط. صفحات HTML، والصور، وأوراق الأنماط، وبناء الواجهة الأمامية: يقدّم Express كل ذلك ببرمجية وسيطة واحدة، express.static. ويصبح كل ملف في المجلد قابلًا للوصول عند الرابط المطابق: فيستجيب public/logo.png على /logo.png.

import express from "express";

const app = express();

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

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

لننتقل إلى النماذج. يرسل نموذج HTML الكلاسيكي حقوله بالصيغة application/x-www-form-urlencoded. وتفكّ البرمجية الوسيطة express.urlencoded ترميزها وتملأ req.body، تمامًا كما تفعل express.json مع JSON. ضع في public/ صفحة تحتوي على نموذج بـ method مضبوطة على POST وaction مضبوطة على /contact، ثم تعامل مع الإرسال:

app.use(express.urlencoded({ extended: true }));

app.post("/contact", (req, res) => {
  const { name, message } = req.body;
  if (!name || !message) {
    return res.status(400).send("Required fields");
  }
  res.send("Thank you " + name + ", message received.");
});

لإرسال ملف، يجب أن يصرّح النموذج بـ enctype بالقيمة multipart/form-data وأن يحتوي على حقل input من النوع file، مسمّى مثلًا avatar. ولا يستطيع Express فكّ ترميز هذه الصيغة بمفرده: البرمجية الوسيطة المرجعية هي multer.

npm install multer

import multer from "multer";

const upload = multer({
  dest: "uploads/",
  limits: { fileSize: 2 * 1024 * 1024 }
});

app.post(
  "/avatar",
  upload.single("avatar"),
  (req, res) => {
    if (!req.file) {
      return res.status(400).json({
        error: "No file received"
      });
    }
    res.status(201).json({
      name: req.file.filename,
      size: req.file.size
    });
  }
);

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ماذا تفعل express.static عند تطبيقها على مجلد public؟
   • تقدّم كل ملف في المجلد عند الرابط المطابق
   • تترجم ملفات المجلد عند بدء التشغيل
   • تحمي المجلد بكلمة مرور
2. أيّ برمجية وسيطة تملأ req.body لنموذج HTML كلاسيكي؟
   • express.json()
   • express.urlencoded()
   • express.static()
3. أيّ سمة يجب أن يحملها النموذج لإرسال ملف؟
   • method مضبوطة على GET
   • enctype مضبوطة على multipart/form-data
   • target مضبوطة على _blank