欢迎来到sayonara的博客网站
个人碎碎念 写个人博客的主要原因可能是在自己的网站可以随便写想写的内容，计划主要是更新一些自己工作中遇到和解决的问题以及一些学习内容历程。目前已经点亮的技术能力除了前端必备的 js，vue，react 外，有 ci/cd，系统监控，都已实践在个人网站上，其中 jenkins、sentry 也都已经发布在自己的服务器上，gitlab 也在服务器上安装完成，但因为 sentry 需要资源占比太大， 已停用 gitlab，采用 gitee 来管理自己的学习代码。下一步准备做一个前端+后台的个人站，前端考虑用 vite+vue3，后台用 koa+mysql 来实现，后续实现后会发布在关于我中。如果有同学想要学习实现自己的 jenkins 自动发布项目，gitlab 搭建的话可以关注公众号撒呦那啦的前端之路，有详细教程。sentry 教程日后也会在公众号开始更新。 如果也喜欢本站主题的话，推荐去作者主站进行学习搭建，链接https://butterfly.js.org/
如何查看华为鸿蒙手机使用的apiversion
同样都是鸿蒙 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 的文件 > 设置 ...
docker部署mongodb畅享版
最近几个月在学习鸿蒙知识时需要使用 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= ...
vue-router报错信息
又是一个和上一篇项目中引用了被标记为不安全的 pdf 包的项目出现的奇怪的问题，突然测试说这个项目有几个二级菜单页面不能跳转了，在查看后发现 view 目录下的页面上没有明显错误，随后在具体错误信息中看到了引入的一个自定义 UpImgLoader 组件，寻思是不是这里有问题，进入以后发现了原因，因而记录一下这个问题 错误信息1[vue-router] Failed to resolve async component default: TypeError: Unable to determine current node version 完整错误截图 问题原因在一个组件内有一段 import path from "path"的代码 删除后就恢复正常了
项目中引用了被标记为不安全的pdf插件
在接手一个离职同事的项目准备开发新需求，将项目拉下来后 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 ...
使用puppeteer截取懒加载页面
本文主要针对 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 ...
配置valine
在换了 buttfuly 主题后添加留言板功能时，在主题官网没有看到详细教程，导致遇到了很多问题不知道怎么解决，最后在多方尝试后成功配置好了，后续在官网留言板也看到有相同困惑的小伙伴，因而记录一下如何配置留言板操作 注册账号首先我们需要注册一个leancloud 的账号 成功登陆后对邮箱进行验证 验证成功后就可以进行创建应用 首页可以看到创建成功的项目 配置项目数据库项目创建成功后，需要对数据存储进行配置 给数据库的权限添加为无限制，保证读写都是所有人可以操作 服务器配置在添加完数据库的操作后，我们需要来到服务器的相关配置，也是最关键的部分。我这边只有腾讯云服务器，就以这个为例，阿里云也是类似的操作，只要配置正确就可以正常使用。 需要先在 LeanCloud 的项目下中绑定域名 然后点击绑定新域名，在弹出的弹窗中我们配置一个新的域名例如 btf-valine.xxxx.com 点击绑定后，会有一个对应的推荐 DNS 配置的 CNAME 在腾讯云的 DNS 解析中，点击我的域名下的域名，进入到域名记录设置中 点击添加记录，新增一条记录，把我们在 LeanCl ...
前端模块化
为什么需要模块化 在有模块化以前 我们来看下面一段代码 123456789101112131415<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <script src="a.js"></script> <script src="b.js"></scr ...
docker部署jenkins
背景因为另一台服务器今年到期，不打算再续费了（有些承受不住）。之前 jenkins 是直接安装在这台服务器上的，步骤繁琐且不方便迁移，因而这次想通过 docker 来部署 jenkins ；在本地实践后发现简单易上手，因而记录一下，后续就可以实现自己项目的发布。 docker 安装 jenkins通过 docker search 命令查找 docker 官方 jenkins 镜像。一般使用 jenkins/jenkins 这个，第一个 jenkins 镜像启动会有一些警告提示，因而没有采用。 拉取完后就可以直接运行镜像创建一个 jenkins 容器了。（eg：记得先打开服务器防火墙的端口） 123docker run -d --restart always -ti -p 主机端口:8080 jenkins/jenkins添加上 --restart always 参数 表示出现问题会重启 启动后可以看到默认的登陆密码，如果后续忘记了，需要通过进入 jenkins 的容器内查看 1234docker exec -it 容器id /bin/bash# 通过cat命令查看密码 ...
关于我被主页面嵌入iframe设置sandbox折磨一天的事
背景在一个已经维护很久的系统中，突然产品说功能 10 点之后不能用了。项目是被第三方通过 iframe 嵌入的一个页面表单操作。在和后台经过一天的友好交流（被甩锅）和查找问题原因（互相甩锅）之后，发现并不是我和后台的问题，在查找问题原因中学习到了 iframe 中设置 sandbox 属性可以起到的一些作用。所以记录一下。 具体现象当时进入页面后初始化相关的接口都请求不通，产品说后台说是我的问题（又被甩锅），我看了下发现都是 cors 跨域问题。然后发截图给后台，如此这般这般如此，battle 到下午。在排查问题中发现有段不是造成产生问题原因的代码被我发布到了线上，然后就顺手给恢复到了最开始的状态，是一段 localstorage.getItem 的代码被我覆盖成了一个固定值。然后就重新恢复了发布上去了。结果出现了接口没有请求的问题，点击事件也不执行，只出现了 Blocked form submission to '' because the form's frame is sandboxed and the 这样一段报错提示。把刚才改的 localstorag ...