前端如何在没有后端配合的情况下获取服务器时间?

现在有一个需求,前端需要同步服务器的时间,因为前端的时间是不可靠的,解决方案有很多,但是不管什么方案,都是需要和服务端进行交互,那么怎么减轻后端的工作量直接实现呢?

HTTP Header 中的 Date

HTTP Header 中有一个字段叫做 Date,它的格式是 RFC 1123,也就是 Fri, 30 Sep 2022 02:30:19 GMT,这个时间是服务器的时间,我们可以直接从 HTTP Header 中获取这个时间,然后前端直接使用这个时间即可。

打开控制台,查看一下请求的 HTTP Header,可以看到 Date 字段,这个就是服务器的时间:

这里有一个细节,可以看到这个时间的结尾有GMT的字母,代表这个时间是 GMT 时间,也就是格林威治时间,我们需要将这个时间转换成本地时间,因为我们前端的时间是本地时间,如果不转换,那么前端的时间就会和服务器的时间不一致。

如上图,带了GMT的后缀的时间是ok的,不带的就需要转换了。

本地时间和 GMT 时间

我们知道,本地时间和 GMT 时间是有区别的,比如北京时间和 GMT 时间的区别是 8 小时,那么我们如何获取本地时间和 GMT 时间的区别呢?

const date = new Date()
const offset = date.getTimezoneOffset() // 480 

这里的offset就是本地时间和 GMT 时间的区别,单位是分钟,如果是北京时间,那么offset就是 480,如果是东京时间,那么offset就是 540。

本地时间和 GMT 时间的转换

我们知道了本地时间和 GMT 时间的区别,那么我们就可以将 GMT 时间转换成本地时间了,这里有一个小技巧,我们可以直接使用new Date()来转换,因为new Date()可以接受GMT格式的时间,然后会自动转换成本地时间。

const date = new Date('Fri, 30 Sep 2022 02:30:19 GMT')
console.log(date) // Fri Sep 30 2022 10:30:19 GMT+0800 (中国标准时间) 

这里我们可以看到,new Date()接受了GMT格式的时间,然后自动转换成了本地时间。

前端实现

现在我们已经知道了如何获取服务器的时间,以及如何将 GMT 时间转换成本地时间,那么我们就可以实现前端获取服务器时间了。

axios.head('https://www.baidu.com?_=' + new Date().getTime()).then(res => {const date = new Date(res.headers.date)console.log(date) // Fri Sep 30 2022 10:30:19 GMT+0800 (中国标准时间)
}) 

这里使用axios发送一个head请求,然后获取Date字段,然后转换成本地时间,这样就可以获取到服务器的时间了,加时间戳是为了防止浏览器缓存。

优化

上面的代码是可以正常工作的,但是有一个问题,就是每次都要发送一个head请求,这样会增加服务器的压力,所以我们可以优化一下,比如我们可以在页面加载的时候就获取服务器的时间,然后每隔一段时间再获取一次,这样就可以减少服务器的压力了。

let date = new Date()
function getServerTime() {setTimeout(() => {axios.head('https://www.baidu.com?_=' + new Date().getTime()).then(res => {date = new Date(res.headers.date)console.log(date) // Fri Sep 30 2022 10:30:19 GMT+0800 (中国标准时间)}).finally(() => {getServerTime()})}, 1000 * 60 * 5)
}
getServerTime()

function timeStep(time) {date.setTime(date.getTime() + time)setTimeout(() => {timeStep(time)}, time)
}
timeStep(1000); 

这里我们使用setTimeout来模拟服务器的时间,然后每隔一段时间就获取一次服务器的时间,这样就可以减少服务器的压力了。

总结

没啥好总结的,就是获取服务器的时间,然后转换成本地时间,然后模拟服务器的时间,这样就可以实现前端获取服务器时间了。

最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 为了搭建一个网站前端框架和后端的管理系统,可以使用前端框架如React、Vue或Angular,而后端的管理系统可以使用Node.js或PHP来构建,可以使用RESTful API和JSON来连接前后端。另外,为了让前端后端更好的协作,可以使用数据库系统(如MySQL)来存储、管理和处理数据。 ### 回答2: 搭建一个完整的网站需要考虑前端框架和后端管理系统的配合使用。下面是一个简单的搭建过程及配合使用的方式。 第一步:选择前端框架 首先,根据项目需求选择合适的前端框架,常用的有React、Vue、Angular等。然后,通过npm或者yarn等包管理工具安装前端框架,并创建一个新的项目。 第二步:搭建前端页面 在前端项目中,根据设计稿进行页面布局和样式设计,引入合适的UI组件库,编写页面的HTML、CSS和JavaScript代码。使用前端框架的组件和路由功能,实现页面的模块化和动态路由。 第三步:选择后端管理系统 根据项目需求选择合适的后端管理系统,比如Django、Laravel、Spring Boot等。后端管理系统可以提供用户认证、权限管理、数据管理等功能。 第四步:设计数据库 在后端管理系统中,设计数据库结构并创建数据库表,定义表之间的关系。使用ORM工具,如Django的ORM,操作数据库,实现数据的增删改查。 第五步:实现前后端的数据交互 通过前端框架的网络请求功能,与后端管理系统进行数据交互。前端发送请求并接收后端返回的数据,并根据需要进行展示或者修改。 第六步:前后端联调和测试 在开发过程中,前后端需要联调和测试,确保前端后端的功能可以正常配合使用和交互。 第七步:部署网站 完成开发和测试后,将前端代码和后端管理系统部署到服务器上。前端代码可以使用静态文件服务器进行部署,后端管理系统可以使用Web服务器进行部署。 总结:搭建一个网站前端框架和后端管理系统需要确保两者之间的配合使用。前端负责页面的展示和交互,后端负责处理数据和逻辑。通过前后端的数据交互,实现网站的功能和需求。 ### 回答3: 搭建一个网站前端框架和后端的管理系统,可以通过以下步骤进行: 1. 做好规划和设计:首先确定网站的需求和功能,设计网站前端的用户界面和交互流程,以及后端管理系统的数据结构和交互方式。 2. 选择合适的前端框架:根据网站需求和设计,选择适合的前端框架,如React、Vue等,并搭建基本的项目结构。 3. 前端开发:根据设计稿和需求,进行前端页面的开发,包括页面布局、样式设计、交互逻辑等。使用HTML、CSS和JavaScript等技术进行页面的编写和交互实现。 4. 后端架构设计:根据网站需求,选择合适的后端技术栈,如Java、Python等,并设计后端管理系统的数据库结构和接口设计。 5. 后端开发:根据设计的数据库结构和接口设计,进行后端管理系统的开发。使用所选择的后端技术进行业务逻辑的实现、数据的处理和管理。 6. 前后端联调:前端开发完成后,与后端进行接口对接和交互,确保数据的传输和交互正常。针对接口调试中的问题进行修改和优化。 7. 测试和优化:进行系统整体的功能测试和性能测试,保证网站正常运行和用户体验。根据测试结果对系统进行优化和改进,提升性能和用户体验。 两者的配合使用可以通过接口进行数据的传递和交互。前端通过调用后端提供的接口,获取和提交数据,并展示在用户界面上。后端处理前端发送的请求,进行业务逻辑的处理和数据库操作,然后返回相应的数据给前端前端后端配合需要保持接口的一致性和稳定性,确保数据的准确性和安全性。同时,与后端开发人员之间的良好沟通和密切合作也是保证系统顺利开发和运行的重要因素。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值