ElementUI中使用el-time-picker向SpringBoot传输24小时制时间参数以及数据库中怎样存储

场景

前端需要获取24小时制的时间参数并传递到后台存储到数据库。

 

 

在数据库中存储的是

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先前端使用ElemetUI的el-time-picker时间范围选择控件。

官方示例代码

<template>
  <el-time-picker
    is-range
    v-model="value1"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>
  <el-time-picker
    is-range
    arrow-control
    v-model="value2"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    placeholder="选择时间范围">
  </el-time-picker>
</template>

<script>
  export default {
    data() {
      return {
        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
      };
    }
  }
</script>

其他属性说明等参见官方文档：

https://element.eleme.cn/#/zh-CN/component/time-picker

首先在页面上添加一个el-time-picker

  

            <el-time-picker
                is-range
                format="HH:mm"
                value-format="HH:mm"
                :style="{width: '100%'}"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="至"
                clearable
                @change="changesjfw(scope.row)"
                v-model="bcglXiangXiList.sjfw"
              ></el-time-picker>

 

这个获取的时间范围绑定的model是一个String的数组，类似下面这种

sjfw: ["07:30", "07:30"],

在将这个控件的值传递给后台时传递的是上面这种String的时间数组，而我们在数据库中

存储的往往是是将这个时间分成两个，一个是开始时间一个是结束时间。

所以我们在请求后台接口时需要将此数组根据逗号取出来两个时间范围。

    bcxiangxi.dkkssj = element.sjfw[0];
    bcxiangxi.dkjssj = element.sjfw[1];

其中element就是bcglXiangXiList.sjfw传递给方法的时间范围数组，

然后bcxiangxi是在请求后台接口时新建的对象

var bcxiangxi  = {};

作为传递参数用，并且设置其两个属性为开始时间和结束时间并分别取得时间范围。

在后台接受参数时的实体类对应的两个属性

    /** 开始时间 */
    private String dkkssj;
    /** 结束时间 */
    private String dkjssj;

这样就通过post请求获取传递的两个时间范围参数。

在设计数据库时将这两个字段设置为varchar类型的。

 

 

这是在新增时将范围数组进行拆分，如果是在编辑时需要对控件进行赋值

            bcxiangxi.sjfw = new Array();
            bcxiangxi.sjfw[0] = item.dkkssj;
            bcxiangxi.sjfw[1] = item.dkjssj;

接可以通过这种将连个拼接的形式将后台传递的两个范围字符串拼接成字符串数组，进而赋值给

控件对应的data