場景

前端需要獲取24小時制的時間參數并傳遞到后臺存儲到數據庫。

?

在數據庫中存儲的是

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先前端使用ElemetUI的el-time-picker時間范圍選擇控件。

官方示例代碼

<template><el-time-pickeris-rangev-model="value1"range-separator="至"start-placeholder="開始時間"end-placeholder="結束時間"placeholder="選擇時間范圍"></el-time-picker><el-time-pickeris-rangearrow-controlv-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-pickeris-rangeformat="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

總結

以上是生活随笔為你收集整理的ElementUI中使用el-time-picker向SpringBoot传输24小时制时间参数以及数据库中怎样存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。