Sayonara

个人碎碎念 写个人博客的主要原因可能是在自己的网站可以随便写想写的内容，计划主要是更新一些自己工作中遇到和解决的问题以及一些学习内容历程。目前已经点亮的技术能力除了前端必备的 js，vue，react 外，有 ci/cd，系统监控，都已实践在个人网站上，其中 jenkins、sentry 也都已经发布在自己的服务器上，gitlab 也在服务器上安装完成，但因为 sentry 需要资源占比太大， 已停用 gitlab，采用 gitee 来管理自己的学习代码。下一步准备做一个前端+后台的个人站，前端考虑用 vite+vue3，后台用 koa+mysql 来实现，后续实现后会发布在关于我中。如果有同学想要学习实现自己的 jenkins 自动发布项目，gitlab 搭建的话可以关注公众号撒呦那啦的前端之路，有详细教程。sentry 教程日后也会在公众号开始更新。 如果也喜欢本站主题的话，推荐去作者主站进行学习搭建，链接https://butterfly.js.org/

最近很流行 Follow这个网站，它对自己的定位是下一代的信息浏览器，现阶段主要通过邀请才能开始使用。在邀请后每日签到可以领取 20Power,Power 是 VSL 区块链上的一种 ERC-20 代币，可以用于在 Follow 上订阅其他人的信息或用 100Power 邀请其他人注册；下面介绍几个免费获取 100Power 的方法。 领取方式 通过博客、微博等网站（对于没用自己博客网站的人友好） 例如xLog等开源创作社区 注册账号后随便发一些博客内容，然后通过自己的头像下面点击我的 xLog 获取自己的博客链接添加/feed，就可以获取到一个https://xxxx.xlog.app/feed这样的链接。 在自己的 Follow 中点击+号通过 RSS 添加订阅，订阅成功后在左侧订阅列表中右键添加的订阅源点击认证，会出现 Feed ID 和 User ID 。 把上面的两个 Id 在 xLog 的仪表盘 > 设置 > 常规里，有一个 Follow 的设置项，把刚才的两个 Id 复制保存，再返回 Follow 就可以完成认证了。 然后在 Fol ...

wx.previewFilewx.previewFile文档没有那么详细，在初次使用时会有很多问题不能使用，比如配置项 size 如何获取，下面记录一下如何正确使用此方法和遇到一些问题的解决方式。 基本使用12345wx.previewFile({ url: "", // 需要预览文件的地址(必填，可以使用相对路径) name: "", // 需要预览文件的文件名，必须有带文件格式的后缀，例如.doc(不填的话取url的最后部分，最后部分是个包含格式后缀的文件名) size: 1048576, // 需要预览文件的字节大小(必填，而且大小必须正确，否则会打开失败)}); 注意事项 url url 需要是一个文件地址，但不支持 blob 链接，所以不要去尝试通过 window.URL.createObjectURL(blob)这种方式去转化 name 如果其他配置上没问题，在 ios 或 mac 设备上提示下载失败，请检查网络，可以看看文件名是否带中文，有中文的话 ios 或 mac 上是解析不了，需要修改文件 ...

同样都是鸿蒙 os4.0 版本的手机，但不同机型使用的 apiversion 却不同 ，根据官方论坛等渠道的反馈，支持新版的 api9（最新版为 api11） 的机型有 nova10 系列，mate30，p40/50 等。那么怎样确认具体机型使用的 apiversion 是多少呢，查阅官方文档 hdc 命令可以支持，下面记录一下具体的使用过程。 使用前需要确认的配置HDC 工具HarmonyOS Device Connect（HDC）是一个用于连接和管理 HarmonyOS 设备的工具，类似于 Android 的 ADB 工具。要使用 hdc 命令，需要确认以下几点 确保 HDC 环境已设置HDC 工具是 DevEco Studio 的一部分，可以在 DevEco Studio 的安装目录下的 Sdk/hmscore/3.1.0/toolchains/hdc 文件夹内（windows 系统为 Sdk\hmscore\3.1.0\toolchains\hdc.exe）。具体查看方式为 DevEco Studio 的文件 > 设置 ...

最近几个月在学习鸿蒙知识时需要使用 mongodb，考虑到来回奔波于家和公司之间需要给不同的设备安装 mongodb 来使用，因而选择在服务器上创建 mongodb 容器来解决这个问题 基本使用创建本地持久存储目录在文件夹下创建 data、logs、dump 文件夹，在创建 mongodb 容器时进行挂载 1mkdir data logs confg dump data 持久化存储的数据文件夹 logs 日志文件夹 dump 备份文件夹 一行命令启动容器123456789docker run -it \ --name mongodb \ --restart=always \ --privileged \ -p 27017:27017 \ -v /docker/mongo/data:/data/db \ -v /docker/mongo/dump:/data/dump \ -v /docker/mongo/logs:/data/log \ -d mongo:latest --name 指定容器名 --restart= ...

又是一个和上一篇项目中引用了被标记为不安全的 pdf 包的项目出现的奇怪的问题，突然测试说这个项目有几个二级菜单页面不能跳转了，在查看后发现 view 目录下的页面上没有明显错误，随后在具体错误信息中看到了引入的一个自定义 UpImgLoader 组件，寻思是不是这里有问题，进入以后发现了原因，因而记录一下这个问题 错误信息1[vue-router] Failed to resolve async component default: TypeError: Unable to determine current node version 完整错误截图 问题原因在一个组件内有一段 import path from "path"的代码 删除后就恢复正常了

在接手一个离职同事的项目准备开发新需求，将项目拉下来后 install 时，发现一个安装包的错误，这是一个 pdf 预览的插件，尝试多次无法顺利安装后去 npm 网站上 查看，显示这个包含有恶意代码的提醒并已经被 npm 安全团队从注册表中删除。我直接好家伙，赶紧对这个模块进行了替换。 具体现象 分析原因看了下 git 记录发现最少已经是 10 个月之前就已经安装，之前一直没发现问题，可能因为这个同事一直没有再重新安装过整个 node_modules ；另外在 ci/cd 项目发布过程中没问题，是因为公司私有库中会缓存已经安装过的包 在我删除本地的 node_modules 和.lock 文件，指定到公司的私有库地址重新 install 后安装成功了。 1npm install --registry=http://xxxx/repository/xinnpm-ali 本地运行后查看 bsd-pdf 这个包在项目中的使用，一切正常。随后查看具体这个包到底有哪些问题。 npm 查看在 npm 中查询这个包，可以发现因为含有恶意代码，已经被删除只保留了一个占位符 通过 np ...

line-height 引起的疑问平时工作在修改组件库的样式时，总会看到一些组件在设置 line-height 这个属性时，会设置成 line-height:1 这样用数字来表示，因而秉着不知道原因就是不会的道理，找时间学习了一下，现在进行一下总结。 mdn 上关于 line-height 的解释 ：line-height 设置为的无单位的数字，是根据这个数字*字体大小 并推荐使用这种方式设置行高，不会在继承时产生不确定的结果。 设置一个 font-size:20px，line-height:2 的 div 元素。可以看到 line-height 的高度为 font-size 的 2 倍 如果 font-size 设置为 0，line-height 也是按照 font-size 进行计算 2024 年了，css 单位都有哪些由 line-height 而看了 mdn 后，发现除了常用的 px、rem、em、vw、vh 以外，还有好多不曾了解过的 css 单位，也一起记录一下。 相对长度单位：以其他距离为单位的一种尺寸，这个单位可以是根据 font-size，line-height ...

本文主要针对 puppeteer 处理前端页面使用了懒加载图片等内容的截取总结。同时也对一些第三方防止页面被截图手段的学习和总结。 懒加载-图片针对内容是通过图片懒加载的页面，比较好处理，只需要在 puppeteer 截取的时候设置 fullPage:true 全屏截取即可。 1234await page.screenshot({ fullPage: true, //设置全屏 encoding: "binary",}); 懒加载-接口如果页面上的内容是通过接口返回，即 img 标签 src 属性设置的是一个返回图片格式的接口，此时就需要让页面进行滚动，触发接口请求的执行，然后再进行全屏截图。 123456789101112131415await page.evaluate(async () => { await new Promise((resolve, reject) => { let totalHeight = 0; const distance = 500; const time ...

在换了 buttfuly 主题后添加留言板功能时，在主题官网没有看到详细教程，导致遇到了很多问题不知道怎么解决，最后在多方尝试后成功配置好了，后续在官网留言板也看到有相同困惑的小伙伴，因而记录一下如何配置留言板操作 注册账号首先我们需要注册一个leancloud 的账号 成功登陆后对邮箱进行验证 验证成功后就可以进行创建应用 首页可以看到创建成功的项目 配置项目数据库项目创建成功后，需要对数据存储进行配置 给数据库的权限添加为无限制，保证读写都是所有人可以操作 服务器配置在添加完数据库的操作后，我们需要来到服务器的相关配置，也是最关键的部分。我这边只有腾讯云服务器，就以这个为例，阿里云也是类似的操作，只要配置正确就可以正常使用。 需要先在 LeanCloud 的项目下中绑定域名 然后点击绑定新域名，在弹出的弹窗中我们配置一个新的域名例如 btf-valine.xxxx.com 点击绑定后，会有一个对应的推荐 DNS 配置的 CNAME 在腾讯云的 DNS 解析中，点击我的域名下的域名，进入到域名记录设置中 点击添加记录，新增一条记录，把我们在 LeanCl ...