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

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

在这个Vue项目中,后端接口RentalQueryAllServlet返回的租车记录数据中,有一个rentalTime字段,其值是日期字符串,如:"Sep 27, 2023 9:23:40 AM"。

1. 获取数据

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

 

js

 

methods: {
  fetchData() {
  axios.get('RentalQueryAllServlet').then(res => {
    // 数据处理
  }) 
  }
}

 

2. 转换日期字符串

获取到的数据需要将rentalTime转换为Date对象:

 

js

 

fetchData() {
  res.data.forEach(item => {
  item.rentalTime = new Date(item.rentalTime) 
  })
}

 

3. 格式化显示

定义过滤器对日期进行格式化:

 

js

 

filters: {
  formatDate(time) {
  let date = new Date(time);
  return date.toLocaleString();
  }
}

4. 处理时区

日期可能是UTC时间,需要转换为本地时间:

 

js

 

formatDate(time) {
  let date = new Date(time);
  let local = date.toLocaleString('zh-CN', {
  timeZone: 'Asia/Shanghai' 
  });
  return local;
}

 

5. 调用接口

在mounted生命周期中调用fetchData方法获取数据:

 

js

 

mounted() {
  this.fetchData()
}

 

6. 渲染表格

使用过滤器格式化日期字段进行展示:

 

html

 

<td>{{ rental.rentalTime | formatDate }}</td>

 

以上实现了从后端获取日期字符串到前端正确显示的全流程。