Explain in detail the four kinds of parameters passed by axios, and the backend receives parameters

Method 1. Send json data to the background through the data field (use "," to send data)

//格式：axios.delete(服务器链接,{data:{键:值}}）

axios.delete("/delete" , {data:{aid:row.aid}}).then(resp => {
    let resultInfo = resp.data;
    
})

Data sent by the front-end browser

backend reference

Use @RequestBody to specify that the parameter received is in json format, and then the parameter type is Map type , and the data is retrieved through the key of the map.

/* 格式:
		@DeleteMapping("/delete")
		@RequestBody Map<String,前端发送的值的数据类型> 形参名
*/

@DeleteMapping("/delete")
public ResultInfo delete(@RequestBody Map<String,Object> params) {
    System.out.println(params.get("aid"));
    return new ResultInfo(true);
}

Data received by the backend server: {aid=11}

Method 2: Send the json data to the background through the params field (use "," to send the data), which is actually splicing on the URL.

// 格式：axios.delete(服务器链接,{params:{键:值}}）

axios.delete("/delete" , {params:{aid:row.aid}}).then(resp => {
    let resultInfo = resp.data;
    
})

Data sent by the front-end browser

The backend receives:

Use @RequestBody to specify that the parameters received are in json format, and then the parameters can be automatically matched by name .

@DeleteMapping("/delete")
public ResultInfo delete(Integer aid) {
	System.out.println(aid);
    return new ResultInfo(true);
}

If the parameter name is inconsistent , use @RequestParam("parameter name passed from the front end") to match

@DeleteMapping("/delete")
public ResultInfo delete(@RequestParam("aid") Integer aaid) {
    System.out.println(aaid);
    return new ResultInfo(true);
}

Data received by the backend server: 107

Method 3. Splice data directly on the address bar, and must add "/" before splicing

//格式：axios.delete("/服务器链接/"+值）

axios.delete("/delete/"+row.aid).then(resp => {
    let resultInfo = resp.data;
    if (resultInfo.success) {
        this.$message({
            type: 'success',
            message: resultInfo.message
        });
    }
})

client

Backend Receive (Server)

// 通过在 /{参数名} 得到访问方法，然后取值用@PathVariable("参数名")

@DeleteMapping("/delete/{aid}")
public ResultInfo delete(@PathVariable("aid") Integer aid) {
    System.out.println(aid);
    return new ResultInfo(true);
}

Method 4. Traditional method? Parameter name = parameter value

axios.delete("/delete?aid="+row.aid).then(resp => {
    let resultInfo = resp.data;
})

The server receives it directly and matches by name . If the names are inconsistent, use @RequestParam to match

@DeleteMapping("/delete")
public ResultInfo delete(Integer aid) {
    System.out.println(aid);
    return new ResultInfo(true);
}