写留言板接口项目时遇到的问题: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,为什么拼写错误不给提示啊,还是自己太马虎了,引以为戒,下不为例
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现