首页 > 其他分享 >解决前端传递Date类型时自动转换为国际时间的问题

解决前端传递Date类型时自动转换为国际时间的问题

时间:2023-10-11 10:24:14浏览次数:40  
标签:前端 传递 date JSON 类型 Date 时区 toJSON

本质原因是前端对象中使用了Data类型的属性字段,在向后端传递时会自动将JSON对象转换为JSON字符串进行传递
Date类型的属性在进行转换时会调用自身的toJSON方法,转换为国际时间的字符串表达形式

let date = new Date();
console.log(date);
console.log(JSON.stringify(date));

image

导致的问题在于后端,如果后端使用带有时区的类型进行接收的话,将其转换为本地时区的时间,那么系统不会产生问题。例如C#中使用DatetimeOffset进行接收
如果使用不带有时区的类型进行接收,那么时区的参数将会丢失,这可能导致时间并不是准确的,例如C#使用DateTime来接收带有时区的前端时间字符串
此时前后端需要进行协商如何处理前后端时间传递的问题,下面贴出前端的处理办法,重写Date类型原型链的toJSON方法,使其输出为本地时区的表达类型字符串

/*
 * 重写Date的toJSON方法,因为在调用JSON.stringify的时候,时间转换就调用的toJSON,这样会导致少8个小时,所以重写它的toJSON方法
 */
Date.prototype.toJSON = function () {
  return this.toISOString().split('T')[0] + ' ' + this.toTimeString().split(' ')[0]
}

let date = new Date();
console.log(JSON.stringify(date))

标签:前端,传递,date,JSON,类型,Date,时区,toJSON
From: https://www.cnblogs.com/fanqisoft/p/17756428.html

相关文章

  • What causes "Invalid Address specified to RtlValidateHeap"?
    ForumVisualC++&C++ProgrammingVisualC++ProgrammingWhatcauses"InvalidAddressspecifiedtoRtlValidateHeap"?Ifthisisyourfirstvisit,besuretocheckoutthe FAQ byclickingthelinkabove.Youmayhaveto register or Login ......
  • electron+vue3+electron-updater 实现程序更新
    electron+vue3+edge调用C#.dll文件electron-edge-js用这玩意儿我血压高.....血压高的谨慎食用…文章目录electron+vue3+electron-edge-js调用C#.dll文件起步一、创建Vue3项目(ele)二、Vue3项目中添加electron模块1.添加electron-edge-js模块......
  • 前端如何实现大文件上传
    在开发过程中,经常会遇到一些较大文件上传,如果只使用一次请求去上传文件,一旦这次请求中出现什么问题,那么无论这次上传了多少文件,都会失去效果,用户则需要重新上传所有资源。所以就想到一种方式,将一个大文件分成多个小文件,这样通过多个请求实现大文件上传。接下来我们就来看看具体......
  • vconsole 前端调试神器,h5页面调试工具
    npminstallvconsole在需要的页面引入,并初始化<script> importVconsolefrom'vconsole'; exportdefault{ created(){ letvConsole=newVconsole(); } }</script>先安装vconsole组件,然后vue页面调用即可,注意一定要放在created方法里面。否则......
  • 前端网页sessionStorage对值的获取与传值
    前端网页sessionStorage对值的获取与传值sessionStorage主要在页面之间进行值得传输·允许跨页面。可以是单个值,以及JSON对象的传递,主要方法有这些sessionStorage[key]=val//保存一个数据sessionStorage.setItem(key,val)//保存一个数据varval=sessionStorage[key]//读取一个数......
  • 前端讲义10_HTTP Request header
    前端讲义10_HTTPRequestheader把Requestheader进行分类,比较清晰记忆。监控打开URLhttps://blog.csdn.net/msh2016Cache头域If-Modified-Since作用:把浏览器端缓存页面的最后修改时间发送到服务器去,服务器会把这个时间与服务器上实际文件的最后修改时间进行对比。......
  • pydantic学习与使用-17.使用 json_encoders 格式化 datetime 类型
    前言使用datetime日期类型时,想格式化成自定义的"%Y-%m-%d%H:%M:%S"格式datetime类型frompydanticimportBaseModelfromdatetimeimportdatetime#上海悠悠wx:283340479#blog:https://www.cnblogs.com/yoyoketang/classUserInfo(BaseModel):id:intna......
  • 前端大文件上传方法
    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大,或者网络条件不好时,上传的时间会......
  • 前端面试八股文 工程化+性能优化+计算机基础
    前端面试八股文工程化+性能优化+计算机基础前端页面性能如何优化?以下是一些前端性能优化的常用方法:减少资源加载时间:这可以通过多种方式实现,比如压缩和合并CSS和JavaScript文件,使用CDN(内容分发网络)来快速传输资源,以及使用浏览器缓存来避免重复下载。优化图片:图片通常是网页......
  • 前端面试八股文 Vue
    前端面试八股文Vue讲一下Vue框架的原理?我们使用Vue开发应用,实际上是编写若干Vue组件,实现模板、data、生命周期钩子等,然后执行newVue(),将根组件挂载到指定的DOM节点上面,当我们编写的组件中生命周期钩子里面的或者在模板的元素事件中改变数据时候,视图会响应地更新。这样就实现了......