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

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

ما هو Express.js؟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. يمكنك تحديد أي منفذ متاح هنا.

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

الإخراج:

من الإخراج،

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

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

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

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

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 يتم تحديده في المتصفح. نقوم بإرفاق دالة رد نداء بالمسار، والتي سيتم استدعاؤها عند تصفح العقدة. URLتحتوي الدالة على معلَمَين.

• المعلمة الرئيسية التي سنستخدمها هي المعلمة 'res'، والتي يمكن استخدامها لإرسال المعلومات مرة أخرى إلى العميل.
• تحتوي المعلمة "req" على معلومات حول الطلب الذي يتم تقديمه. في بعض الأحيان يمكن إرسال معلمات إضافية كجزء من الطلب الذي يتم تقديمه، وبالتالي يمكن استخدام المعلمة 'req' للعثور على المعلمات الإضافية التي يتم إرسالها.

2. نحن نستخدم وظيفة الإرسال لإرسال السلسلة "البرنامج التعليمي على العقدة" مرة أخرى إلى العميل إذا تم اختيار مسار العقدة.
3. هنا نحدد مسارًا إذا كان URL http://localhost:3000/Angular يتم تحديد المسار في المتصفح. نقوم بإرفاق دالة رد نداء بالمسار، والتي سيتم استدعاؤها عند تصفح Angular. URL.
4. نحن نستخدم وظيفة الإرسال لإرسال السلسلة "Tutorial on Angular" مرة أخرى إلى العميل إذا تم اختيار المسار Angular.
5. هذا هو المسار الافتراضي الذي يتم اختياره عندما يتصفح الشخص مسار التطبيق - http://localhost:3000عند اختيار المسار الافتراضي، ستظهر الرسالة "مرحباً بك في Guruسيتم إرسال "99 درسًا تعليميًا" إلى العميل.

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

الإخراج:

من الإخراج،

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

من الإخراج،

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

من الإخراج،

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

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

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

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

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

تثبيت npm اليشم

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

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

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

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

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

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

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

الإخراج:

من الإخراج،

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

ملخص

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