写留言板接口项目时遇到的问题:timestamps拼写错误导致的乌龙

今天编写留言板项目时,在测试提交留言接口时出现了bug:提交完留言之后,留言已经存入数据库中,但是界面并没有显示

与此同时,vue控制台还出现了这样的报错

百度之后发现是 日期工具函数 date-fns 出现了问题

这里使用 date-fns 定义了有一个函数,功能是将传递过来的日期数据,转换成规定的格式

复制代码
function formatDt(dt, formatTpl = 'yyyy-MM-dd HH:mm') {
    //如果不是有效日期数据
    if (!(dt instanceof Date) || isNaN(dt.getTime())) {
        //提供默认的日期值
        dt = new Date(dt);
    }
    return format(dt, formatTpl)
}
复制代码

 

  为了找到错误,判断之后打印了 dt,

复制代码
function formatDt(dt, formatTpl = 'yyyy-MM-dd HH:mm') {
    //如果不是有效日期数据
    if (!(dt instanceof Date) || isNaN(dt.getTime())) {
        console.log(dt)
        //提供默认的日期值
        dt = new Date(dt);
    }
    return format(dt, formatTpl)
}
复制代码

   结果输出是 undefined,

  顺藤摸瓜,找到调用了这个函数的 Item Vue,调用的方式为

复制代码
export default {
  props:  ['data'],
  computed: {
        _id() {
            return this.data._id
        },
        createdAt() {
            return formatDt(this.data.createdAt)
        },
        isMy() {
            // 这条留言,是不是我自己发的?
            const curData = this.data
            if (!curData) {
                return false
            }
            return curData.username === window.userInfo.username
        }
    },  
}
复制代码

 

  打印出 this.data.createAt,仍然为 undefined,

  接着试着打印 data,发现数据中没有相应的日期数据

  找到 koa 中的留言模型 commentModel.js

  发现自己的 timestamps:true,写成了 timestampts:true,

  这才导致创建留言时没有相应的时间戳,

  至此问题解决

  吐槽一下 vscode,为什么拼写错误不给提示啊,还是自己太马虎了,引以为戒,下不为例

 

posted @   波波波维奇~  阅读(8)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示