What is the parameter passing specification for Java axios and spring front-end and back-end separation?

1. The axios parameter transfer method corresponding to the @RequestParam annotation

Take the following Spring java code as an example. The interface uses the POST protocol, and the parameters that need to be accepted are tsCode, indexCols, and table. For this Spring HTTP interface, how should axios pass parameters? How many methods are there? Let’s introduce them one by one.

@PostMapping("/line")
public List<? extends BaseEntity> commonEChart(@RequestParam String tsCode,
                                     @RequestParam String indexCols,
                                     @RequestParam String table){

1.1.params parameter passing (recommended)

Use the params of the axios instance to pass parameters, the params parameters will be formatted into the x-www-form-urlencoded format, and then If the end parameters correspond one to one, the parameter transfer can be successful. This is also the method of passing parameters that I recommend to everyone!

return request({
    url: '/chart/line',
    method: 'post',
    params: {   //注意这里的key是params
        tsCode,
        indexCols,
        table
    }
})

1.2.FormData parameter passing

You can also use the FormData object of js for parameter formatting, and you can also correctly use the @RequestParam annotation on the Spring backend for parameters. take over.

let params = new FormData();
params.append('tsCode', tsCode);
params.append('indexCols', indexCols);
params.append('table', table);
return request({
    url: '/chart/line',
    method: 'post',
    data: params   //注意这里的key是data
})

1.3.qs.stringfy parameter passing

You can also use qs.stringfy for parameter formatting, which can also be used correctly in the Spring backend@ RequestParam annotation receives parameters.

import qs from "qs";

return request({
    url: '/chart/line',
    method: 'post',
    data: qs.stringify({    //注意这里的key是data
        tsCode,
        indexCols,
        table
    })
})

It should be noted that using this method, you need to manually set the header (Content-Type)

const service = axios.create({
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    }
});

2. @RequestBody’s axios parameter passing method

java code part As shown below, the DemoModel class is an entity class and contains three string member variables named tsCode, indexCols, and table. The received JSON format parameters will automatically assign values ​​to the member variables of the demo object.

@PostMapping("/line")
public List<? extends BaseEntity> commonEChart(@RequestBody DemoModel demo){

@RequestBody Annotation, receiving data in JSON format by default. In axios, the default data parameter passing will use JSON data format by default, so no additional special processing is required.

return request({
    url: '/chart/line',
    method: 'post',
    data: {    //注意这里的key是data
        tsCode,
        indexCols,
        table
    }
})

The above is the detailed content of What is the parameter passing specification for Java axios and spring front-end and back-end separation?. For more information, please follow other related articles on the PHP Chinese website!