前景:在开发过程中使用elementUI组件el-date-picker,将数组 [ 1672638936397, 1673243736397 ] 传给后端
一、UI插件
设置空间类型:type="datetimerange"
设置数据格式为时间戳:value-format="timestamp"
<el-date-picker
v-model="query.createDate"
:default-time="['00:00:00','23:59:59']"
type="datetimerange"
range-separator=":"
size="small"
class="date-item"
value-format="timestamp"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
二、JS / VUE 数据传输
axios数组序列化请求参数:paramsSerializer
export function userListApi(query) {
return request({
url: '/system/user/list',
method: 'get',
params: query,
paramsSerializer: params => {
return qs.stringify(params, { indices: false })
}
})
}
三、后端实体类接收请求参数
private List<Long> createDate;
四、MyBatis / MySQL处理查询格式
注意el-date-picker控件的时间戳格式是13位的
<if test="createDate !=null and createDate.size==2 ">
AND (p.create_date BETWEEN FLOOR(#{createDate[0], jdbcType=ARRAY}/1000) AND FLOOR(#{createDate[1], jdbcType=ARRAY}/1000 ))
</if>
完