Axios&spring front-end and back-end separation parameter specification summary

In the scenario where the front-end and back-end are developed separately, the developer's work content is more focused and professional, but some additional communication costs are also incurred. For example: the front-end and back-end parameter transmission and reception methods explained in this article. This article mainly describes the situation where axios is used in the front end and Spring is used in the back end for parameter acceptance. When using spring and developing with the front end, two annotations that are prone to ambiguity are:

• @RequestParam annotation, default received Content-Type: application/x-www-form-urlencoded encoded data
• @RequestBody Annotation, which receives data in JSON format by default.

Many articles list the solution to the problem of parameter passing failure, which is not comprehensive enough in my opinion. Here I will summarize for you

1. @RequestParam Annotation corresponding to the axios parameter transfer method

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 ways 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 (recommended)

Using the params of the axios instance to pass parameters, the params parameters will be formatted in the format of x-www-form-urlencoded, and the parameters can be successfully passed in one-to-one correspondence with the back-end parameters. This is the method I recommend to everyone!

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

1.2.FormData parameter

You can also use the FormData object of js for parameter formatting, and you can also correctly use the @RequestParam annotation in the Spring backend to receive parameters.

 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 passing parameters

You can also use qs.stringfy for parameter formatting, and you can also use the @RequestParam annotation correctly in the Spring backend for parameter reception.

 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. The axios parameter transfer method of @RequestBody

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

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

@RequestBody Annotation, data in JSON format is received by default. In axios, the default data parameter will use the 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
    }
})

Welcome to pay attention to my announcement number: Antetokounmpo, reply 003 and present the PDF version of the column "The Way of Docker Cultivation" where this article is located, and more than 30 excellent docker articles. Antetokounmpo Blog: zimug.com