后端传递Timestamp类型时间前端自定义接收格式-526互联

Vue项目中处理后端返回日期字符串

在Vue项目开发中,常常会遇到后端返回日期字符串,需要在前端进行格式化显示的情况。这篇文章将分享一下从后端返回日期字符串到前端正确显示的全过程。

我们假设后端接口返回的订单数据中,有一个returnDate字段,其值是字符串格式如:"Sep 27, 2023 9:23:40 AM"。

在Vue组件中,使用axios调用接口获取数据:

复制代码

async fetchData() {
  const res = await axios.get('/orders');
  this.orders = res.data;
}

此时orders数据中每个对象的returnDate字段还是字符串。

我们需要将字符串转换为Date对象,这样才能进行格式化:

fetchData() {
  // ...
  
  res.data.forEach(order => {
  order.returnDate = new Date(order.returnDate); 
  });

  this.orders = res.data;
}

格式化Date对象为我们需要的字符串格式,这里使用过滤器实现:

filters: {
  formatDate(date) {
  return date.toLocaleString(); 
  }
}

html

<td>{{ order.returnDate | formatDate }}</td>

如果后端返回的是UTC时间,需要转换为本地时间:

formatDate(date) {
  return moment(date).tz('Asia/Shanghai').format('YYYY-MM-DD HH:mm:ss');
}

以上就是从后端获取日期字符串到前端正确显示的全过程。关键是将字符串转换为Date对象,然后根据实际需求进行格式化。