vue传数组参数给java后端_vue传给后端list的参数

前景：在开发过程中使用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>

完