若依框架中GET方式传参时无法接收日期格式参数

前台:

<el-form-item label="创建时间">
  <el-date-picker
    v-model="createTimeRange"
    size="small"
    style="width: 240px"
    format="yyyy-MM-dd"
    type="daterange"
    range-separator=""
    start-placeholder="开始时间"
    end-placeholder="结束时间"
  >
  </el-date-picker>
</el-form-item>

js:

watch: {
 createTimeRange: {
   handler(newDate) {
     if(newDate && (newDate[0] instanceof Date)  && (newDate[1] instanceof Date)) {
       // 请假开始时间、结束时间
       this.form.createStartTime = newDate[0];
       this.form.createEndTime = newDate[1];
     }
   }
 }

// 调用若依封装的request请求
export function listLeave(query) {
  return request({
    url: '/workflow/business/leave/list',
    method: 'get',
    params: query
  })
}

附上前台的请求参数即query:

createEndTime: Wed Nov 10 2021 00:00:00 GMT+0800 (中国标准时间) {}
createStartTime: Mon Nov 01 2021 00:00:00 GMT+0800 (中国标准时间) {}
pageNum: 1
pageSize: 10
type: undefined

后台controller代码:

@GetMapping("/list")
public TableDataInfo list(LeaveReq leaveReq) throws Exception {
    startPage();
    List<LeaveEntity> leaveEntities = leaveService.selectLeaveEntityList(leaveReq);
    return getDataTable(leaveEntities);
}

public class LeaveReq implements Serializable {
    private static final long serialVersionUID = 1L;

    /**
     * 请假类型
     */
    private Integer type;

    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date createStartTime;

    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date createEndTime;
	...
}

出现的问题:
后台参数接收不到createStartTimecreateEndTime两个参数
查看请求携带参数发现:

pageNum: 1
pageSize: 10
type: 0
并没有把createStartTImecreateEndTime带进请求参数里

查看request.js

// request拦截器
service.interceptors.request.use(config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
  }
  // get请求映射params参数
  if (config.method === 'get' && config.params) {
    let url = config.url + '?';
    for (const propName of Object.keys(config.params)) {
      const value = config.params[propName];
      var 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) + '=';
              url += subPart + encodeURIComponent(value[key]) + '&';
            }
          }
        } else {
          url += part + encodeURIComponent(value) + "&";
        }
      }
    }
    url = url.slice(0, -1);
    config.params = {};
    config.url = url;
  }
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

发现原因:
在进参数之后会对里面携带的每个参数进行类型判定,如果不是object,则加到路径后面;否则又会再次对它的键值对进行迭代添加。
typeofDate类型返回的结果是Object,而它没有键值对,所以进不了迭代添加的方法,也就加入不到请求参数里面。
所以最后的请求参数就只有:pagenumpagesizetype这几个了。

解决方法:
传递String类型的日期参数,修改前台即可

前台:

<el-form-item label="创建时间">
  <el-date-picker
    v-model="createTimeRange"
    size="small"
    style="width: 240px"
    value-format="yyyy-MM-dd"
    type="daterange"
    range-separator=""
    start-placeholder="开始时间"
    end-placeholder="结束时间"
  >
  </el-date-picker>
</el-form-item>
watch: {
  createTimeRange: {
    handler(newDate) {
      if (newDate) {
        this.queryParams.createStartTime = newDate[0];
        this.queryParams.createEndTime = newDate[1];
      }
    }
  }
}

最后的携带参数:

createEndTime: “2021-11-17”
createStartTime: “2021-11-01”
pageNum: 1
pageSize: 10
type: undefined

后台不用改,因为后台会自动转换成Date类型

Logo

快速构建 Web 应用程序

更多推荐