Vue

2023-06-01 10:09| 来源: 网络整理| 查看: 265

Vue – 时间戳转换日期格式

在Vue开发中，我们经常需要将时间戳转换为特定的日期格式以便展示。本文将介绍如何使用Vue和Spring Boot来实现这个功能。

问题简介

前端通常使用JavaScript来处理日期数据，而后端则通常使用Java。因此，我们需要分别考虑在Vue和Spring Boot中如何实现时间戳转换为日期格式。在这里插入图片描述

解决方案 1.Vue 中使用 Date 对象

Vue提供了Date对象来处理日期数据。下面是一个使用Date对象的示例：

this.releaseTime = new Date(res.data.releaseTime).toLocaleString() {{ title }}

发布日期：{{ releaseTime }} 点击量：[ {{ hits }} ]

export default { name: 'News', data() { return { content: '', hits: '', releaseTime: '', title: '' } }, created() { this.getalone() }, methods: { getalone() { const data = this.$route.query.id getnew(data).then(res => { console.log(res) this.content = res.data.content this.hits = res.data.hits this.releaseTime = new Date(res.data.releaseTime).toLocaleString() this.title = res.data.title }) } } } 2.自定义一个js

1.在项目中写入date.js

// date.js // 用于格式化时间 export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() }; for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + ''; fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)); } } return fmt; }; function padLeftZero (str) { return ('00' + str).substr(str.length); };

2.在项目页面中导入

import {formatDate} from "@/utils/date"; let date = new Date(res.data.releaseTime) this.releaseTime = formatDate(date, 'yyyy-MM-dd hh:mm') {{ title }}

发布日期：{{ releaseTime }} 点击量：[ {{ hits }} ]

import {getnew} from "@/api/api"; import {formatDate} from "@/utils/date"; export default { name: 'News', data() { return { content: '', hits: '', releaseTime: '', title: '' } }, created() { this.getalone() }, methods: { getalone() { const data = this.$route.query.id getnew(data).then(res => { console.log(res) this.content = res.data.content this.hits = res.data.hits let date = new Date(res.data.releaseTime) this.releaseTime = formatDate(date, 'yyyy-MM-dd hh:mm') this.title = res.data.title }) } } } 3.Spring Boot 中使用注解

在Spring Boot中，我们可以使用@JsonFormat注解来指定日期格式。下面是一个使用@JsonFormat注解的示例：

public class User { private String name; @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd HH:mm:ss") private Date birthday; // getters and setters }

在上面的代码中，我们定义了一个名为birthday的日期属性，并在其上使用@JsonFormat注解来指定日期格式。其中，shape表示日期序列化格式，这里我们设为STRING；pattern表示日期格式字符串，这里我们设为yyyy-MM-dd HH:mm:ss。

然后，在我们返回User对象时，Jackson将自动将其转换为指定格式的日期字符串。

总结

通过以上两种方法，我们可以很方便地将时间戳转换为特定的日期格式。Vue使用Date对象处理日期数据，而Spring Boot使用注解指定日期格式。无论是前端还是后端，都有多种实现方案可供选择，开发者可以根据自己的需求和习惯来选择合适的方法。

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章