最近在學習nuxt3，學習過程中可參考的中文文檔并不是特別多，今天在學習server routes的使用方式，可參考的文檔就更少了，于是只能自己啃官方文檔，順便記錄下自己的學習心得，也希望能夠給其他新入門的學習者一點兒借鑒，如有說的不對的地方，歡迎大家指正，在下一定虛心接受。

nuxt3在后端服務器這塊引入了Nitro框架，感興趣的朋友可以移步到官方網站進行了解和學習，個人感覺類似nodejs框架里面的express 和 koa吧，只是可能更輕量吧。

在創(chuàng)建api之前，我們首先需要在根目錄下創(chuàng)建一個server 目錄，nuxt3會自動檢索目錄中的api目錄，routes目錄以及middleware目錄，并根據這些目錄里面的文件名自動創(chuàng)建對應的api。

比如我們想要創(chuàng)建一個api/hello的api,首先我們需要在server 目錄下創(chuàng)建api目錄，并且在api目錄下創(chuàng)建一個名為hello.ts。

// server/api/hello.ts
export default defineEventHandler((event) => {
  return {
    api: 'works'
  }
})

注意：每個文件都需要導出一個默認的命名為defineEventHandler的函數(shù)，這樣我們在代碼中就可以通過 await $fetch('/api/hello')這種方式進行調用了。通過defineEventHandler可以返回json格式的數(shù)據，也可以返回一個Promise,也可以直接使用event.res.end()進行返回。

通過在server/api目錄下創(chuàng)建文件的方式，nuxt會自動生成/api/filename 這樣的訪問路徑，如果我們在開發(fā)過程中不想使用/api/filename這樣的訪問路徑，而是希望可以直接通過 /filename這種的文件路徑，那么我們可以在server目錄下創(chuàng)建routes目錄，并且在該目錄下創(chuàng)建對應的文件即可。

// server/routes/hello.ts
export default defineEventHandler(() => 'Hello World!')

此時我們就可以直接使用await $fetch('/hello')進行訪問了，是不是很方便？

如果想在nuxt3中使用中間件，那么我們需要在server目下下創(chuàng)建middleware目錄，并將自己創(chuàng)建的中間件文件放置在該目錄下

中間件處理程序，會應用在每一個api路由之前，它可以用來增加路由檢測、增加請求header信息或者記錄請求日志，也可以用來擴展event請求對應

// server/middleware/log.ts
export default defineEventHandler((event) => {
  console.log('New request: ' + event.req.url) // 打印請求日志
})
// server/middleware/auth.ts
export default defineEventHandler((event) => {
  event.context.auth = { user: 123 } // 擴展event上下文
})

匹配路由參數(shù)

server routes 可以處理動態(tài)路由，在文件名中間使用中括號的方式，這點兒和前端動態(tài)路由類似，比如server/api/hello-[name].ts，訪問動態(tài)路由參數(shù)可以通過event.context.params對象進行訪問。

export default defineEventHandler(event => `Hello, ${event.context.params.name}!`)

代碼中就可以通過$fetch('/api/hello/nuxt')這種方式進行調用了

以上方式創(chuàng)建的路由默認都是get方式進行訪問，如果我們想要創(chuàng)建post,put,delete等方式的請求處理函數(shù)應該怎么操作呢？

Http方法匹配

我們可以創(chuàng)建以.get、.post、.put、.delete等為后綴的文件名來匹配對應的Http method

// server/api/test.get.ts
export default defineEventHandler(() => 'Test get handler')

/// server/api/test.post.ts
export default defineEventHandler(() => 'Test post handler')
復制代碼

以上兩個文件分別以.get 和 .post后綴，那么在代碼請求中就只能使用相對應的get、post方式進行請求，如果換成其他方式，直接返回404 error

處理請求體

post請求中，一般都會在請求體里面?zhèn)魅胍恍﹨?shù)，獲取請求體參數(shù)可以通過以下這種方式

// server/api/submit.post.ts
export default defineEventHandler(async (event) => {
    const body = await useBody(event)
    return { body }
})

前端傳入參數(shù)可以通過以下方式

$fetch('/api/submit', { method: 'post', body: { test: 123 } })

注意：此時我們創(chuàng)建了一個submit.post的文件用以處理post請求，此時我們使用useBody可以接收到前端傳來的請求參數(shù)。但如果我們使用get方式請求該API，那么接口會拋出r405 Method Not Allowed HTTP error

處理get請求路由參數(shù)

例如：/api/query?param1=a&param2=b

// server/api/query.get.ts
export default defineEventHandler((event) => {
  const query = useQuery(event)
  return { a: query.param1, b: query.param2 }
})

以上就是關于nuxt3中創(chuàng)建接口api以及路由中間件的使用方式，官網還有一些嵌套路由以及streams處理方法（還處于實驗階段），感興趣的朋友可以移步官方文檔進行發(fā)掘 server routes

到此這篇關于nuxt3中server routes的使用詳解的文章就介紹到這了,更多相關nuxt3 server routes內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論