前后端拆散开发的场景下，开发人员的工作内容更加专一与业余，然而也产生了一些额定的沟通老本。比方：本文中为大家阐明的前后端参数传递与承受办法。本文次要是面对前端应用axios，后端应用Spring进行参数承受的状况进行阐明。在应用spring的时候，与前端配合开发，容易呈现传参歧义的2个注解是
@RequestParam注解，默认接管Content-Type: application/x-www-form-urlencoded编码格局的数据@RequestBody注解，默认接管JSON类型格局的数据。
很多的文章列举出参数传递失败的问题解决方案，在我看来都不够全面。在此我给大家总结一下
一、@RequestParam注解对应的axios传参办法
以上面的这段Spring java代码为例，接口应用POST协定，须要承受的参数别离是tsCode、indexCols、table。针对这个Spring的HTTP接口，axios该如何传参？有几种办法？咱们来一一介绍。
@PostMapping("/line")public List<? extends BaseEntity> commonEChart(@RequestParam String tsCode, @RequestParam String indexCols, @RequestParam String table){1.1.params传参(举荐)
应用axios实例的params进行传参，就会将params参数格式化为x-www-form-urlencoded的格局，与后端参数一一对应即可传参胜利。这也是我向大家举荐的传参办法！
return request({ url: '/chart/line', method: 'post', params: { //留神这里的key是params tsCode, indexCols, table }})1.2.FormData传参
还能够应用js的FormData对象进行参数格式化，同样能够在Spring后端正确的应用@RequestParam注解进行参数接管。
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传参
还能够应用qs.stringfy进行参数格式化，同样能够在Spring后端正确的应用@RequestParam注解进行参数接管。
import qs from "qs";return request({ url: '/chart/line', method: 'post', data: qs.stringify({ //留神这里的key是data tsCode, indexCols, table })})须要留神的是应用这种办法，须要手动设置header(Content-Type)
const service = axios.create({ headers: { "Content-Type": "application/x-www-form-urlencoded" }});二、@RequestBody的axios传参办法
java代码局部如下所示，DemoModel类是一个实体类，蕴含名称tsCode,indexCols,table三个字符串成员变量。接管到的JSON格局参数会主动为demo对象的成员变量赋值。
@PostMapping("/line")public List<? extends BaseEntity> commonEChart(@RequestBody DemoModel demo){@RequestBody注解，默认接管JSON类型格局的数据。在axios中默认data传参就会默认应用JSON数据格式，所以不必额定的非凡解决。
return request({ url: '/chart/line', method: 'post', data: { //留神这里的key是data tsCode, indexCols, table }})欢送关注我的布告号：字母哥杂谈，回复003赠送本文所在专栏《docker修炼之道》的PDF版本，30余篇精品docker文章。字母哥博客：zimug.com