سنشرح في هذا المقال كيفية التعامل مع المسارات routes وأنواع طلبات HTTP في إطار العمل Express بتطبيق مشروع عملي، وسنتعلم كيفية تحديد المسارات واستخدام طلبات HTTP من نوع GET و POST و PUT و DELETE لمعالجة البيانات.
تتعامل المسارات مع انتقال المستخدم إلى عناوين URL مختلفة، ويسهل بروتوكول HTTP عمليات التواصل ونقل البيانات من خادم Express إلى متصفح الويب.
يُفضل أن يكون لديك معرفة مسبقة ببيئة Node.js، لكن ذلك ليس ضروريًا، انظر صفحة التعريف Node.js على موسوعة حسوب وننصح بقراءة صفحة طريقة الاستعمال وتشغيل الأمثلة أيضًا من التوثيق نفسه.
إعداد المشروع
احرص على أن تكون لديك بيئة Node.js جاهزة ومثبتة على حاسوبك حتى تتمكن من استخدام إطار العمل Express.
نفذ الخطوات التالية في الطرفية Terminal:
أولًا، أنشئ مجلدًا جديدًا خاص بالمشروع باسم node-express-routing
:
mkdir node-express-routing
ثم انتقل إلى المجلد الجديد:
cd node-express-routing
ثانيًا، أنشئ مشروعك الجديد معتمدًا الإعدادات الافتراضية، ومن ضمنها ملف package.json حتى تتمكن من الوصول إلى الاعتماديات dependencies:
npm init -y
ثم أنشئ ملف index.js حيث ستتعامل مع المسارات وتوابع طلبات HTTP:
touch index.js
ثبت الحزمتين Express و nodemon
، إذ سنحتاج إلى الحزمة الأخيرة لإعادة تشغيل المشروع باستمرار عند كل تغيير في ملف index.js:
npm install express --save npm install nodemon --save-dev
افتح الملف package.json باستخدام إحدى محررات النصوص وأضف سكربت البدء start
لتشغيل ملف index.js عبر الأمر nodemon
:
{ "name": "node-express-routing", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "nodemon index.js" }, "keywords": [], "author": "Paul Halliday", "license": "MIT" }
يتيح لك ذلك استخدام الأمر npm start
في الطرفية لتشغيل خادم Express وحفظ التعديلات. تهانينا! أصبحت جاهزًا لإنشاء خادم Express بعد أن أعددت الحزمة nodemon
لتعيد تشغيل الخادم عند التعديل على الملف index.js
.
تشغيل خادم Express
ستتعامل مع منطق دمج المسارات ومختلف أنواع طلبيات HTTP في خادم Express الخاص بك، وستعمل على إعداد وتشغيل خادم خاص بك لتتصور كيف سيبدو مشروعك في المتصفح.
اطلب وحدة Express عبر التابع require
، في ملف index.js ثم خزن نسخة instance في المتغير app
، وبعد ذلك أعلن عن متغير PORT
واضبطه إلى القيمة 3000.
const express = require('express'); const app = express(); const PORT = 3000; app.use(express.json()); app.listen(PORT, () => console.log(`Express server currently running on port ${PORT}`));
ثم استدعِ التابع ()listen
مع التابع ()app
ومرر المتغير PORT
كوسيط أول، ودالة رد نداء callback كوسيط ثاني، إذ تقوم الدالة الوسيطة ()listen
بإنشاء خادم محلي على المنفذ المحدد بالمتغير PORT
لمعاينة التعديلات.
مرر الوسيط ()express.json
إلى التابع ()app.use
لتحليل البيانات الواردة من خلال طلبات HTTP الخاصة بك. اعتمدت الإصدارات السابقة على تبعية المحلل body-parser
، أما في الإصدارات الأحدث ضمنت Express برمجيات وسيطة معدة مسبقًا لتحليل البيانات خصوصًا التي بصيغة JOSN.
اكتب الأمر التالي في الطرفية لتبدأ تشغيل المشروع:
npm start
سيُخدَّم المشروع على العنوان http://localhost:3000
، وستلاحظ رسالة الخطأ التالية عند الانتقال إلى المتصفح:
تعد هذه خطوة البداية، الآن علينا تعريف طلبيات HTTP للتخاطب الصحيح بين المتصفح والخادم.
استقبال الخادم طلبية GET من طلبيات HTTP
يمكنك إرسال البيانات من خادم Express الخاص بك إلى المتصفح لمعاينة مشروعك بناءً على إرساله طلبية GET محددة الوجهة، ولفعل ذلك استدعِ التابع ()get.
مع المتغير app
ولا تحدد الوجهة حاليًا، ومرر له دالة تأخذ الوسطين request
و response
كما يلي:
app.get('/', (request, response) => { response.send('Hello'); });
لاحظ أن الوسيط request
يحتوي على معلومات عن الطلبية GET التي أرسلها المتصفح، بينما يرسل التابع ()response.send
بيانات إلى المتصفح، إما على شكل سلسلة، أو كائن، أو مصفوفة كرد أو إجابة على الطلب المرسل.
لنتعرف على المسارات وطلبات HTTP الأخرى، بعد أن طبقنا طلبية GET.
التعامل مع المسارات Routes
أنشئ طلبية GET مع تحديد المسار '/accounts'
والمسار '/accounts/:id'
، ثم صَرّح عن مصفوفة حسابات باسم accounts
:
let accounts = [ { "id": 1, "username": "paulhal", "role": "admin" }, { "id": 2, "username": "johndoe", "role": "guest" }, { "id": 3, "username": "sarahjane", "role": "guest" } ]; app.get('/accounts', (request, response) => { response.json(accounts); }); app.get('/accounts/:id', (request, response) => { const accountId = Number(request.params.id); const getAccount = accounts.find((account) => account.id === accountId); if (!getAccount) { response.status(500).send('Account not found.') } else { response.json(getAccount); } });
ستحصل على جميع معلومات الحسابات الموجودة في المصفوفة عند الانتقال إلى العنوان الآتي:
http://localhost:3000/accounts
حيث ستكون نتيجة الخرج كما يلي:
[ { "id": 1, "username": "paulhal", "role": "admin" }, { "id": 2, "username": "johndoe", "role": "guest" }, { "id": 3, "username": "sarahjane", "role": "guest" } ]
يمكن طلب معلومات حساب محدد بعينه من خلال إرسال مُعرِّفه إلى نقطة الوصول endpoint التالية: id:/
، حيث يعتبر إطار العمل Express أن :id
في نقطة الوصول /accounts/:id
هي نص بديل لأحد معاملات المستخدم ويطابقها مع القيمة المقابلة في الرابط المرسل لنقطة الوصول.
لاحظ النتيجة عند الانتقال إلى العنوان http://localhost:3000/accounts/3
:
{ "id": 3, "username": "sarahjane", "role": "guest" }
التعامل مع الطلبيات POST و PUT و DELETE
توفر طلبيات HTTP الأخرى غير النوع GET (اجلب) مرونة أكبر في التعامل مع البيانات وهي الطلبيات POST (انشر) و PUT (ضع) و DELETE (احذف)، إذ تنشئ الطلبية POST بيانات جديدة في الخادم (تنشر على الخادم)، بينما تعدل الطلبية PUT على البيانات الموجودة (تضع بيانات في الخادم)، أما الطلبية DELETE فتمسح البيانات من الخادم.
طلبية POST
استخدم طلبية POST لإنشاء بيانات جديدة في مصفوفة الحسابات accounts
، عن طريق استدعاء التابع ()post.
مع المتغير app
وتحديد المسار accounts/
في حقل الوسيط الأول:
app.post('/accounts', (request, response) => { const incomingAccount = request.body; accounts.push(incomingAccount); response.json(accounts); })
ستُرسل البيانات القادمة من الطلبية POST إلى مصفوفة الحسابات accounts
ثم يرسل الرد على هيئة كائن JSON.
لاحظ أن مصفوفة الحسابات accounts
أصبحت تحتوي على مستخدم جديد:
[ { "id": 1, "username": "paulhal", "role": "admin" }, { "id": 2, "username": "johndoe", "role": "guest" }, { "id": 3, "username": "sarahjane", "role": "guest" }, { "id": 4, "username": "davesmith", "role": "admin" } ]
طلبية PUT
يمكن تعديل حساب ما إن أرسلت طلبية PUT إلى الخادم، ويمكن له أن يعالجها عن طريق استدعاء التابع ()put.
مع المتغير app
وتمرير المسار '/accounts/:id'
في حقل الوسيط الأول، وستجد من خلاله مُعرِّف الحساب المدخل، وتستخدم التابع الشرطي if
لتعديل البيانات الجديدة:
app.put('/accounts/:id', (request, response) => { const accountId = Number(request.params.id); const body = request.body; const account = accounts.find((account) => account.id === accountId); const index = accounts.indexOf(account); if (!account) { response.status(500).send('Account not found.'); } else { const updatedAccount = { ...account, ...body }; accounts[index] = updatedAccount; response.send(updatedAccount); } });
يمكنك الآن تعديل البيانات في مصفوفة الحسابات، فإن أرسلت طلبية PUT إلى الخادم عبر الوجهة التالية:
http://localhost:3000/accounts/1
لطلب تغيير دور مستخدم محدد مثل إرسال البيانات التالية:
{ "role": "guest" }
فسيتغير دور "role"
ذلك المستخدم من مدير admin
إلى ضيف guest
، وذلك عند الانتقال إلى العنوان http://localhost:3000/accounts/1
:
{ "id": 1, "username": "paulhal", "role": "guest" }
الطلبية DELETE
يمكن حذف المستخدمين وبياناتهم إن أرسلت طلبية DELETE إلى الخادم والذي يعالجها عن طريق استدعاء التابع ()delete.
مع المتغير app
وتضمين المسار '/accounts/:id'
في حقل الوسيط الأول. سيبحث التابع بعدها ضمن مصفوفة الحسابات عن الحساب ذو المعرف المراد حذفه ويتخذ الإجراء المناسب.
app.delete('/accounts/:id', (request, response) => { const accountId = Number(request.params.id); const newAccounts = accounts.filter((account) => account.id != accountId); if (!newAccounts) { response.status(500).send('Account not found.'); } else { accounts = newAccounts; response.send(accounts); } });
لاحظ أنه عند إرسال طلبية DELETE إلى العنوان http://localhost:3000/accounts/1
أن الحساب ذا المعرف 1 من مصفوفة الحسابات accounts
سيُحذَف.
ختامًا
تعلمنا في هذا المقال كيف يساعد تحديد المسارات واستخدام طلبيات HTTP في تفاعل الخادم مع الطلبيات التي يرسلها المتصفح كما وضحنا في مثال المستخدمين والتعامل مع بياناتهم من إنشاء وتحديث وحذف في خادم Express.
للحصول على المساعدة والدعم يمكنك إضافة سؤالك في قسم الأسئلة والأجوبة في أكاديمية حسوب.
ترجمة- وبتصرف للمقال How To Define Routes and HTTP Request Methods in Express لصاحبه Paul Halliday.
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.