nuxt3中的server?routes如何使用

這篇“nuxt3中的server routes如何使用”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“nuxt3中的server routes如何使用”文章吧。

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

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

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

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

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

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

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

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

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

中間件處理程序，會應用在每一個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上下文
})

匹配路由參數

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

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

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

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

Http方法匹配

我們可以創建以.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請求中，一般都會在請求體里面傳入一些參數，獲取請求體參數可以通過以下這種方式

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

前端傳入參數可以通過以下方式

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

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

處理get請求路由參數

例如：/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中的server routes如何使用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。