vue axios和springMVC傳遞數組引發的問題

背景需求

給賬號添加角色，前臺傳遞賬號id和角色id數組，後臺接收數據處理

成功調通方式

前臺傳遞賬號id和角色id數組

export function updateRole(params) {
  return request({
    url:'/admin/role/update',
    method:'post',
    params:{
          adminId: 3,
          roleIds: [1,2,4]
        }
  })
}

request爲封裝的模塊，指定了基本路徑，超時時間，攔截器等內容。其他爲默認項
攔截器處理數組

// request攔截器
service.interceptors.request.use(config => {
  //對get和post方式進行序列化,優化傳遞數組參數
  if (config.method === 'get' || config.method === 'post') {
    config.paramsSerializer = function(params) {
      return qs.stringify(params, { arrayFormat: 'repeat' })
    }
  }
  return config
}, error => {
  // Do something with request error
  console.log(error) // for debug
  Promise.reject(error)
})

發出的請求爲

/role/update?adminId=3&roleIds=1&roleIds=2&roleIds=4

後臺接收

 @RequestMapping(value = "/role/update", method = RequestMethod.POST)
    @ResponseBody
    public CommonResult updateRole(@RequestParam(value = "adminId") Long adminId,
                                   @RequestParam("roleIds") List<Long> roleIds) {
       	...
    }

過程中出現的問題

1、參數不在url中，放在post傳遞的對象中

export function updateRole(data) {
  return request({
    url:'/admin/role/update',
    method:'post',
    data:{
          adminId: 3,
          roleIds: [1,2,4]
        }
  })
}

發出的請求爲

/role/update

參數爲

{“adminId”:3,“roleIds”:[1,2,4]}

產生問題 Required Long parameter ‘adminId’ is not present

由於axios請求默認爲Content-Type: application/json，後臺使用@RequestParam會讀取url中參數，故而找不到

2、將後臺接收參數註解改爲@RequestBody

 @RequestMapping(value = "/role/update", method = RequestMethod.POST)
    @ResponseBody
    public CommonResult updateRole(@RequestBody Long adminId,
                                   @RequestBody List<Long> roleIds) {
       	...
    }

產生問題 JSON parse error: Cannot deserialize instance of java.lang.Long out of START_OBJECT token; nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize instance of java.lang.Long out of START_OBJECT token↵ at [Source: (PushbackInputStream); line: 1, column: 1]

無法接收參數，@RequestBody是接收post傳遞的所有參數，這裏想拆分成兩個必然報錯，可以嘗試接收爲map，封裝成對象，或者String，然後再進行處理，可參考https://segmentfault.com/q/1010000018572906

3、前臺使用url傳參，後臺用@RequestParam接收，與最上方結果代碼接近，axios攔截器沒有處理數組

發送請求爲

/role/update?adminId=3&roleIds[]=1&roleIds[]=2&roleIds[]=4

產生問題 @RequestParam(“roleIds”)無法獲取參數

4、修改@RequestParam(“roleIds”)爲@RequestParam("roleIds[]")

產生問題 @RequestParam The valid characters are defined in RFC 7230 and RFC 3986

新版本tomcat中 [] 爲保留字符，不能用於url傳參,可修改tomcat配置解決，我這邊是springboot內置tomcat，沒有嘗試這種方式，選擇修改傳參。

5、修改axios攔截器，使用qz處理數組

代碼爲開頭部分攔截器代碼

需要注意arrayFormat取值不同產生不同效果，可參考qs的arrayFormat與SpringBoot接收數組問題

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘})
//形式： ids[0]=1&ids[1]=2&ids[2]=3

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘})
//形式：ids[]=1&ids[]=2&ids[]=3

qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat‘})
//形式： ids=1&ids=2&id=3