乐趣区

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

jiezi

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

退出移动版