- 博客(34)
- 收藏
- 关注
RSS订阅原创 前端监控之rrweb录制用户行为
rrweb 是 'record and replay the web' 的简写，旨在利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作。
2025-01-27 22:40:05
1281
原创 前端监控之sourcemap精准定位和还原错误源码
在前端开发中，监控和错误追踪是确保应用稳定性和用户体验的重要环节。随着前端应用的复杂性增加，JavaScript错误监控变得尤为重要。在生产环境中，为了优化加载速度和性能，前端代码通常会被压缩和混淆。这虽然提升了性能，但也给错误追踪带来了挑战，因为错误报告中显示的代码位置和实际代码不一致，使得开发者难以定位和修复问题。Sourcemap技术应运而生，它是一种将压缩后的代码映射回原始源代码的工具。通过sourcemap，开发者可以准确地从错误报告中找到原始代码中的问题所在，即使这些代码已经被压缩或混淆。
2024-11-18 14:02:10
1580
原创 重构Action-cli前端脚手架
最近一年，为了满足公司业务开发，解决重复搭建项目繁琐过程，自己开发了一个前端脚手架，并发布到npm。随着时间的推移，发现之前的版本存在很多问题，有些功能做不到位，而且代码也不是很规范，流程逻辑混乱等等。因此，为解决这些问题，我决定对其进行重构，添加检查更新版本功能，优化打包，将多个文件打包成单个cjs文件，支持更多的自定义以及快速克隆运行。如果之前对这个项目没有了解的同学，可以去看上一篇关于脚手架开发的文章。
2024-11-17 21:39:45
1152
原创 基于Canvas实现电子签名
之前工作中遇到一个电子签名的需求，在后台管理系统产品验证模块需要绘制或上传产品检验报告单，报告单上实现电子签名功能。电子签名功能可以切换画笔颜色、画笔粗细、回退、重做、擦除和一键清空，支持以图片格式下载签名到本地存储，要求签名图片不能模糊，字体书写线条平滑，没有严重的锯齿感等。以上需求大致意思如下：功能：自由绘制线条、选择画笔颜色、撤销、重做、擦除、画笔粗细、下载、重置要求：线条平滑度、高清晰度。
2024-11-15 17:46:30
927
原创 基于Github Actions实现前端CI/CD持续集成与部署
GitHub Pages 是 GitHub 提供的一项服务，它允许用户通过 GitHub 存储库免费托管静态网站。用户可以使用 HTML、CSS 和 JavaScript 来构建他们的网站，并将其发布在 GitHub 的子域名上。只需创建一个名为username.github.io的存储库，提交你的网站文件，GitHub 就会自动生成并托管该网站。
2024-11-01 00:00:00
1766
原创 pnpm在monorepo架构下不能引用其他模块的问题
pnpm在monorepo架构下使用以下命令并不能在main/index.ts中使用common/index.ts模块下封装好的axios，一直从远程下载common模块。
2024-10-01 20:17:03
1162
2
原创 React组件如何暴露自身的方法
最近遇到一个如何暴露React组件自身方法的问题。在某些时候，我们需要调用某个组件内部的方法以实现某个功能，因此我们需要了解如何暴露组件内部API的方法。
2024-09-21 19:00:12
799
原创 实现一个自定义前端脚手架
什么前端脚手架？前端脚手架是一种工具，用于快速搭建前端项目的基础结构，提供了一套约定和标准，帮助开发人员快速启动项目开发。常见的前端脚手架包括Create React App、Vue CLI、Angular CLI、@nestjs/cli等。我为什么要写一个自己的前端脚手架？过去一年里，因为前端业务的需要，自己编写了一个前端脚手架，并在前端业务中应用，快速搭建项目，遵循最佳实践，提高开发效率。自定义脚手架可以减少重复性的工作，不再需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。
2024-08-01 12:07:46
1333
原创 如何判断是否是数组？
面试过程中，面试官有可能问我们如何判断一个东西是不是数据？我们就需要编写一个方法去判断。那么回答这个问题，我们最好给面试官多种方案，并且分析这几种方案的可行性和优缺点，并指出最合适的方案。很多同学可能会用以下这种判断方式。但这种方式可能会出错。因为判断值data里面可能存在一些递归结构，例如下图存在的：arr[0]=arr;这个数组的第一项等于这个数组本身时，JSON.stringify()序列化会报错，因此这种方式不太可行。
2024-07-23 12:42:34
930
原创 警告： 请勿将代码粘贴到你不理解或尚未审阅自己的 DevTools 控制台。这可能导致攻击者窃取你的身份或控制你的计算机。请在下面键入“允许粘贴”以允许粘贴。
最近使用 Microsoft Edge浏览器 控制台 调式代码，突然发现不能粘贴了，会有一条黄色的警告提示语。警告： 请勿将代码粘贴到你不理解或尚未审阅自己的 DevTools 控制台。这可能导致攻击者窃取你的身份或控制你的计算机。请在下面键入“允许粘贴”以允许粘贴。
2024-04-18 00:00:12
9933
4
原创 自定义SEE（Server send event）实时通信请求头
浏览器原生的EventSource API不支持自定义请求头，推荐使用EventSourcePolyfill这个JavaScript库。
2024-04-01 23:00:00
1691
原创 Vue使用DataV轮播表，通过Axios请求数据后，轮播表数据没有及时更新。
在做一个Vue2+ECharts可视化项目过程中，要实现一个轮播表，没有找到ECharts现成图表组件。打算使用vue-seamless-scroll来实现，但其自定义表头与内容的列宽不好控制，发现DataV刚好有这个轮播表组件。然而通过Axios请求数据后，再将数据传递轮播表组件，轮播表数据没有及时更新，使用watch监听也不管起作用，暂时不知道原因。
2024-03-13 10:34:20
1059
1
原创 Git只克隆远程仓库的某一个目录或文件
最近需要查看之前写的代码，需要从远程仓库拉取项目，但仓库项目太大直接克隆的话，下载时间比较慢，因此研究如何使用git只克隆需要的目录文件。下图是一个仓库的直接git克隆测试，发现项目.git文件大小为4.2M，整个项目仓库大小为9.9M。但是我们并不要远程仓库项目的所有文件，那应该怎么实现只克隆某一个目录或文件呢？
2024-03-07 09:46:47
13733
2
原创 Ubuntu中使用Docker部署NestJs+SpringBoot+Vue+React+MySQL项目
新建docker-compose.yml文件，定义Docker Compose的内容，后面需要使用docker compose up -d 运行该文件。
2023-10-31 22:22:12
473
原创 读取SpringBoot配置文件的几种方式
在SpringBoot开发过程中，通常需要在*.properties/*.yml写配置内容，那么应用程序有哪几种读取配置文件内容的方式呢？
2023-09-24 12:41:14
243
1
原创 DOMParse()手动解析DOM树
使用DOMParser的parseFromString(fragment, mineType)方法需要传两个参数，第一个是DOM字符串，第二位用于确定方法返回的类型。这里给大家介绍一个浏览器API，我们都知道浏览器在渲染时，DOM文档会被解析生成DOM树，而此过程它就需要靠DOMParse这个API来完成。使用默认浏览器打开实践操作部分新建和编写的程序，就会发现程序已经在控制台获取，并打印了parseTagContent函数解析的DOM字符串的纯文本，效果如下图所示。是这样定义的，DOMParser。
2023-08-30 21:16:35
2121
1
原创 nodemon：无法加载文件 C:\Users\*\AppData\Roaming\npm\nodemon.ps1因为在此系统上禁止运行脚本。‘.‘ 不是内部或外部命令，也不是可运行的程序或批处理文。
在Windows PowerShell等终端输入（npm、cnpm、nodemon）运行项目命令时，被提示无法加载文件，系统禁止运行脚本。具体错误描述如下图：这个错误通常是由于Windows系统安全策略导致的，系统会默认阻止运行某些脚本文件。系统阻止某些脚本运行，时为了保护系统不被恶意脚本入侵。
2023-06-16 15:45:55
7083
1
原创 前端实现水印防篡改
水印很难不被篡改，因此我们必须给水印修改做一定的篡改防范，让用户不那么容易修改。然后使用watchEffect()重新制作水印。当用户删除水印元素或修改水印样式时，通过判断MutationObserver捕获到元素的变化，确定是否执行flag.value++，从而触发watchEffect()重新执行绘制水印操作，也就达到了防止水印被篡改的效果。使用该组件必须专递水印文本，水印字体默认30，各水印间隙默认为20。用户可能会右键检查元素并删除水印，所以我们需要监控用户删除或修改水印元素时，重新生成水印元素。
2023-05-31 15:09:44
1561
原创 优化Webpack打包时产生的错误uglifyjs / terser
在学习webpack优化打包时，发生的打包错误。使用uglifyjs-webpack-plugin或terser-webpack-plugin插件优化打包，都会报这样的错误。直接执行打包Webpack命令，是没有问题，就是配置vue.config.js之后，不行了。当然，也找到一些回答，说是webpack版本与插件版本不对应产生的。找了半天暂时还没有解决，大家有什么好的解决方案吗？vue.config.js配置。
2023-04-14 23:46:16
826
原创 解决js脚本加载失败的问题
首先，我们需要引入多个新地址的script标签加载js，当某一个js加载失败时，就会被触发window监听事件error，执行重试更换域名生成新的script标签加载js，需要靠document.write()才能阻塞后面的js加载，不阻塞后续js加载，会造成js加载顺序混乱。但上一个js脚本加载出现错误，window监听error事件还有没有注册，所以说我们需要把它写在最前边，放到里，一开始就去监听。到这里页面解决了，什么时候去重新加载js的问题，还剩下如何重试加载js。
2023-03-20 23:38:17
7747
2
原创 判断对象中是否存在某个属性
控制台运行，hasOwnProperty()判断对象自身没有问题，验证发现hasProprty()判断出来的与预期结果不一致。toString() 来自原型链上的，obj对象本身没有，obj就会从原型链上找。当对象属性值为undefined时，它返回的是false，预期应该true（k是存在obj中的），所以并不能使用undefined判断对象中是否存在某个属性。第三种是对象提供的判断对象是否存在属性的一个方法 hasOwnProperty()，这个函数只会查看对象本身有没有这个属性。这样子好像可以判断。
2023-03-08 21:43:39
683
原创 windows(路径、文件)常用命令
下面是一些winsows常用的命令，包含路径切换和文件操作（CRUD）。在某些时候，在编辑器里面操作文件需要权限，会一些windows命令总会快一些，免得到文件管理器里面操作文件，提升我们的开发速度。
2023-03-04 22:01:42
5859
原创 vue-cli（webpack）自动注入全局Sass或Less样式
在vue项目中，我们并不能像*.css一样，直接在项目入口main.js导入Sass/Less样式。那么，我们应该如何导入Sass/Less的全局样式呢。
2023-02-27 21:05:23
984
原创 JSON.stringify()方法 和 JSON.parse()方法
JSON.stringify()和JSON.parse()是一对处理JSON数据的方法，前者是将JSON对象序列化为字符串，而后者是将JSON字符串解析为JSON对象。
2023-02-16 21:02:25
1184
原创 使用reduce()+ arguments.callee() 方法实现不规则的多维数组扁平化
数组扁平化 是指将数组中不规则的多维数组去除维度，使其变成为一维数组。
2023-02-14 22:39:42
204
原创 使用FileReader + canvas.toDataURL() 实现图片压缩
主要借助FileReader读取文件、canvas的toDataURL(压缩后图片的格式, 要压缩图片的质量0~1)方法实现图片质量压缩。
2023-02-11 23:09:38
1297
原创 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent..
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
2023-02-06 16:01:52
55901
6
原创 安卓期末小项目TrackTable收支表+源码
这是一款账目记录、分析App，本系统主要功能有：用户登录注册、首页账单分析、上传账单、搜索账单信息、个人信息、重置密码、数据效验。系统功能图系统总用例图二、系统开发平台环境IDE：Android Studio2021.1.x插件：simpleUMLCE工具：Visustin v8 DemoJava版本：Java11OS：win11Database：SQLite5.4三、系统功能类图使用UML插件画类图，simpleUMLCE：在..
2022-05-21 18:23:06
1166
转载 axios中post请求 json 和 application/x-www-form-urlencoded 出错
qs.stringfy() 将对象序列转成URL的形式（字符串）
2022-04-25 12:43:57
1790
原创 [Vue warn]: Do not use built-in or reserved HTNL elements as component id: video
原因：在该组件<temlpate></template>标签内存在与该组件名取值相同的元素（name:'video'）template标签里面：video标签script里面的属性：解决：修改script里name属性值即可。
2022-04-03 21:12:16
1791
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人