记录修复的两个 BUG

bug 前端 vue typescript halo
222

这个两个问题都有点久远了, 但想起了搭建博客的初衷, 于是现在开始记录...

项目介绍

此项目是一个博客建站工具

项目地址: https://github.com/halo-dev/halo

遇到的 BUG

issue 1: #4326

issue 2: #4430

第一个问题

问题: 附件预览中的 “最后一张” 图片点击下一个后, 会返回空数据页面

详情: issue: #4326

此 bug 来自此工具用户在 github 上提交的 issue

解决过程

熟悉代码

这是我第一次接触这个项目的代码, 此前只是使用. 于是我先了解了 README, 在其中找到官方文档地址 https://docs.halo.run/

了解了启动项目的方法后, 就开始阅读代码了, 这种项目的代码非常的多, 如果有详细的设计文档一定要看. 这里读代码先从项目架构入手, 再看源码我认为会比较好.

定位问题

由于没有看到项目设计和架构等信息, 大概浏览完项目结构后, 使用 idea 的全局搜索功能搜索了 "attatchment", 搜索到了目标 vue 文件: AttatchmentList.vue

按理来说在最后一个元素是没有下一个的, 肯定不会触发翻页, 于是这个是一个有关翻页的问题. 翻页一般的函数名都是 xxNext 和 xxPre 等, 于是很容易就找到了用于翻页的函数, 并找到了定义此函数的 ts 文件: use-attachment.ts

首先准备好足以出发分页的测试数据, 在 use-attachment.ts 中对 handleSelectNext() 和 handleSelectPrevious() 函数打断点, 然后 debug 模式启动前端进行调试 (教程)

解决问题

在调试过程中, 观察页码等值, 发现页码会超出总页数, 也就返回了空数据页面, 进而发现其判断: index === data.value.length - 1 && hasNext 在最后一个附件的值也是 true,

查看 hasNext 变量的类型后发现是 ref 类型需要调用 .vlaue, 于是将代码改成: index === data.value.length - 1 && hasNext.value 修复了这个问题

如果没有调用 .value 那么这个判断就会是: 如果 index 等于最后一个元素的下标 and hasNext 不为空

修改了代码之后提交的 pr:

pr: #4328

第二个问题

问题: 在附件预览中, 如果点击 "下一个"/"上一个" 触发了翻页, 可能会显示预期之外的页面

假设第一页的最后一个附件是狗的图片, 第二页第一二张是猫和蛇, 在预览猫时往前翻页, 可能还是会显示猫

详情: issue: #4430

这个问题是我在修复完上一个问题之后, 在后续进一步测试后发现的

解决过程

定位问题

调试了许多次, 只发现了 page++ 或 page-- 后预览页面并未刷新, 但是 index 已经发生了变化, 预期的情况中会显示对应 index 的数据

由于并未发现代码逻辑的问题, 考虑到这部分代码使用的是响应式, 于是想到应该是响应式没有及时更新导致

  • 异步调用没有执行完页面就进行了更新

通过查找 vue 官方的资料, 了解到 vue 刷新 DOM 数据是异步执行的, 于是我把问题锁定到了: "DOM 异步刷新导致"

解决问题

知道了问题就好办了, 在刷新页面显示数据之前加上一句 await nextTick();, 多次测试之后没发现错误, 问题解决

nextTick() 函数的作用是: 在 DOM 更新完之后, 立即执行其中的回调, 这里加上 await 是因为这是一个 async 函数. 我使用这段代码知识为了等待 DOM 更新完毕, 所以并没有任何参数

修改了代码之后提交的 pr:

pr: #4331

收获

虽然修复了两个前端问题, 但实际上我并没有深入学习过前端

在修复第一个问题时, 我还不知道 ref 类型是什么 (甚至连 ts 都没学过), 第二个问题也是同样, 我并不了解 vue 更新视图的逻辑. 看了很久文档, 查了许多资料, 最后 ts 差不多能写了, 也学到了 vue 响应式更新的机制

这个实际上是我在 github 上第一次给大型项目提交 pr, 从中也学到了如何规范提交 pr 以及更有效的发布 issue

如何参与贡献: https://docs.halo.run/contribution/pr

commit 规范: https://zhuanlan.zhihu.com/p/182553920

开源最佳实践: https://github.com/LinuxSuRen/open-source-best-practice

编码技术往往是在 bug 中成长起来的, 遇到过很多 bug, 有时间就慢慢记下来吧~~