البرنامج التعليمي لـ Node.js Express FrameWork

في هذا البرنامج التعليمي، سوف ندرس إطار عمل 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() {});

شرح الكود:

في السطر الأول من التعليمات البرمجية، نستخدم الدالة require لتضمين "الوحدة النمطية السريعة".
قبل أن نتمكن من البدء في استخدام الوحدة Express، نحتاج إلى إنشاء كائن منها.
نحن هنا نقوم بإنشاء وظيفة رد الاتصال. سيتم استدعاء هذه الوظيفة عندما يتصفح أي شخص إلى جذر تطبيق الويب الخاص بنا وهو http://localhost:3000 . سيتم استخدام وظيفة رد الاتصال لإرسال السلسلة "Hello World" إلى صفحة الويب.
في وظيفة رد الاتصال، نقوم بإرسال السلسلة "Hello World" مرة أخرى إلى العميل. يتم استخدام المعلمة "res" لإرسال المحتوى مرة أخرى إلى صفحة الويب. معلمة "res" هذه هي شيء توفره وحدة "الطلب" لتمكين الشخص من إرسال المحتوى مرة أخرى إلى صفحة الويب.
نستخدم بعد ذلك وظيفة الاستماع لجعل تطبيق الخادم الخاص بنا يستمع إلى طلبات العميل على المنفذ رقم 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 طرق مثل

مسار /Node الذي سيعرض السلسلة "البرنامج التعليمي على العقدة" إذا تم الوصول إلى هذا المسار
مسار /Angular والذي سيعرض السلسلة "Tutorial on Angular" في حالة الوصول إلى هذا المسار
المسار الافتراضي / الذي سيعرض السلسلة "مرحبًا بك في دروس 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');
}));

شرح الكود:

نحن هنا نحدد المسار إذا كان عنوان URL http://localhost:3000/Node تم تحديده في المتصفح إلى المسار، نقوم بإرفاق وظيفة رد اتصال سيتم استدعاؤها عندما نتصفح إلى عنوان URL للعقدة. تحتوي الوظيفة على معلمتين.

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

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

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

الإخراج:

من الإخراج،

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

من الإخراج،

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

من الإخراج،

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

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

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

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

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

تثبيت npm اليشم

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

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

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

الخطوة 1) الخطوة الأولى هي إنشاء قالب اليشم. قم بإنشاء ملف يسمى Index.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() {});

شرح الكود:

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

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

الإخراج:

من الإخراج،

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

الملخص

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

قد ترغب:

ما هو Express.js؟

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

ذات المواد

ما هي الطرق؟

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

الملخص