axios post json数据springboot无法接收的解决

问题

前后端分离项目前端使用axios向后台发送post请求,传递复杂参数,springboot后台接收值均为空。
以下为前后端不分离项目的controller代码。

    @PreAuthorize("hasAuthority('system:permission:list')")
    @PostMapping("/list")
    @ResponseBody
    public Result<List<SysPermission>> list(SysPermission permission, HttpServletRequest request) {
        Long userId = AuthService.getUserId(request);
        return permissionService.selectBy(permission, userId);
    }

试过很多文章的方法,在我的环境无效或过于复杂。
用axios发送带json对象带post请求
Axios发送json数据格式post请求时springMvc无法正确接受参数
过于复杂:axios发送post请求,springMVC接收不到数据问题
我的环境

"dependencies": {
    "axios": "^0.26.1",
    "clipboard": "^2.0.11",
    "core-js": "^3.8.3",
    "element-plus": "^2.1.7",
    "js-md5": "^0.7.3",
    "nprogress": "^0.2.0",
    "register-service-worker": "^1.7.2",
    "vue": "^3.2.13",
    "vue-contextmenu": "^1.5.11",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },

解决

为保证不对已有后台代码做改动,更改前台传递参数,满足后台需要。目前查到的资料springboot后台接收&valNam1=val1&valName2=val2 类型参数(讲的不对话,请留言指正)
下面的js方法对json数据转换为上面要求的格式

/**
 * 参数处理
 * 
 *     处理后格式:&key1=value1&key2=value2
 * 
* @param {*} params 参数json格式 */
export function tansJsonParams(params) { let result = '' if(params===undefined) return result; for (const propName of Object.keys(params)) { const value = params[propName]; let part = encodeURIComponent(propName) + "="; if (value !== null && typeof (value) !== "undefined") { if (typeof value === 'object') { for (const key of Object.keys(value)) { if (value[key] !== null && typeof (value[key]) !== 'undefined') { let params = propName + '[' + key + ']'; let subPart = encodeURIComponent(params) + "="; result += subPart + encodeURIComponent(value[key]) + "&"; } } } else { result += part + encodeURIComponent(value) + "&"; } } } return result }

包装axios的post方法

  /**
   * axios的post请求。用于提交数据(新建)、包括表单提交及文件上传。
   * @param url 地址
   * @param data json参数
   */
  post(url, data) { 
    return instance({
      method: 'POST',
      url: url,
      data:   tansJsonParams(data),
    })
  }

你可能感兴趣的:(#,vue3项目实例,Vue3,SpringMVC,json,spring,boot,java,vue)