springboot REST接口PUT请求后台无法获取参数解决

前端使用vue FormData传递数据数据,后台接收时获取不到参数。

解决方法:使用JSON提交方式: Content-Type:application/json

(1)后台PUT请求接口,使用注解RequestBody接收json数据:

 @PutMapping(value = "/shareflight/{id}")
    public Object updateById(@Validated @RequestBody ShareFlightAO shareFlight, @PathVariable("id") String id) {
        if (StringUtils.isEmpty(id)) {
            return ServiceResultHelper.genResultWithFaild("主键为空", -1);
        }

        UserAO user = (UserAO) SecurityUtils.getSubject().getPrincipal();
        shareFlight.setId(id);
        shareFlight.setUpdater(user.getId());
        shareFlight.setUpdateTime(DateTimeUtil.formatDateTime(new Date()));
        return shareFlightService.saveOrUpdate(shareFlight);
    }

(2)前端service在请求头中声明使用json提交数据到后台:

//更新数据状态
function updateById(data) {
  return xAxios({
    url: '/datastatistics/api/dataservice/shareflight/' + data.get("id"),
    method: 'PUT',
    headers:{
      'Content-Type':'application/json'
    },
    data: data
  });
}

此时data还是FormData类型。

将FormData格式的数据转为json,发送请求到后台:

//formdata转为json
function formData2Json(formData) {
  var jsonData = {};
  for (var entry of formData.entries()) {
    jsonData[entry[0]] = entry[1];
  }
  return JSON.stringify(jsonData);
}

//封装请求
function xAxios(options) {
  let opts = {...options};
  opts.method = opts.method || 'GET';
  opts.data = (opts.method == 'GET' || opts.method == 'DELETE') ? null : ((opts.headers && opts.headers['Content-Type']) ? formData2Json(opts.data) : opts.data);
  opts.headers = opts.headers || {}
  opts.headers['Content-Type'] = (opts.method == 'GET' || opts.method == 'DELETE') ? null : ((opts.headers && opts.headers['Content-Type']) ||
    'application/x-www-form-urlencoded');
  let sessionId = localStorage.getItem('sessionId')
  if (sessionId) {
    if (!opts.url.match(/upload/g)) {
      opts.headers['sid'] = sessionId
    } else {
      let token = localStorage.getItem('token')
      opts.url = `${opts.url}?token=${sessionId}`
    }
  }
  return new Promise((resolve, reject) => {
    axios(opts)
      .then(respone => {})
    })
发布了70 篇原创文章 · 获赞 63 · 访问量 23万+

猜你喜欢

转载自blog.csdn.net/xiaoxiangzi520/article/details/100095177