时间处理，将数据库时间转化成需要的格式

小咪咪 2022-11-20 08:26 231阅读 0赞

## 数据库中日期处理（转换为基本格式，或转换为多少小时前，多少天前，多少个月前等 vue封装 ##

拥有的的后台数据类型  
![20201028210258582.png_pic_center][]  
需要的结果

![在这里插入图片描述][20201028212013356.png_pic_center]

## \- 方案1：vue封装使用管道符实现 ##

// 先对时间格式进行处理 export const dataFormat = (value, spe = "-") => { 
      value = new Date(value);
      let year = value.getFullYear();
      let month = value.getMonth() + 1;
      let day = value.getDate();
      let h = value.getHours();
      let mm = value.getMinutes();
      let s = value.getSeconds(); return `${ year}${ spe}${ month}${ spe}${ day} ${ h}:${ mm}:${ s}`;
    }; //将数据库中传入的数据，通过管道符处理 返回对应格式字符串 例：2020-10-27 20:20:17 //如果需求为：转化成 2020-10-28 后面准确的时间不要，则调用下面这个方法，弊端：不能转化成 X小时前 export const myDataFormat = (value, spe = "-") => { 
      value = new Date(value);
      let year = value.getFullYear();
      let month = value.getMonth() + 1;
      let day = value.getDate();
      let h = value.getHours();
      let mm = value.getMinutes();
      let s = value.getSeconds(); return `${ year}${ spe}${ month}${ spe}${ day} ${ h}:${ mm}:${ s}`;
    }
    
    // 转化 显示多少 小时/日/月/年 前 export const hanlerTime = (value) => { 
      let res = getDateTimeStamp(value);
      let res1 = getDateDiff(res);
      return res1;
    }; //用双重管道符 可直接将数据库中的格式转换成对应的多少小时前 //例：{ {  v.create_date | dataFormat | hanlerTime }}
    
      	//js函数代码：字符串转换为时间戳 function getDateTimeStamp(dateStr) { 
      return Date.parse(dateStr.replace(/-/gi, "/"));
      }
    //转换的代码：
    let minute = 1000 * 60;
    let hour = minute * 60;
    let day = hour * 24;
    let halfamonth = day * 15;
    let month = day * 30;
    let year = month * 12; function getDateDiff(dateTimeStamp) { 
      let now = new Date().getTime();
      let diffValue = now - dateTimeStamp; if (diffValue < 0) { 
        //若日期不符则弹出窗口告之
        //alert("结束日期不能小于开始日期！");
      }
      let yearC = diffValue / year;
      let monthC = diffValue / month;
      let weekC = diffValue / (7 * day);
      let dayC = diffValue / day;
      let hourC = diffValue / hour;
      let minC = diffValue / minute;
      let result; if (yearC >= 1) { 
        result = "发表于" + parseInt(yearC) + "年前";
      } else if (monthC >= 1) { 
        result = "发表于" + parseInt(monthC) + "个月前";
      } else if (weekC >= 1) { 
        result = "发表于" + parseInt(weekC) + "周前";
      } else if (dayC >= 1) { 
        result = "发表于" + parseInt(dayC) + "天前";
      } else if (hourC >= 1) { 
        result = "发表于" + parseInt(hourC) + "个小时前";
      } else if (minC >= 1) { 
        result = "发表于" + parseInt(minC) + "分钟前";
      } else result = "刚刚发表";
      return result;
    }

## 方案2：使用moment插件 [moment官方网站][moment] ##

vue方法：  
1、下载插件  
2、在main.js中引入插件,并挂载到原型上  
3、汉化：如果不汉化的话，默认英文版

npm install moment
    import moment from "moment";
    Vue.prototype.$moment = moment; //挂载原型上
    moment.locale("zh-cn");

使用方法：

$moment(传入字符串).fromNow()

例如：

{ {  $moment(parent.create_date).fromNow() }} //这里的parent.create_date == 2019-10-15 15:21:11

[20201028210258582.png_pic_center]: /images/20221120/6a6d0546df004d51a0180ac82a4a1604.png
[20201028212013356.png_pic_center]: https://img-blog.csdnimg.cn/20201028212013356.png#pic_center
[moment]: http://momentjs.cn/