SpringBoot + Vue前後分離項目回傳日期差一天(8hr)

後端 > SpringBoot > 踩坑踩坑 Vue hibernate

Created At : 2023-04-24 17:29

Count:269 Views 👀 :

踩坑紀錄

踩坑紀錄

使用SpringBoot data JPA查詢數據時發現返回的日期與MySQL資料庫中的日期差一天(8hr)
，後續解決了後台查詢數據問題後，發現響應數據回前台Vue中的日期數據也差一天(8hr)

解決方案：

查詢MySQL數據返回不一致

使用全局配置將MySQL的時區與SpringBoot的時區調成一致

spring:
datasource:
  #配置MySql時區，配置了SpringBoot全局時區後，通常不用配
  url: jdbc:mysql://localhost:3306/msystem?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Taipei
jackson:
  time-zone: Asia/Taipei #配置SpringBoot全局時區

後台響應數據到Vue中，日期不一致
- 使用Moment.js設置Vue的全局時區，具體使用方法如下：
  - 首先，安裝 Moment.js 庫。使用 npm 進行安裝
```
npm install moment-timezone
```
  - 在 Vue.js 的入口文件中（一般為 main.js），將 Moment.js 庫設置為所需的時區，並設置為全局模塊
```
import moment from 'moment-timezone';
// 設置 Moment.js 库為台北時區
moment.tz.setDefault('Asia/Taipei');
// 設置全局 moment 對象
Vue.prototype.$moment = moment;
```

轉載請注明來源，歡迎對文章中的引用來源進行考證，歡迎指出任何有錯誤或不夠清晰的表達。可以郵件至 b8954008@gmail.com