nuxt3中server routes的使用

lxf2023-05-17 01:36:29

最近在学习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

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 除此之外,本网站还拥有一个活跃的社区,您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信,社区的力量可以帮助您更好地成长和进步。 在本网站中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!