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

Express.js (أو "Express") هو إطار عمل ويب NodeJS يُستخدم في النهاية الخلفية (أو من جانب الخادم) لمواقع الويب وتطبيقات الويب. يتميز Express بالمرونة والبساطة ، مما يعني أنه لا يحتوي على مجموعة واسعة من المكتبات والحزم غير الضرورية ، ولا يحدد كيفية إنشاء تطبيقك.

يبني إطار العمل السريع واجهات برمجة التطبيقات التي تسهل الاتصال من خلال طلبات واستجابات HTTP. أحد الأشياء الرائعة في Express هو أنه يمنح المطورين تحكمًا كاملاً في الطلبات والردود المرتبطة بكل طريقة من طرق التطبيق.

في هذا البرنامج التعليمي ، ستتعلم كيف ولماذا يجب عليك استخدام Express في مشاريعك الخاصة.

تثبيت Express في مشروعك

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

أول شيء عليك القيام به هو إنشاء ملف package.json ملف (داخل دليل / مجلد مشروعك) باستخدام الأمر التالي:

الحرف الأول npm

سيؤدي تنفيذ الأمر أعلاه إلى بدء عملية ستطالبك بالإدخالات التالية:

• اسم الحزمة
• الإصدار
• وصف
• نقطة الدخول
• أمر الاختبار
• الكلمات الدالة
• مؤلف
• رخصة

تحتوي جميع حقول اسم الحزمة ، والإصدار ، ونقطة الإدخال ، والترخيص على قيم افتراضية يمكنك تجاوزها بسهولة من خلال توفير القيم الخاصة بك. ومع ذلك ، إذا كنت تريد الاحتفاظ بالقيم الافتراضية ، يمكنك ببساطة استخدام الأمر التالي بدلاً من ذلك:

npm الحرف الأول

سيؤدي تنفيذ الأمر أعلاه إلى إنشاء ما يلي package.json ملف في دليل المشروع الخاص بك:

{
"الاسم": "myapp"،
"الإصدار": "1.0.0"،
"وصف": ""،
"main": "index.js"،
"نصوص": {
"اختبار": "صدى \" خطأ: لم يتم تحديد اختبار \ "&& خروج 1"
},
"الكلمات الدالة": []،
"مؤلف": ""،
"ترخيص": "ISC"،
}

يمكنك الآن تثبيت Express باستخدام الأمر التالي:

npm تثبيت سريع حفظ

سيؤدي تثبيت Express إلى إنشاء ملف الحزمة-lock.json بالإضافة إلى ملف node_modules مجلد.

فهم ملف package.json

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

سيؤدي تثبيت Express في دليل المشروع الخاص بك إلى تحديث ملف package.json ملف.

ملف package.json المحدث

{
"الاسم": "myapp"،
"الإصدار": "1.0.0"،
"وصف": ""،
"main": "index.js"،
"نصوص": {
"اختبار": "صدى \" خطأ: لم يتم تحديد اختبار \ "&& خروج 1"
},
"الكلمات الدالة": []،
"مؤلف": ""،
"ترخيص": "ISC"،
"التبعيات": {
"التعبير": "^ 4.17.1"
}
}

الآن لديك حقل "تبعيات" يحتوي على تبعية واحدة - Express. و ال التبعيات الكائن يخزن البرنامج الذي يعتمد عليه مشروعك ليعمل بشكل صحيح ، وهو في هذه الحالة إطار عمل Express.

إنشاء خادم مع Express

يعد امتلاك واجهة برمجة تطبيقات تتولى تخزين البيانات ونقلها مطلبًا لأي تطبيق مكدس كامل ، كما أن Express يجعل عملية إنشاء الخادم سريعة وسهلة.

ننظر إلى الوراء في package.json ملف أعلاه وسترى الحقل "الرئيسي". يخزن هذا الحقل نقطة الدخول إلى تطبيقك ، وهي "index.js" في المثال أعلاه. عندما تريد تنفيذ تطبيقك (أو في هذه الحالة ، الخادم الذي توشك على إنشائه) ، فسيتعين عليك تنفيذ index.js ملف باستخدام الأمر التالي:

index.js العقدة

ومع ذلك ، قبل أن تصل إلى مرحلة التنفيذ ، ستحتاج إلى إنشاء ملف index.js (أو تطبيق الخادم) في دليل المشروع الخاص بك.

إنشاء ملف index.js

const صريحة = تتطلب ('صريحة') ؛
تطبيق const = express () ؛
منفذ const = 5000 ؛
app.get ('/'، (req، res) => {
res.send ("الخادم الخاص بك يعمل")
})
app.listen (المنفذ ، () => {
console.log (`الخادم يعمل على: http://localhost:${port}`);
})

يستورد الملف أعلاه Express ثم يستخدمه لإنشاء تطبيق Express. يوفر التطبيق Express ثم الوصول إلى احصل على و يستمع الطرق التي تعد جزءًا من الوحدة النمطية Express. ال app.listen () الطريقة هي أول طريقة تحتاج إلى إعدادها. والغرض منه هو سرد الاتصالات على منفذ معين للكمبيوتر المضيف ، وهو المنفذ 5000 في المثال أعلاه.

الغرض من app.get () الطريقة هي الحصول على البيانات من مورد معين. تحتوي هذه الطريقة على وسيطين: مسار ووظيفة رد. تحتوي وسيطة المسار في المثال أعلاه على شرطة مائلة للأمام تمثل موضع الجذر. لذلك ، فإن التنقل إلى ملف http://localhost: 5000 عنوان URL (وهو جذر تطبيقك) ، أثناء تشغيل تطبيق index.js أعلاه ، سينتج المخرجات التالية في متصفحك:

ال app.get () طريقة وظيفة رد الاتصال يولد الإخراج أعلاه. وظيفة رد الاتصال هذه لها وسيطان - الطلب والاستجابة. الرد (وهو الدقة في المثال أعلاه) هو كائن HTTP الذي يرسله تطبيق Express بعد طلب HTTP (وهو ما تفعله بكتابة عنوان URL أعلاه في متصفحك).

خدمة موقع ثابت مع خادم Express الخاص بك

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

ومع ذلك ، يمكن لخادم Express أيضًا أن يخدم الملفات الثابتة. على سبيل المثال ، إذا كنت ترغب في إنشاء موقع ويب ثابت (مثل موقع لمدرب شخصي أو مدرب حياة أو مصمم أزياء) ، فيمكنك استخدام خادم Express لاستضافة موقع الويب.

مثال موقع HTML ثابت

 الصفحة الرئيسية 







مرحبا

Lorem ipsum dolor sit amet، consectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam ضروري للغاية. دولور ، تسلسل مميز!

عرض الخدمات

تنشئ شفرة HTML أعلاه صفحة رئيسية ثابتة لطيفة لموقع ويب مصمم شخصي عن طريق الارتباط بملف style.css التالي:

*{
الهامش: 0؛
حشوة: 0؛
تحجيم الصندوق: مربع الحدود ؛
}
الجسم {
عائلة الخطوط: 'Lato'، sans-serif؛
ارتفاع الخط: 1.5 ؛
}
أ {
اللون: # 333 ؛
زخرفة النص: لا شيء ؛
}
ul {
نمط القائمة: لا شيء ؛
}
ص {
الهامش: .5rem 0 ؛
}
h1 {
الهامش الأيسر: 2rem ؛
}
/* خدمة */
.وعاء {
أقصى عرض: 1100 بكسل ؛
الهامش: تلقائي ؛
الحشو: 0 2rem ؛
إخفاء الفائض؛
}
.btn {
عرض: مضمنة كتلة ؛
الحدود: لا يوجد ؛
الخلفية: # 910505؛
اللون: #fff ؛
الحشو: 0.5 ريم 1 ريم ؛
نصف قطر الحدود: 0.5rem ؛
}
.btn: مرر {
العتامة: 0.9 ؛
}
/ * نافبار * /
#navbar {
الخلفية: #fff ؛
الموقف: لزجة.
أعلى: 0؛
مؤشر z: 2 ؛
}
#navbar .container {
عرض: شبكة ؛
أعمدة شبكة القوالب: 6fr 3fr 2fr ؛
الحشو: 1rem.
محاذاة العناصر: مركز ؛
}
#navbar h1 {
اللون: # b30707 ؛
}
#navbar ul {
تبرير الذات: النهاية ؛
عرض: فليكس ؛
الهامش الأيمن: 3.5rem ؛
}
#navbar ul li a {
الحشو: 0.5 ريم.
وزن الخط: عريض ؛
}
#navbar ul li a.current {
الخلفية: # b30707 ؛
اللون: #fff ؛
}
#navbar ul li a: hover {
الخلفية: # f3f3f3 ؛
اللون: # 333 ؛
}
#navbar .social {
تبرير الذات: مركز ؛
}
#navbar .social أنا {
اللون: # 777 ؛
الهامش الأيمن: .5rem ؛
}
/* الصفحة الرئيسية */
#الصفحة الرئيسية {
اللون: #fff ؛
الخلفية: # 333 ؛
الحشو: 2rem.
الموقف: نسبي ؛
}
# المنزل: قبل {
المحتوى: ''؛
الخلفية: url ( https://source.unsplash.com/random) مركز / غطاء بدون تكرار ؛
الموقف: مطلق.
أعلى: 0؛
اليسار: 0؛
العرض: 100٪؛
الارتفاع: 100٪؛
العتامة: 0.4 ؛
}
#home .showcase-container {
عرض: شبكة ؛
أعمدة قالب الشبكة: كرر (2 ، 1fr) ؛
تبرير المحتوى: مركز ؛
محاذاة العناصر: مركز ؛
الارتفاع: 100 فولت
}
#home .showcase-content {
مؤشر z: 1 ؛
}
#home .showcase-content p {
الهامش السفلي: 1rem ؛
}

خدمة الموقع مع Express Server

const صريحة = تتطلب ('صريحة') ؛
تطبيق const = express () ؛
منفذ const = 5000 ؛
app.use (express.static ('public')) ؛
app.get ('/'، (req، res) => {
res.sendFile ("index.html")
})
app.listen (المنفذ ، () => {
console.log (`الخادم يعمل على: http://localhost:${port}`);
})

ملفات HTML و CSS أعلاه موجودة في مجلد عام في دليل المشروع الرئيسي. يتيح موقع ملف HTML الوصول إليه من خلال خادم Express ووظائفه.

إحدى الوظائف الجديدة في خادم Express أعلاه هي app.use () طريقة. يتصاعد express.static () البرامج الوسيطة التي تخدم الملفات الثابتة. هذا يجعل من الممكن استخدام res.send الملف () وظيفة لخدمة ساكنة index.html ملف أعلاه.

يتم التنقل إلى ملف http://localhost: 5000 الموقع في المستعرض الخاص بك سيعرض شيئًا مشابهًا للإخراج التالي:

اكتشف تطوير الواجهة الخلفية

يتيح لك إطار العمل السريع إجراء طلبات HTTP محددة وتلقي الاستجابات المناسبة باستخدام مجموعة من الأساليب المحددة مسبقًا. إنه أيضًا أحد أكثر أطر العمل الخلفية شيوعًا اليوم.

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

تعلم كيف تصبح مطور برامج Backend في عام 2021

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

اقرأ التالي

عن المؤلف