لوحة المتصدرين

سنشرح في هذا المقال كيفية التعامل مع المسارات 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. اقرأ أيضًا التعامل مع كائن الإجابة res على طلبية HTTP في إطار العمل Express التعامل مع كائن الطلبية req في إطار العمل Express دليل استخدام Node.js وإطار العمل Express للمبتدئين