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

到此这篇关于nuxt3中server routes的使用详解的文章就介绍到这了,更多相关nuxt3 server routes内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论