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

场景一：@PathVariable

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

后端接口方法示例如下：

@GetMapping("/test/getById/{id}")
public ResultgetById(@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){
}

前端传参代码：

//js中定义
export const addOne = data =>
    request ({
        url:"/test/add",
        method:"post",
        data:data //这里放参数
        //...省略
})
 
 
// .... 省略其他 ，vue页面中调用
 
dataForm:{
    userName:'',
    userId:'',
}
 
var tick = addOne (this.dataForm)
tick.then(({code,message,data})=>{
 
 
})

场景三：@RequestParam

后端接口方法示例如下：

@GetMapping("/test/deleteById")
public Result deleteById(@RequestParam(name="id") String id){
}

前端传参代码：

//js中定义
export const deleteById= data =>
    request ({
        url:"/test/deleteById",
        method:"get",
        params:data //这里放参数
        //...省略
})
 
 
// .... 省略其他 ，vue页面中调用
 
dataForm:{
    userName:'',
    userId:'',
}
 
var param = {id:this.dataForm.userId}
var tick = deleteById(param)
tick.then(({code,message,data})=>{
 
 
})

场景四：@RequestBody @RequestParam混合

 

后端接口方法示例如下：

//这个接口的传参就是@RequestParam 和 @RequestBody混合的
@PostMapping("/test/deal")
public Result add(@RequestParam("name")String name,@RequestParam("id")String id,
        @RequestBody Listids
){
 
}

前端传参代码：

下面就是@RequestParam的代码带在了链接上，然后@RequstBody的代码就放在参数里

import axios from 'axios'
 
// .... 省略其他 ，vue页面中调用
 
dataForm:{
    userName:'',
    userId:'',
    ids:['aa','bb','cc']
}
 
var url = "/test/deal?name="+this.dataForm.name+"&id="+id
 
axios.post(url,this.dataForm.ids).then(res=>{
    if(res.code=='0'){
 
    }
})