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中创建接口api以及路由中间件的使用方式，官网还有一些嵌套路由以及streams处理方法（还处于实验阶段），感兴趣的朋友可以移步官方文档进行发掘 server routes