Vue Academy · पाठ

Nuxt सर्वर रूट और API एंडपॉइंट

server/api/ डायरेक्टरी, defineEventHandler(), H3 यूटिलिटी, मिडलवेयर और त्रुटि प्रबंधन

पाठ 3, कुल 4 में से13 चरण

Nuxt सर्वर रूट और API एंडपॉइंट, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह 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

क्वेरी पैरामीटर पढ़ना

इवेंट से URL की क्वेरी स्ट्रिंग पढ़ने के लिए getQuery सहायक का उपयोग करें।

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

अनुरोध बॉडी पढ़ना

POST/PUT अनुरोधों के लिए readBody आने वाली JSON body को पार्स करता है। यह async है, इसलिए इसका 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 त्रुटियाँ उत्पन्न करना

साधारण त्रुटि उत्पन्न करने के बजाय स्थिति कोड और संदेश वाली उचित HTTP त्रुटि प्रतिक्रिया लौटाने के लिए createError का उपयोग करें।

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

H3 इवेंट ऑब्जेक्ट

event तर्क H3, यानी Nitro के HTTP फ़्रेमवर्क, से आता है। इसमें अनुरोध और प्रतिक्रिया होती है और यह सभी सहायक फ़ंक्शन का प्रवेश-बिंदु है।

स्थिति और हेडर सेट करना

जब केवल कोई मान लौटाना पर्याप्त न हो, तब 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 विधि को सीमित करते हैं।
H3 इवेंट पर getQuery, readBody, getRouterParam और createError का उपयोग करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Nuxt सर्वर रूट और API एंडपॉइंट” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “Nuxt सर्वर रूट और API एंडपॉइंट” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Nuxt सर्वर रूट और API एंडपॉइंट” में मैं क्या सीखूँगा?

server/api/ डायरेक्टरी, defineEventHandler(), H3 यूटिलिटी, मिडलवेयर और त्रुटि प्रबंधन आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“Nuxt सर्वर रूट और API एंडपॉइंट” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

Nuxt 3 प्रोजेक्ट संरचना और फ़ाइल-आधारित रूटिंग
डेटा फ़ेचिंग: useFetch और useAsyncData
Nuxt सर्वर रूट और API एंडपॉइंट
SSR बनाम SSG बनाम SPA मोड

← Vue Academy पर वापस जाएँ