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

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

問(wèn)題描述

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

前端代碼

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

后端處理

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

問(wèn)題分析

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

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

解決方法

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

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

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