فهم URLs والمسارات

مكتمل

يحتوي التطبيق على مجموعة متنوعة من البيانات التي يديرها، مثل المنتجات أو الطلبات. بصفتك مطورا ل Tailwind Traders، قم بتنظيم واجهات برمجة التطبيقات الخاصة بك في أقسام لنوع البيانات. يساعدك استخدام المقاطع على صيانة التطبيق وتوسيعه.

إحدى الطرق السهلة لتوسيع تطبيق ويب هي التأكد من إمكانية الوصول إلى البيانات من خلال عناوين URL المخصصة. يؤدي اثنان من عناوين URL المختلفة إلى تشغيل جزأين مختلفين من التعليمات البرمجية في تطبيق الويب الخاص بك.

https://tailwindtraders.com/products
https://tailwindtraders.com/orders

تصف هذه الوحدة ما هو عنوان URL لإنشاء واجهة برمجة تطبيقات.

مسار URL

عنوان URL هو عنوان يدخله المستخدم في عميل، مثل المتصفح، لتحديد موقع خادم معين ووظيفة معينة. تساعد معرفة كيفية عمل عنوان URL في تنظيم تطبيقك فيما يتعلق بذلك.

إليك عنوان URL نموذجي: http://localhost:8000/products/1?page=1&pageSize=20

يتوافق عنوان URL مع التركيب الذي يبدو كما يلي:

scheme:[//authority]path[?query][#fragment]

دعونا نشرح أجزاء لعنون URL المثال: https://tailwindtraders.com/products/1?page=1&pageSize=20#sort=asc.

مكون عنوان موقع الويب مثال ‏‏الوصف
المخطط https البروتوكول المستخدم، مثل httpأو httpsأو ircftpأو أو .file
المرجع tailwindtraders.com يتكون من معلومات مستخدم اختيارية ومضيف، وهو عادة اسم مجال.
المسار /products/1 صفر إلى العديد من المقاطع مفصولة بشريط مائل (/)، مع تحديد الموارد التي تهتم بها.
الاستعلام page=1&pageSize=20 جزء اختياري معرف بعد ? الحرف، يتكون من أزواج المعلمة/القيمة لتصفية البيانات بشكل أكبر.
جزء sort=asc يساعدك على أن تكون أكثر تحديدا، مثل فرز البيانات بترتيب معين.

يمكن أن يكون لكل مسار إجراءات مثل الإنشاء والقراءة والتحديث والحذف (المعروفة باسم CRUD). تتم الإشارة إلى الإجراء بواسطة أسلوب المسار، ودمجه مع معلومات إضافية مرسلة في رؤوس HTTP والنص الأساسي.

معالجات HTTP

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

فيما يلي مثال على التعليمات البرمجية التي تعالج طلبات HTTP لعنون URL /products/114:

app.get('/products/:id', (req, res) => {
  // handle this request `req.params.id`
})

تنسيق المعالج هو app.<method>(<route>, <callback>). يقوم طلب المسار /products/114 باستخدام أسلوب GET بتشغيل التعليمات البرمجية في الدالة التي لديها حق الوصول إلى الطلب الوارد (req) وإرجاع الاستجابة (res).

يمكن إعادة كتابة هذه التعليمات البرمجية لتسهيل قراءتها:

const routeHandler = (incomingRequest, outgoingResponse) => {
  // handle this request
}

app.get('/products/:id', routeHandler)

في عملك في Tailwind Traders، قد تضطر إلى العمل في تطبيقات Express باستخدام أي من نمطي التعليمات البرمجية.

البيانات الواردة

يمكن إرسال البيانات إلى واجهة برمجة التطبيقات بعدة طرق:

بيانات الموقع الشرح
معلمة المسار /products/:id، حيث :id هي المعلمة معلمات المسار هي جزء من عنوان URL. يتم استخدامها لتحديد مورد معين. يقتصر طول البيانات على الطول المسموح به لعنصر URL بحيث يكون قصيرا عادة مثل المعرف أو الاسم. يمكن أن يحتوي المسار على معلمات متعددة.
معلمة الاستعلام /products?page=1&pageSize=20، حيث ?page=1&pageSize=20 هي المعلمة معلمات الاستعلام هي جزء من عنوان URL. يتم استخدامها لتصفية البيانات. يقتصر طول البيانات على الطول المسموح به لعنصر URL بحيث يكون قصيرا عادة مثل المعرف أو الاسم. يمكن أن يحتوي المسار على معلمات استعلام متعددة.
نص الطلب POST /products نص الطلب هو جزء من طلب HTTP. يتم استخدامه لإرسال البيانات إلى واجهة برمجة التطبيقات. لا يقتصر طول البيانات على الطول المسموح به لعنصر URL حتى يمكن أن يكون طويلا. يشير رأس HTTP إلى واجهة برمجة التطبيقات إلى نوع البيانات مثل النص أو JSON أو ثنائي.

عادة ما تتطابق البيانات الواردة مع الأساليب التالية استنادا إلى الغرض من الإجراء:

الإجراء الأسلوب بيانات
‏إنشاء نشر نص الطلب
قراءة GET معلمات التوجيه والاستعلام
‏‏تحديث PUT نص الطلب
حذف حذف معلمات التوجيه والاستعلام

تلميح

الحرف الأول من كل أسلوب تهجأ CRUD. تستخدم هذه المصطلحات في الصناعة لوصف الأنواع الأربعة الأساسية للعمليات التي يمكن إجراؤها على البيانات.

مثال معلمة المسار مع req.params

افترض أن عنوان URL للطلب هو /products/20. المسار السريع لمعالجة هذا الطلب هو:

app.get('/products/:id', (req, res) => {
    const id = req.params.id

    // get product that matches id from database
})

مثال سلسلة الاستعلام مع req.query

افترض أن عنوان URL للطلب هو /products?page=1&pageSize=20. المسار السريع لمعالجة هذا الطلب هو:

app.get('/products', (req, res) => {
    const page = req.query.page
    const pageSize = req.query.pageSize

    // get next page of products from database
})

طلب مثال النص الأساسي مع req.body

افترض أن عنوان URL للطلب هو /products وأن نص الطلب هو { "name": "Product 1" }. المسار السريع لمعالجة هذا الطلب هو:

app.post('/products', (req, res) => {
    const name = req.body.name

    // add new product to database
})