用户登录

在 Nuxt 应用里定义的服务端接口如果需要地址参数,可以使用方括号的形式命名路由文件。

比如在这个 server/api 目录的下面,把这个 greet.get 放在 greet 这个目录的下面,文件重命名为 index.get.ts。复制一份这个路由文件,改下文件的名字,设置成 [name].get.ts。文件名里的这个 [name] 就是这个路由地址里的一个参数。

打开这个文件,在这个处理器里面,添加一个 event 参数,鼠标放在这个 event 参数的上面,会提示它的类型是 H3Event,Nuxt 框架的服务端引擎叫 Nitro,这个 Nitro 里面用了一个 Http 框架叫 H3 ,所以这个接口处理器的参数的类型是 H3Event。

这个 event 参数里有个 context 属性,可以直接把它解构出来。然后在这个处理器里面,继续解构一下这个 context,它里面的 params 这个属性就是接口地址参数,对于当前这个路由来说,这个地址参数里应该有个 name 参数,把它解构出来。

在处理器响应的数据里面,修改一下 message 属性的值,一个字符模板,你好,后面加上这个 name 参数的值,欢迎来宁皓网学习 Nuxt。

测试

在 Http 客户端测试一下,配置一个请求,地址是 localhost:3000/api/greet 后面再加上 /wanghao,这个 wanghao 就是给这条路由的地址参数里设置的 name 这个参数的值。发送一下请求,得到的响应是一个 JSON 数据,里面有个 message 属性,它的值里面会包含 name 这个路由地址参数的值。

在 Nuxt 应用里定义带参数的应用接口《 Nuxt.js:应用路由 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点