最近我在一個(gè)項(xiàng)目中選擇了Vue ElementUI作為前端框架，后端使用了Springboot和MSSQL。在開發(fā)過程中，遇到了一個(gè)問題：前端日期范圍控件傳入后端的時(shí)間是UTC時(shí)間，與我們所在的東八區(qū)

最近我在一個(gè)項(xiàng)目中選擇了Vue ElementUI作為前端框架，后端使用了Springboot和MSSQL。在開發(fā)過程中，遇到了一個(gè)問題：前端日期范圍控件傳入后端的時(shí)間是UTC時(shí)間，與我們所在的東八區(qū)相差8個(gè)小時(shí)。今天我來分享一下我是如何解決這個(gè)問題的，希望對(duì)大家有所幫助。

問題描述

當(dāng)我點(diǎn)擊日期控件并選擇日期范圍后，然后進(jìn)行搜索操作，通過F12查看網(wǎng)絡(luò)請(qǐng)求時(shí)，我發(fā)現(xiàn)控件自動(dòng)將日期修改為UTC時(shí)間。而我們所在的東八區(qū)與UTC時(shí)間恰好相差8個(gè)小時(shí)。

前端代碼

我的前端代碼如圖所示，日期范圍被封裝在一個(gè)數(shù)組`complainPeriod`中，并沒有特殊處理。

后端處理

通過調(diào)用后端接口時(shí)，也沒有添加其他特殊處理。在Springboot的REST接口中，我將`complainPeriod`接收為一個(gè)字符串?dāng)?shù)組，然后通過格式轉(zhuǎn)換為`LocalDateTime`類型，再傳入SQL查詢語句的`between and`條件中。

問題分析

在這里出現(xiàn)的問題是，`LocalDateTime`本身是沒有時(shí)區(qū)信息的，所以即使使用``來解析帶時(shí)區(qū)格式的日期時(shí)間，它也不會(huì)自動(dòng)轉(zhuǎn)換時(shí)區(qū)。

而我的數(shù)據(jù)庫(kù)中相關(guān)時(shí)間字段是通過`()`來設(shè)置的，沒有設(shè)置時(shí)區(qū)信息，即使用的是當(dāng)前我們所在的東八區(qū)時(shí)間。

解決方法

為了解決這個(gè)問題，我們需要使用`ZonedDateTime`來接收字符串，并將其轉(zhuǎn)換為東八區(qū)的`LocalDateTime`，然后再傳入SQL查詢語句中進(jìn)行查詢。

參考下圖，我給出兩種解決方法，都可以實(shí)現(xiàn)目的。但是我更推薦第二種方法，因?yàn)樗雍?jiǎn)潔。

通過以上的處理方法，我成功解決了Vue ElementUI Springboot日期時(shí)間時(shí)區(qū)問題。希望對(duì)大家有所幫助！如果喜歡，請(qǐng)記得點(diǎn)贊和分享哦！