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

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

問題描述

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

前端代碼

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

后端處理

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

問題分析

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

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

解決方法

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

參考下圖，我給出兩種解決方法，都可以實現(xiàn)目的。但是我更推薦第二種方法，因為它更加簡潔。

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