快捷導(dǎo)航

nuxt3中server routes的使用詳解

更新時(shí)間：2022年05月23日 09:31:30 作者：常想一二三

本文主要介紹了nuxt3中server routes的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

nuxt3在后端服務(wù)器這塊引入了Nitro框架，感興趣的朋友可以移步到官方網(wǎng)站進(jìn)行了解和學(xué)習(xí)，個(gè)人感覺類似nodejs框架里面的express 和 koa吧，只是可能更輕量吧。

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

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

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

注意：每個(gè)文件都需要導(dǎo)出一個(gè)默認(rèn)的命名為defineEventHandler的函數(shù)，這樣我們?cè)诖a中就可以通過 await $fetch('/api/hello')這種方式進(jìn)行調(diào)用了。通過defineEventHandler可以返回json格式的數(shù)據(jù)，也可以返回一個(gè)Promise,也可以直接使用event.res.end()進(jìn)行返回。

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

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

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

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

中間件處理程序，會(huì)應(yīng)用在每一個(gè)api路由之前，它可以用來增加路由檢測(cè)、增加請(qǐng)求header信息或者記錄請(qǐng)求日志，也可以用來擴(kuò)展event請(qǐng)求對(duì)應(yīng)

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

匹配路由參數(shù)

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

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

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

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

Http方法匹配

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

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

/// server/api/test.post.ts
export default defineEventHandler(() =&gt; 'Test post handler')
復(fù)制代碼

以上兩個(gè)文件分別以.get 和 .post后綴，那么在代碼請(qǐng)求中就只能使用相對(duì)應(yīng)的get、post方式進(jìn)行請(qǐng)求，如果換成其他方式，直接返回404 error

處理請(qǐng)求體

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

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

前端傳入?yún)?shù)可以通過以下方式

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

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

處理get請(qǐng)求路由參數(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 }
})

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

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

您可能感興趣的文章: