برنامج تعليمي حول إطار عمل Node.js Express.js

من قبل: فريق التحرير فريق التحرير
Hours تحديث

⚡ ملخص ذكي

Express.js هو إطار عمل بسيط لتطبيقات الويب Node.js يضيف التوجيه والبرمجيات الوسيطة وعرض القوالب إلى وحدة HTTP الأساسية، بحيث تصل التطبيقات أحادية الصفحة ومتعددة الصفحات والتطبيقات الهجينة إلى خادم يعمل في عدد قليل جدًا من الأسطر.

  • 🔘 دور MEAN stack: يوفر Express.js طبقة الواجهة الخلفية بجانب MongoDBAngularJS و Node.js.
  • ☑️ تركيب: يقوم الأمر npm install express بسحب الإطار من مدير حزم Node.
  • ✅ التوجيه: تقوم الدالة app.METHOD(PATH, HANDLER) بتعيين كل URL وفعل HTTP إلى معالج واحد.
  • 🧪 القوالب: تقوم الدالة app.set('view engine') بالإضافة إلى res.render بتغذية البيانات في ملف العرض.
  • 🛠️ الشكل الحديث: يقبل Express 5 معالجات تُرجع وعودًا ويقوم بتجميع express.json().
  • 📊 ملاحظة حول الإصدار: تمت إعادة تسمية Jade إلى Pug، وNode.js 24 هو خط Active LTS.
اقرأ المزيد

برنامج تعليمي حول إطار عمل Node.js Express.js

سنتناول في هذا الدرس إطار عمل Express. تم تصميم هذا الإطار ليكون بمثابة إطار عمل بسيط ومرن لتطبيقات الويب باستخدام Node.js، حيث يوفر مجموعة قوية من الميزات لبناء تطبيقات الويب أحادية الصفحة ومتعددة الصفحات والهجينة.

ما هو Express.js؟

Express.js هو إطار عمل لخادم تطبيقات الويب Node.js، وهو مصمم خصيصًا لبناء تطبيقات الويب أحادية الصفحة ومتعددة الصفحات والهجينة.

أصبح إطار عمل الخادم القياسي لـ Node.js. يُعد Express الجزء الخلفي من شيء يُعرف باسم حزمة MEAN.

توجيه طبقات Express والبرمجيات الوسيطة فوق بروتوكول HTTP الأساسي في Node.js، تيارات وواجهات برمجة تطبيقات الأحداث.

MEAN هو مجاني ومفتوح المصدر Javaسيناريو مجموعة برمجيات لبناء مواقع الويب الديناميكية وتطبيقات الويب والتي تحتوي على المكونات التالية؛

1) MongoDB — قاعدة بيانات NoSQL القياسية

2) Express.js — إطار عمل تطبيقات الويب الافتراضي

3) AngularJS - ال Javaإطار عمل MVC النصي المستخدم لتطبيقات الويب

4) Node.js — إطار عمل يُستخدم لتطبيقات الخادم والشبكات القابلة للتوسع.

يجعل إطار عمل Express.js من السهل جدًا تطوير تطبيق يمكن استخدامه للتعامل مع أنواع متعددة من الطلبات مثل طلبات GET وPUT وPOST وDELETE.

تثبيت واستخدام Express

يتم تثبيت Express عبر Node Package Manager. ويمكن القيام بذلك عن طريق تنفيذ السطر التالي في سطر الأوامر

تثبيت npm السريع

يطلب الأمر أعلاه من مدير حزم Node تنزيل حزمة express المطلوبة نماذج وقم بتثبيتها وفقًا لذلك.

ملاحظة حول الإصدار: يقوم npm الآن بتثبيت Express 5.2؛ بينما لا تزال العديد من المشاريع تستخدم Express 4. قم بتشغيل الأمثلة أدناه على كليهما إصدار Node.js المدعوم.

دعونا نستخدم إطار عمل Express المثبت حديثًا ونقوم بإنشاء تطبيق "Hello World" بسيط.

سيقوم تطبيقنا بإنشاء تطبيق بسيط وحدة الخادم والذي سيستمع على رقم المنفذ 3000. في مثالنا، إذا تم تقديم طلب من خلال المتصفح على رقم المنفذ هذا، فسيرسل تطبيق الخادم استجابة "Hello World" إلى العميل.

كود خادم Express Hello World المشروح يستمع على المنفذ 3000

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

Code التفسير:

  1. في السطر الأول من التعليمات البرمجية، نستخدم الدالة require لتضمين "الوحدة النمطية السريعة".
  2. قبل أن نتمكن من البدء في استخدام الوحدة Express، نحتاج إلى إنشاء كائن منها.
  3. هنا نقوم بإنشاء دالة رد نداء. سيتم استدعاء هذه الدالة كلما تصفح أي شخص إلى الصفحة الرئيسية لتطبيقنا على الويب، وهي http://localhost:3000. ستُستخدم دالة رد النداء لإرسال السلسلة النصية "Hello World" إلى صفحة الويب.
  4. في وظيفة رد الاتصال، نقوم بإرسال السلسلة "Hello World" مرة أخرى إلى العميل. يتم استخدام المعلمة "res" لإرسال المحتوى مرة أخرى إلى صفحة الويب. معلمة "res" هذه هي شيء توفره وحدة "الطلب" لتمكين الشخص من إرسال المحتوى مرة أخرى إلى صفحة الويب.
  5. ثم نستخدم وظيفة الاستماع لجعل تطبيق الخادم الخاص بنا يستمع إلى طلبات العميل على المنفذ رقم 3000. يمكنك تحديد أي منفذ متاح هنا.

إذا تم تنفيذ الأمر بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود الخاص بك في المتصفح.

الإخراج:

يعرض المتصفح رسالة "Hello World" التي أعادها خادم Express على المنفذ 3000

من الإخراج،

  • يمكنك أن ترى ذلك بوضوح إذا تصفحت إلى URL عند الاتصال بـ localhost على المنفذ 3000، سترى السلسلة 'Hello World' معروضة على الصفحة.
  • لأننا حددنا في الكود الخاص بنا تحديدًا أن يستمع الخادم على المنفذ رقم 3000، فإننا قادرون على عرض المخرجات عند تصفح هذا الموقع. URL.
لا تفوت:

ما هي الطرق؟

إن مسار الجذر الواحد ليس سوى نقطة البداية.

يحدد التوجيه الطريقة التي يستجيب بها التطبيق لطلب العميل إلى نقطة نهاية معينة.

على سبيل المثال، يمكن للعميل إرسال طلب HTTP من نوع GET أو POST أو PUT أو DELETE لأغراض مختلفة URL مثل تلك الموضحة أدناه؛

http://localhost:3000/Books
http://localhost:3000/Students

في المثال أعلاه ،

  • إذا تم تقديم طلب GET لأول URLإذاً، من الأفضل أن تكون الإجابة عبارة عن قائمة بالكتب.
  • إذا تم تقديم طلب GET للثانية URLإذاً، من الأفضل أن تكون الاستجابة عبارة عن قائمة بالطلاب.
  • بناءً على ذلك URL عند الوصول إلى هذا الجزء، يتم استدعاء وظيفة مختلفة على خادم الويب، وبناءً على ذلك، يتم إرسال الاستجابة إلى العميل. هذا هو مفهوم التوجيه.

يمكن أن يحتوي كل مسار على وظيفة معالج واحدة أو أكثر، والتي يتم تنفيذها عند مطابقة المسار.

يتم عرض بناء الجملة العام للمسار أدناه

app.METHOD(PATH, HANDLER)

حيث،

1) التطبيق هو مثيل للوحدة النمطية السريعة

2) الطريقة هي طريقة طلب HTTP (GET أو POST أو PUT أو DELETE)

3) PATH هو مسار على الخادم.

4) المعالج هي الوظيفة التي يتم تنفيذها عند مطابقة المسار.

اتصل أطلب الهدف
app.get(PATH, HANDLER) للحصول على عرض
app.post(PATH, HANDLER) سأعين إنشاء
app.put(PATH, HANDLER) ضع استبدل
app.delete(PATH, HANDLER) حذف حذف
app.route(PATH) بالسلاسل مديرو المجموعات
app.use(HANDLER) اي برنامج وسيط التثبيت

⚠️ اكسبرس 5 ملاحظة: هذه التوقيعات لم تتغير، ولكن app.del() أصبحت app.delete()، و res.sendfile() أصبحت res.sendFile()، وأصبحت الأحرف البديلة الآن بحاجة إلى أسماء مثل /*splat.

لنلقِ نظرة على مثال لكيفية تطبيق المسارات في Express. سيُنشئ مثالنا 3 مسارات كما يلي:

  1. مسار /Node الذي سيعرض السلسلة "البرنامج التعليمي على العقدة" إذا تم الوصول إلى هذا المسار
  2. مسار /Angular والذي سيعرض السلسلة "Tutorial on Angular" في حالة الوصول إلى هذا المسار
  3. مسار افتراضي / سيعرض النص "مرحباً بك في Guru99 درسًا تعليميًا.

سيظل رمزنا الأساسي كما هو في الأمثلة السابقة. المقتطف أدناه عبارة عن وظيفة إضافية لعرض كيفية تنفيذ التوجيه.

كود توجيه Express المشروح الذي يحدد مسارات Node وAngular والمسارات الافتراضية

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
});

Code التفسير:

  1. هنا نحدد مسارًا إذا كان URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URLتحتوي الدالة على معلَمَين.
    • المعلمة الرئيسية التي سنستخدمها هي المعلمة 'res'، والتي يمكن استخدامها لإرسال المعلومات مرة أخرى إلى العميل.
    • تحتوي المعلمة "req" على معلومات حول الطلب الذي يتم تقديمه. في بعض الأحيان يمكن إرسال معلمات إضافية كجزء من الطلب الذي يتم تقديمه، وبالتالي يمكن استخدام المعلمة 'req' للعثور على المعلمات الإضافية التي يتم إرسالها.
  2. نحن نستخدم وظيفة الإرسال لإرسال السلسلة "البرنامج التعليمي على العقدة" مرة أخرى إلى العميل إذا تم اختيار مسار العقدة.
  3. هنا نحدد مسارًا إذا كان URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
  4. نحن نستخدم وظيفة الإرسال لإرسال السلسلة "Tutorial on Angular" مرة أخرى إلى العميل إذا تم اختيار المسار Angular.
  5. هذا هو المسار الافتراضي الذي يتم اختياره عند تصفح جذر التطبيق — http://localhost:3000. عند اختيار المسار الافتراضي، تظهر الرسالة "مرحبًا بك في Guruسيتم إرسال "99 درسًا تعليميًا" إلى العميل.

إذا تم تنفيذ الأمر بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود الخاص بك في المتصفح.

الإخراج:

يعرض المتصفح "مرحباً بك في" Guru99 درسًا تعليميًا على المسار الافتراضي لـ Express

من الإخراج،

  • يمكنك أن ترى ذلك بوضوح إذا تصفحت إلى URL عند الاتصال بـ localhost على المنفذ 3000، سترى السلسلة 'Welcome to Guruتم عرض 99 درسًا تعليميًا على الصفحة.
  • لأننا ذكرنا في الكود الخاص بنا أن الوضع الافتراضي لدينا URL سيتم عرض هذه الرسالة.

بعد ذلك، انتقل إلى /Node.

يعرض المتصفح برنامجًا تعليميًا حول Node تم إرجاعه بواسطة مسار Node

من الإخراج،

  • يمكنك أن ترى ذلك إذا كان URL تم تغييرها إلى /Node، وسيتم اختيار مسار Node ذي الصلة وسيتم عرض السلسلة "Tutorial on Node".

ثم انتقل إلى /Angular.

يعرض المتصفح برنامجًا تعليميًا حول Angular تم إرجاعه بواسطة مسار Angular

من الإخراج،

  • يمكنك أن ترى ذلك إذا كان URL تم تغييرها إلى /Angular، وسيتم اختيار مسار Node ذي الصلة وسيتم عرض السلسلة "Tutorial on Angular".

نموذج لخادم الويب باستخدام Express.js

من المثال السابق، رأينا كيف يمكننا تحديد المخرجات التي سيتم عرضها بناءً على التوجيه. هذا النوع من التوجيه هو المستخدم في معظم تطبيقات الويب الحديثة. أما الجزء الآخر من خادم الويب فيتعلق باستخدام القوالب في Node.js.

عند إنشاء تطبيقات Node.js سريعة وفعّالة، يُعدّ استخدام القوالب طريقة سهلة وسريعة. تتوفر العديد من أطر العمل في السوق لإنشاء القوالب. في حالتنا، سنستخدم إطار عمل Jade كمثال.

يتم تثبيت Jade عبر مدير حزم Node. ويمكن القيام بذلك عن طريق تنفيذ السطر التالي في سطر الأوامر.

تثبيت npm اليشم

يطلب الأمر أعلاه من مدير حزم Node تنزيل وحدات Jade المطلوبة وتثبيتها وفقًا لذلك.

NOTE: في الإصدار الأخير من Node jade تم إهماله. بدلا من ذلك، استخدم الصلصال.

⚠️ المكافئ الحديث: تثبيت كلب البجأعد تسمية الملف index.jade إلى index.pug، ثم عيّن قيمة app.set('view engine','pug'). لن تتلقى حزمة jade أي تحديثات؛ وستظل الخطوات التالية قيد التنفيذ.

لنستخدم إطار عمل Jade الذي قمنا بتثبيته حديثًا وننشئ بعض القوالب الأساسية.

الخطوة 1) الخطوة الأولى هي إنشاء قالب Jade. أنشئ ملفًا باسم index.jade وأدرج الكود التالي. تأكد من إنشاء الملف في مجلد "views".

ترميز قالب index.jade مع عناصر نائبة للعناوين والرؤوس

  1. نحدد هنا أنه سيتم تغيير عنوان الصفحة إلى أي قيمة يتم تمريرها عند استدعاء هذا القالب.
  2. كما نحدد أن النص الموجود في علامة العنوان سيتم استبداله بأي نص يتم تمريره في قالب Jade.

فيما يلي كود التطبيق الذي يقوم بعرضه.

كود Express المشروح الذي يحدد محرك عرض Jade وفهرس العرض

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

Code التفسير:

  1. أول ما يجب تحديده في التطبيق هو "محرك العرض" الذي سيُستخدم لعرض القوالب. وبما أننا سنستخدم Jade لعرض قوالبنا، فإننا نحدد ذلك وفقًا لذلك.
  2. يتم استخدام وظيفة التقديم لعرض صفحة ويب. في مثالنا، نقوم بعرض القالب (index.jade) الذي تم إنشاؤه مسبقًا.
  3. نقوم بتمرير قيم "Guruسيتم استبدال القيمتين "99" و"Welcome" بالمعاملين "title" و"message" على التوالي. وسيتم استبدال هاتين القيمتين بالمعاملين "title" و"message" المُعلنين في قالب index.jade.

إذا تم تنفيذ الأمر بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود الخاص بك في المتصفح.

الإخراج:

يقوم المتصفح بعرض قالب Jade بعنوان Guru99 وعنوان الصفحة الترحيب

من الإخراج،

  • يمكننا أن نرى أن عنوان الصفحة يتم تعيينه إلى "Guru99" ويتم تعيين عنوان الصفحة إلى "مرحباً".
  • ويرجع ذلك إلى قالب Jade الذي يتم استدعاؤه في تطبيق Node.js الخاص بنا.

الأسئلة الشائعة

الوسيطة تستقبل الدوال طلب الاستجابة (req) والاستجابة (res) والدالة التالية (next)، ثم تُنفذ بترتيب التسجيل. وتتولى هذه الدوال معالجة التسجيل، وتحليل نص الاستجابة، والمصادقة، والأخطاء، ويجب على كل منها إنهاء الاستجابة أو استدعاء الدالة التالية (next()).

لا. يقوم Express بتجميع المحللات، لذا فإن express.json() و express.urlencoded() يحلان محل المحللات المنفصلة محلل الجسم تم حذف الدالة المساعدة bodyParser() المدمجة، ويبقى req.body غير مُعرَّف حتى يتم تشغيل المُحلِّل.

اكسبرس 5 تم جعل المعالجات مدركة للوعود، وإزالة app.del() و res.sendfile()، وترقية مطابقة المسار بحيث تحتاج الأحرف البديلة إلى أسماء مثل /*splat، وتعيين urlencoded extended إلى false افتراضيًا.

في Express 5، يتم تمرير الوعد المرفوض تلقائيًا إلى برنامج الوسيط لمعالجة الأخطاء، وبالتالي تختفي استدعاءات next(err) اليدوية. أما في Express 4، فيلزم استخدام try/catch صريح داخل كل دالة غير متزامنة (async). رد.

كلب البجتم تغيير اسم Jade لأسباب تتعلق بالعلامة التجارية، وأصبحت حزمة Jade قديمة. تستمر القوالب الحالية في العمل بعد تغيير اسمها إلى .pug وتغيير محرك العرض.

يُعتبر Node.js 24 الإصدار النشط ذو الدعم طويل الأمد (LTS) خلال عام 2026، بينما يبقى Node.js 22 في مرحلة الصيانة. تثبيت أحد هذه الخيارات. يتطلب Express 5 الإصدار 18 من Node.js أو أحدث.

تقوم الماسحات الضوئية للتعلم الآلي بقراءة تعريفات المسارات وترتيب البرامج الوسيطة، ثم تُشير إلى المصادقة المفقودة، أو عدم التحقق من الصحة. Javaسيناريو المدخلات وقواعد CORS المتساهلة. ومع ذلك، لا يزال هناك مراجع بشري يؤكد كل نتيجة.

مساعد الطيار جيثب وتقوم برامج المساعدة الآلية المماثلة بإنشاء ملفات التوجيه، وبرامج وسيطة للتحقق، ونماذج أولية لوحدات التحكم من خلال موجه أوامر قصير واحد. ولا يزال كل مسار يتم إنشاؤه بحاجة إلى تجريب قبل الافراج عنه.

تلخيص هذه التدوينة بـ: