البرنامج التعليمي لـ Node.js Express FrameWork – تعلم في 10 دقائق

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

ما هو Express.js؟

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

لقد أصبح إطار عمل الخادم القياسي لـnode.js. Express هو الجزء الخلفي من شيء يعرف باسم مكدس MEAN.

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

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

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

3) Angular.js - إطار عمل JavaScript MVC المستخدم لتطبيقات الويب

4) نود.جي إس - الإطار المستخدم للتطبيقات القابلة للتطوير من جانب الخادم والشبكات.

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

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

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

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

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

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

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

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

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

شرح الكود:

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

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

الإخراج:

Express.js

من الإخراج،

  • يمكنك أن ترى بوضوح أننا إذا استعرضنا عنوان URL للمضيف المحلي على المنفذ 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) المعالج هي الوظيفة التي يتم تنفيذها عند مطابقة المسار.

دعونا نلقي نظرة على مثال لكيفية تنفيذ المسارات في Express. مثالنا سينشئ 3 طرق مثل

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

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

المسارات في Node.js

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');
}));

شرح الكود:

  1. نحن هنا نحدد المسار إذا كان عنوان URL http://localhost:3000/Node تم تحديده في المتصفح إلى المسار، نقوم بإرفاق وظيفة رد اتصال سيتم استدعاؤها عندما نتصفح إلى عنوان URL للعقدة. تحتوي الوظيفة على معلمتين.
  • المعلمة الرئيسية التي سنستخدمها هي المعلمة 'res'، والتي يمكن استخدامها لإرسال المعلومات مرة أخرى إلى العميل.
  • تحتوي المعلمة "req" على معلومات حول الطلب الذي يتم تقديمه. في بعض الأحيان يمكن إرسال معلمات إضافية كجزء من الطلب الذي يتم تقديمه، وبالتالي يمكن استخدام المعلمة 'req' للعثور على المعلمات الإضافية التي يتم إرسالها.
  1. نحن نستخدم وظيفة الإرسال لإرسال السلسلة "البرنامج التعليمي على العقدة" مرة أخرى إلى العميل إذا تم اختيار مسار العقدة.
  2. نحن هنا نحدد المسار إذا كان عنوان URL http://localhost:3000/Angular تم تحديده في المتصفح نقوم بإرفاق وظيفة رد الاتصال بالمسار والتي سيتم استدعاؤها عندما نتصفح عنوان URL الخاص بـ Angular.
  3. نحن نستخدم وظيفة الإرسال لإرسال السلسلة "Tutorial on Angular" مرة أخرى إلى العميل إذا تم اختيار المسار Angular.
  4. هذا هو المسار الافتراضي الذي يتم اختياره عندما يتصفح الشخص مسار التطبيق - http://localhost:3000. عند اختيار المسار الافتراضي، سيتم إرسال الرسالة "مرحبًا بك في دروس Guru99" إلى العميل.

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

الإخراج:

المسارات في Node.js

من الإخراج،

  • يمكنك أن ترى بوضوح أننا إذا استعرضنا عنوان URL للمضيف المحلي على المنفذ 3000، فسترى السلسلة "مرحبًا بك في دروس Guru99" معروضة على الصفحة.
  • لأننا ذكرنا في الكود الخاص بنا أن عنوان URL الافتراضي الخاص بنا سيعرض هذه الرسالة.

المسارات في Node.js

من الإخراج،

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

المسارات في Node.js

من الإخراج،

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

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

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

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

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

تثبيت npm اليشم

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

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

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

الخطوة 1) الخطوة الأولى هي إنشاء قالب اليشم. قم بإنشاء ملف يسمى Index.jade وأدخل الكود أدناه. تأكد من إنشاء الملف في مجلد "العروض".

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

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

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

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() {});

شرح الكود:

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

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

الإخراج:

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

من الإخراج،

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

نبذة عامة

  • الإطار السريع هو الإطار الأكثر شيوعًا المستخدم لتطوير تطبيقات Node js. تم بناء إطار العمل السريع أعلى إطار عمل Node.js ويساعد في التطوير السريع للتطبيقات المستندة إلى الخادم.
  • تُستخدم المسارات لتحويل المستخدمين إلى أجزاء مختلفة من تطبيقات الويب بناءً على الطلب المقدم. يمكن أن تختلف الاستجابة لكل مسار اعتمادًا على ما يجب إظهاره للمستخدم.
  • يمكن استخدام القوالب لإدخال المحتوى بطريقة فعالة. يعد Jade أحد أشهر محركات القوالب المستخدمة في تطبيقات Node.js.