若依框架中GET方式传参时无法接收日期格式参数
若依框架中GET方式传参时无法接收日期格式参数前台:<el-form-item label="创建时间"><el-date-pickerv-model="createTimeRange"size="small"style="width: 240px"format="yyyy-MM-dd"type="daterange"range-separator="至"start-placeh
若依框架中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;
...
}
出现的问题:
后台参数接收不到createStartTime
和createEndTime
两个参数
查看请求携带参数发现:
pageNum: 1
pageSize: 10
type: 0
并没有把createStartTIme
和createEndTime
带进请求参数里
查看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,则加到路径后面;否则又会再次对它的键值对进行迭代添加。
而typeof
对Date
类型返回的结果是Object,而它没有键值对,所以进不了迭代添加的方法,也就加入不到请求参数里面。
所以最后的请求参数就只有:pagenum
、pagesize
、type
这几个了。
解决方法:
传递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类型
更多推荐
所有评论(0)