Vue 时间戳转换成日期格式

       初学者用了element 的Vue框架,搭建了一个简单后台管理系统,遇到了数据库是时间戳的格式,数据在前端页面显示也是时间戳,开始的时候是在Java代码里将时间戳转换成日期格式的,发现这样转换有时候如果数据库里的数据为空会报空指针错误,前端同事给了我一个方案,就是在前端代码里将时间戳转换成日期格式,觉得效果挺好的,下面分享一下使用转换的过程:

1. 在前端项目的util包下新建一个common.js,添加如下代码:

// 时间戳转换成日期格式
export function  getDate(val, format) { 
  if (!val) {
    return '';
  }
  // 如果时间戳后不是毫秒值就加000,变成毫秒值
  // if (val && val.length == 10) { val = parseInt(val+'000'); }
  if (val && val.length != 13) {
    if (val && val.length == 10) {
      val = parseInt(val+'000');
    };
    for (var i = 0; i < 13; i++) {
      if (val.length === i) {
        val = parseInt(val*(10^(13-i)));
      }
    }
  }
  var date = new Date(val);
  var o = {   
      "M+" : date.getMonth()+1,                 //月份   
      "d+" : date.getDate(),                    //日
      "h+" : date.getHours(),                   //小时   
      "m+" : date.getMinutes(),                 //分   
      "s+" : date.getSeconds(),                 //秒   
      "q+" : Math.floor((date.getMonth()+3)/3), //季度   
      "S"  : date.getMilliseconds()             //毫秒   
  };   
  if(/(y+)/.test(format)) {
    format = format.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
  }            
  for(var k in o) {
    if(new RegExp("("+ k +")").test(format)) {
      format = format.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
    }  
  }
  return format;   
}

2. 再到所需的 .vue 的页面中引入common.js 的 getDate 方法

<script type="text/ecmascript-6">
import { getDate } from '@/utils/common'
</script>

3. 然后在你获取列表的方法里循环输出你所需的时间字段

methods: {
    getList: function() {
      let params = {
        pageNumber: this.page.pageNumber,
        pageSize: this.page.pageSize
      };
      list(params)
        .then(res => {
          const paramData = res.data;
          const success = paramData.success;
          this.tableData = paramData.data.list;
          this.page.pageNumber = paramData.data.pageNum;
          this.page.pageSize = paramData.data.pageSize;
          this.page.total = paramData.data.total;
          for(var i = 0; i < this.tableData.length ; i++){
            // 调用 getDate 方法
            this.tableData[i].createTime = getDate(this.tableData[i].createTime,'yyyy-MM-dd hh:mm:ss');
            this.tableData[i].updateTime = getDate(this.tableData[i].updateTime,'yyyy-MM-dd hh:mm:ss');
            // toFixed(Number) 方法可把 Number 四舍五入为指定小数位数的数字(将整型转化有两位小数的浮点型数字)
            this.tableData[i].amount = this.tableData[i].amount.toFixed(2);
            // 将string类型的转换成带有两位小数点的数字
            this.tableData[i].platform = Number(this.tableData[i].platform).toFixed(2);
          }
        })
        .catch(error => {
          this.$message.error(error);
          console.log(error);
        });
    }
}

最后,你就能看到你想要的时间格式了.