后端各种格式传参混合vue前端传参

ss_Tina

已于 2024-03-12 15:18:54 修改

阅读量651

点赞数 12

文章标签：前端 vue.js javascript

于 2024-03-11 11:27:32 首次发布

本文链接：https://blog.youkuaiyun.com/ss_Tina/article/details/136617970

版权

文章讲述了在JavaScript应用中，如何通过PathVariable在URL路径中传递参数，@RequestBody处理来自前端的对象数据，以及@RequestParam处理GET请求中的查询参数，还展示了axios在Vue中的使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景一：@PathVariable

这个是传参数在路径上，注意是直接传参数url/bb，而不是url?id=bb

后端接口方法示例如下：

@GetMapping("/test/getById/{id}")
public Result<String>getById(@PathVariable String id){
}

前端传参代码：

//js中定义
export const getById = data =>
    request ({
        url:"/test/getById/"+data,//这个就是把参数放在了路径后面
        method:"get",
        //...省略
})


// .... 省略其他 ，vue页面中调用

var tick = getById(this.dataForm.id)
tick.then(({code,message,data})=>{


})

场景二：@RequestBody

这个一般都是前端传对象给后端，后端对实体对象进行操作

后端接口方法示例如下：

@PostMapping("/test/add")
public Result add(@RequestBody User user){
}

前端传参代码：

最低0.47元/天解锁文章