Axios POST：body与RequestParam的区别与应用

"本文档主要探讨了在使用Axios进行POST请求时，如何有效地利用`@RequestBody`和`@RequestParam`两种参数接收方法，以及如何根据数据类型的不同来设置请求头的`Content-Type`。首先，理解`@RequestParam`主要是用于处理HTTP请求头中的参数，当Content-Type设置为`application/x-www-form-urlencoded`时，它适用于表单数据的提交。而`@RequestBody`则用于处理请求体中的参数，通常与JSON格式的数据一起使用，因为它的Content-Type默认为`application/json`。 1. 常规的POST请求，数据作为对象传递： 当我们使用JavaScript的axios库发送POST请求，通常会将参数直接放在`data`对象中，例如： ```javascript axios.post('/user', { username: 'Fred', pwd: 'Flintstone' }).then(() => {}) ``` 这种情况下，后端需要通过`@RequestBody`接收一个映射到实体类的对象。 2. 数据作为JSON格式传递： 如果需要发送JSON格式的数据，我们需要设置`Content-Type`为`application/json`： ```javascript this.$axios({ url: '/user/login', method: 'post', headers: { 'Content-Type': 'application/json;charset=UTF-8' // 可以省略，axios默认值 }, data: { username: this.name, pwd: this.pwd } }).then(() => {}) ``` 后端需使用`@RequestBody`来解析JSON内容。 3. 表单数据以`application/x-www-form-urlencoded`格式传递： 对于表单数据，可以使用`FormData`对象或直接对象配合`Content-Type`设置为`application/x-www-form-urlencoded`： ```javascript this.$axios({ url: '/user/login', method: 'post', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: { username: this.name, pwd: this.pwd } }).then(() => {}) ``` 或者使用`FormData`: ```javascript let formData = new FormData() formData.append('username', this.name) formData.append('pwd', this.pwd) axios.post('/user/login', formData).then(() => {}) ``` 这种情况下，后端需要使用`@RequestParam`来接收每个单独的表单字段。 总结起来，选择`@RequestBody`还是`@RequestParam`取决于数据的格式和发送方式，合理配置`Content-Type`是关键，以便后端正确地解析请求内容。"