最近在学习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 AllowedHTTP 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中创立接口api以及路由中心件的运用办法，官网还有一些嵌套路由以及streams处理办法（还处于试验阶段），感兴趣的朋友能够移步官方文档进行开掘 server routes