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

场景一：@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){
}

前端传参代码：

//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){
}

//接口上传文件时 示例： 有时上传的是file 有时上传的是base64

@PostMapping("/test/upload")
public Result upload(@RequestParam(name="id") String id,
                     @RequestParam("files")MultipartFile [] files,
                     @RequestParam("base64Arr")List <String> base64Arr){
}

前端传参代码：

//js中定义
export const deleteById= data =>
    request ({
        url:"/test/deleteById",
        method:"get",
        params:data //这里放参数
        //...省略
})


export const upload= data =>
    request ({
        url:"/test/upload",
        method:"post",
        data:data //这里放参数
        //...省略
})

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

dataForm:{
    userName:'',
    userId:'',
    fileList:[],
    base64Arr:[],
}

var param = {id:this.dataForm.userId}
var tick = deleteById(param)
tick.then(({code,message,data})=>{


})


//上传文件的时候 参数组装

let formData = new FormData();
formData.append("id",this.dataForm.userId);

// 后端 ：@RequestParam("files")MultipartFile [] files,  

this.dataForm.fileList.forEach(file=>{
    formData.append("files",file.raw); //这个是el-upload上传的
})

// 后端 ：@RequestParam("base64Arr")List <String> base64Arr
this.dataForm.base64Arr.forEach(item =>{
    formData.append("base64Arr",item); 
})

var tick = upload(formData)
tick.then(({code,message,data})=>{


})

场景四：@RequestBody @RequestParam混合

后端接口方法示例如下：

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

}

前端传参代码：

下面就是@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'){

    }
})