0Pricing
Vue Academy · درس

مسارات خادم Nuxt ونقاط نهاية API

مجلد server/api/، وdefineEventHandler()، وأدوات H3، والبرامج الوسيطة، ومعالجة الأخطاء

مسارات خادم Nuxt ونقاط نهاية API درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

Nuxt إطار متكامل للواجهة والخلفية

يتضمن Nuxt 3 محرك خادم (Nitro). يتيح لك المجلد server/ إنشاء نقاط نهاية API إلى جانب صفحاتك — من دون الحاجة إلى خلفية منفصلة في العديد من التطبيقات.

مجلد server/api

تصبح الملفات الموجودة في server/api/ مسارات API ضمن /api. ويستجيب server/api/hello.ts على العنوان /api/hello.

server/
  api/
    hello.ts   ->  /api/hello
    posts.ts   ->  /api/posts

defineEventHandler

يصدّر كل مسار خادم معالجًا أُنشئ باستخدام defineEventHandler. وتُرسل أي قيمة يعيدها بوصفها الاستجابة، مع تحويلها إلى JSON تلقائيًا.

// server/api/hello.ts
export default defineEventHandler((event) => {
  return { message: 'Hello from the server' }
})

لواحق أساليب HTTP

أضف لاحقة الأسلوب إلى اسم الملف لتقييد الأسلوب المسموح به. يتعامل users.get.ts مع GET، بينما يتعامل users.post.ts مع POST. ومن دون لاحقة، يستجيب المسار لأي أسلوب.

server/api/
  users.get.ts   ->  GET /api/users
  users.post.ts  ->  POST /api/users

قراءة معلمات الاستعلام

استخدم المساعد getQuery لقراءة سلسلة استعلام عنوان URL من الحدث.

export default defineEventHandler((event) => {
  const query = getQuery(event)
  return { search: query.q }
})

قراءة نص الطلب

بالنسبة إلى طلبات POST/PUT، يحلل readBody نص JSON الوارد. وهذه الدالة غير متزامنة، لذا استخدم await معها.

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  return { received: body }
})

مسارات خادم ديناميكية

تعمل أسماء الملفات بين قوسين على الخادم أيضًا. يقرأ server/api/users/[id].get.ts قيمة id باستخدام getRouterParam.

export default defineEventHandler((event) => {
  const id = getRouterParam(event, 'id')
  return { id }
})

طرح أخطاء HTTP

استخدم createError لإرجاع استجابات أخطاء HTTP سليمة تتضمن رمز حالة ورسالة، بدلًا من طرح خطأ عادي.

export default defineEventHandler((event) => {
  const id = getRouterParam(event, 'id')
  if (!id) {
    throw createError({ statusCode: 400, statusMessage: 'Missing id' })
  }
})

كائن حدث H3

تأتي وسيطة event من H3، وهو إطار HTTP الخاص بـ Nitro. وتحمل هذه الوسيطة الطلب والاستجابة، وتمثل نقطة الدخول إلى جميع الدوال المساعدة.

ضبط الحالة والترويسات

تتيح لك مساعدات مثل setResponseStatus وsetHeader التحكم في الاستجابة عندما لا يكفي إرجاع قيمة.

export default defineEventHandler((event) => {
  setResponseStatus(event, 201)
  setHeader(event, 'Cache-Control', 'no-cache')
  return { created: true }
})

استدعاء واجهة API من الصفحات

من إحدى الصفحات، اجلب نقطة النهاية الخاصة بك باستخدام useFetch أو $fetch. وأثناء SSR، يستدعي Nuxt المعالج مباشرةً، متجاوزًا رحلة الذهاب والإياب عبر HTTP.

const { data } = await useFetch('/api/posts')

اختبار سريع

اختبر معرفتك بمسارات الخادم في Nuxt.

مراجعة

لقد تعلمت مسارات الخادم في Nuxt:

  • تصبح الملفات الموجودة في server/api/ نقاط نهاية API.
  • يعرّف defineEventHandler معالجًا، وتكون القيمة التي يعيدها هي الاستجابة.
  • تحدد اللاحقتان .get.ts و.post.ts أسلوب HTTP.
  • استخدم getQuery وreadBody وgetRouterParam وcreateError مع حدث H3.

الأسئلة الشائعة

هل درس «مسارات خادم Nuxt ونقاط نهاية API» مجاني؟

نعم — نص درس «مسارات خادم Nuxt ونقاط نهاية API» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «مسارات خادم Nuxt ونقاط نهاية API»؟

مجلد server/api/، وdefineEventHandler()، وأدوات H3، والبرامج الوسيطة، ومعالجة الأخطاء تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «مسارات خادم Nuxt ونقاط نهاية API»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. بنية مشروع Nuxt 3 والتوجيه المعتمد على الملفات
  2. جلب البيانات: useFetch وuseAsyncData
  3. مسارات خادم Nuxt ونقاط نهاية API
  4. أوضاع SSR وSSG وSPA
← العودة إلى Vue Academy