場景
前端需要獲取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