乐趣区

关于java:axiosspring前后端分离传参规范总结

前后端拆散开发的场景下,开发人员的工作内容更加专一与业余,然而也产生了一些额定的沟通老本。比方:本文中为大家阐明的前后端参数传递与承受办法。本文次要是面对前端应用 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

退出移动版