場(chǎng)景

前端需要獲取24小時(shí)制的時(shí)間參數(shù)并傳遞到后臺(tái)存儲(chǔ)到數(shù)據(jù)庫(kù)。

?

在數(shù)據(jù)庫(kù)中存儲(chǔ)的是

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

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

官方示例代碼

<template><el-time-pickeris-rangev-model="value1"range-separator="至"start-placeholder="開(kāi)始時(shí)間"end-placeholder="結(jié)束時(shí)間"placeholder="選擇時(shí)間范圍"></el-time-picker><el-time-pickeris-rangearrow-controlv-model="value2"range-separator="至"start-placeholder="開(kāi)始時(shí)間"end-placeholder="結(jié)束時(shí)間"placeholder="選擇時(shí)間范圍"></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>

其他屬性說(shuō)明等參見(jiàn)官方文檔：

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

首先在頁(yè)面上添加一個(gè)el-time-picker

????????????? <el-time-pickeris-rangeformat="HH:mm"value-format="HH:mm":style="{width: '100%'}"start-placeholder="開(kāi)始時(shí)間"end-placeholder="結(jié)束時(shí)間"range-separator="至"clearable@change="changesjfw(scope.row)"v-model="bcglXiangXiList.sjfw"></el-time-picker>

這個(gè)獲取的時(shí)間范圍綁定的model是一個(gè)String的數(shù)組，類似下面這種

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

在將這個(gè)控件的值傳遞給后臺(tái)時(shí)傳遞的是上面這種String的時(shí)間數(shù)組，而我們?cè)跀?shù)據(jù)庫(kù)中

存儲(chǔ)的往往是是將這個(gè)時(shí)間分成兩個(gè)，一個(gè)是開(kāi)始時(shí)間一個(gè)是結(jié)束時(shí)間。

所以我們?cè)谡?qǐng)求后臺(tái)接口時(shí)需要將此數(shù)組根據(jù)逗號(hào)取出來(lái)兩個(gè)時(shí)間范圍。

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

其中element就是bcglXiangXiList.sjfw傳遞給方法的時(shí)間范圍數(shù)組，

然后bcxiangxi是在請(qǐng)求后臺(tái)接口時(shí)新建的對(duì)象

var bcxiangxi? = {};

作為傳遞參數(shù)用，并且設(shè)置其兩個(gè)屬性為開(kāi)始時(shí)間和結(jié)束時(shí)間并分別取得時(shí)間范圍。

在后臺(tái)接受參數(shù)時(shí)的實(shí)體類對(duì)應(yīng)的兩個(gè)屬性

??? /** 開(kāi)始時(shí)間 */private String dkkssj;/** 結(jié)束時(shí)間 */private String dkjssj;

這樣就通過(guò)post請(qǐng)求獲取傳遞的兩個(gè)時(shí)間范圍參數(shù)。

在設(shè)計(jì)數(shù)據(jù)庫(kù)時(shí)將這兩個(gè)字段設(shè)置為varchar類型的。

?

這是在新增時(shí)將范圍數(shù)組進(jìn)行拆分，如果是在編輯時(shí)需要對(duì)控件進(jìn)行賦值

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

接可以通過(guò)這種將連個(gè)拼接的形式將后臺(tái)傳遞的兩個(gè)范圍字符串拼接成字符串?dāng)?shù)組，進(jìn)而賦值給

控件對(duì)應(yīng)的data

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。