axios&spring前后端分离传参规范总结 - 字母哥博客
source link: https://www.cnblogs.com/zimug/p/16538857.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前后端分离开发的场景下，开发人员的工作内容更加专注与专业，但是也产生了一些额外的沟通成本。比如：本文中为大家说明的前后端参数传递与接受方法。本文主要是面对前端使用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
}
})
字母哥博客：zimug.com
Recommend
-
54
由于公司之前是写C#的，现在要转 Java分布式 + vue,所以进行一次前后端的简单培训。 前端工具和环境： Node.js V10.15.0 Vue.js V2.5.21 yarn: V1.13.0 IDE:VScode 后端工具和环境： Maven: 3
-
43
在Vue.js 中，如果网络请求使用 axios ，并且使用了 ElementUI 库，那么一般来说，文件上传有两种不同的实现方案： 通过 Ajax 实现文件上传 通过 ElementUI 里边的 Upload 组件实现文件上传 两种方案，各有优缺点，我们
-
22
前端网络访问，主流方案就是 Ajax，Vue 也不例外，在 Vue2.0 之前，网络访问较多的采用 vue-resources，Vue2.0 之后，官方不再建议使用 vue-resources ，这个项目本身也停止维护，目前建议使用的方案是 axios。今天松哥就带大家来看看 axi...
-
44
前端网络访问，主流方案就是 Ajax，Vue 也不例外，在 Vue2.0 之前，网络访问较多的采用 vue-resources，Vue2.0 之后，官方不再建议使用 vue-resources ，这个项目本身也停止维护，目前建议使用的方案是 axios。今天松哥就带大家来看看 axios 的使用。
-
16
code小生 一个专注大前端领域的技术平台 公众号回复 Android 加入安卓技术群 前后端分离已经在慢慢走进各公司的技术栈，根据松...
-
17
作者：_Yufan<br> 来源：www.cnblogs.com/yfzhou/p/9813177.html 本文总结自实习中对项目的重构。原先项目采用 Springboot+freemarker 模版，开发过程中觉得前端逻辑写的实在恶心，后端 Controller 层还必须返回 Freemarker 模版的 ModelAndView...
-
10
温故而知新，本文为一时兴起写出，如有错误还请指正 本文后台基于SpringBoot2.5.6编写，前端基于Vue2 + axios和微信小程序JS版分别编写进行联调测试，用于理解前后端分离式开发的交互流程，如...
-
9
前后端分离开发的场景下，开发人员的工作内容更加专注与专业，但是也产生了一些额外的沟通成本。比如：本文中为大家说明的前后端参数传递与接受方法。本文主要是面对前端使用axios，后端使用Spring进行参数接...
-
7
文档内容的显示：在上一次 Spring Boot&Vue3前后端分离实战wiki知识库系统<十>--文档管理功能开发二文档管理模块还差文档的显示木有完成，所以接下来先将这块模块...
-
7
一个公司的官网，主要用来展示公司的业务相关信息，同时提供一个订单功能，需要接入在线支付服务。 最初由于只需要一个静态站点，所以直接使用 hugo 生成。部署在 AWS 的 S3 服务，然后通过 CloudFront 服务开放给外网访问。 后来出现了订单需求，一来想尝试...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK