- 博客(48)
- 收藏
- 关注
RSS订阅原创 前端下载文件时浏览器右上角没有保存弹窗及显示进度，下载完之后才会显示保存弹窗的问题定位及解决方案
在开发过程中会发现，有的时候下载后端返回的文件，浏览器右上角不会进行保存弹窗的弹出及下载进度，而是接口响应后文件下载完才会弹出保存并且没有进度条效果，这就导致在点击下载后用户是不知道文件下载到什么进度了，当然可以使用 onUploadProgress监听接口的进度去做一个进度条，但是会导致ui的差异。
2025-04-11 16:53:30
250
原创 react/vue中前端多图片展示页面优化图片加载速度的五种方案
图片更换为avif或者webp格式缩减图片大小，若svg可对svg进一步压缩，vscode中有很多插件支持，但是没有直接使用avif和webp格式效果好若公司有cdn合作商，可传入cdn，页面直接使用cdn链接nginx配置brotli压缩进一步压缩体积nginx配置开启浏览器缓存，提高后期体验感对banner或主图进行预加载操作，其他图片正常使用懒加载，使其队列进行优先加载变化及优化后期例如国际化切换效果无感卡顿。
2025-04-11 16:27:33
130
原创 react+Tesseract.js实现前端拍照获取/选择文件等文字识别OCR
在开发过程中可能会存在用户上传一张图片后下方需要自己识别出来文字数字等信息，有的时候会通过后端来识别后返回，但是也会存在纯前端去识别的情况，这个时候就需要使用到Tesseract.js这个库了 附Tesseract.js官方（https://github.com/naptha/tesseract.js）
2025-04-11 15:57:22
298
原创 HTML 嵌入标签对比：小众（＜embed＞、＜object＞） 与 ＜iframe＞ 的优缺点及使用场景和方式
特性<embed><object><iframe>主要用途多媒体资源（视频、音频）通用嵌入（PDF、Applet）独立 HTML 文档备用内容支持❌ 不支持✅ 支持✅ 支持浏览器兼容性HTML5+旧版浏览器兼容性更好所有现代浏览器安全性控制❌ 无❌ 有限✅ 支持sandbox性能影响中等中等较高（需加载完整文档）
2025-04-10 19:29:14
502
原创 react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除（无难度上手）
因为我实现时有两个这样的表格 所以我的事件里面会有传参用于判断 可忽略传参判断部分 代码中有formatMessage部分为国际化可忽略。做一个可以外部控制新增刷新表格 表格内部可以编辑删除 类似下方需求图。
2025-04-01 17:48:22
373
原创 react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
一个select框 现在要求可多选 并且原有一个any的选项 其他选项为输入后回车自己增加 若选择了any 则其他选项不可选择 并且新增时也不可直接加入到选中数组 并且不可重复添加新内容。
2025-04-01 17:34:28
302
原创 react中防止数据多大并需要二次加工处理进行单线程转多线程webworker优化处理（不借助react-webworker）
在开发中 有的需求往往和分页等会产生冲突 比如批量修改后又进行自定义修改 后端无法获取前置更改等 这个时候不分页数据量会很大而且需要我们对数据进行二次加工 然后需要我们进行优化处理 这就可以采取webworker多线程处理了 下面是一个没有借助react-webworker插件的原生简单例子。
2025-03-25 18:30:28
343
原创 h5使用wxsdk进行分享时安卓正常分享 ios分享时wx.config报 realAuthUrl invalid signature问题定位及解决方案
路由切换时操作的是浏览器的历史记录，iOS会把第一次刚进入时的URL作为真实URL，安卓会把当前URL作为真实URL，导致后端在配置好的授权参数获得的config参数和微信sdk获取的参数是不一样的，所以ios的url参数对不上会一直报错realAuthUrl invalid signature 当然别忘记ios是哈希路由模式 也需要将#后面部分进行截取否则也会导致无法对应。
2025-01-15 14:46:53
371
原创 h5使用wxsdk进行分享时不管成功没成功都会回调成功事件问题解决
h5项目开发时 有分享微信朋友及朋友圈的功能 这时候很大可能需要做埋点 但是现在微信官方给出回复是是为了保护用户的利益，不让开发者监测分享成功回调的，官方故意回收了分享是否成功的回调。
2025-01-14 17:58:50
232
原创 vue+vite项目运行error: [plugin: vite:dep-scan] No known conditions for “./lib/locale/lang/en“ entry in “
element-plus版本语言包路径位置发生了变化。
2025-01-13 15:49:58
460
原创 vue/react-h5中实现分享按钮点击分享微信好友/朋友圈（包含当前是否为微信浏览器判断）
在h5项目开发中 往往会有分享功能 将当前页面变为一个小卡片进行分享 若直接点击右上角的三个点进行分享 分享出去的只是一个当前路径 而不是卡片形式 当然分享的前提是你要使用微信浏览器去打开当前页面。
2025-01-10 16:40:55
455
原创 ERROR: Transforming async generator functions to the configured target environment 解决方式
运行或者打包vue项目中可能会弹出这个报错 它表明 不支持将异步生成器函数。
2025-01-10 10:48:14
573
2
原创 echarts地图添加标记点及自定义图标(包含大小属性)/悬浮提示语方式
项目开发中需要做省市区地图 并在地图上根据经纬度进行点位标记 并且伴有不同点位用不同图标进行展示。
2025-01-06 16:58:37
816
原创 前端做区域地图时免费获取省/市/区/街道/镇级geoJson数据方法
在开发过程中会有大屏的需求 往往都会有需要展示区域地图 比如区级/市级/省级 但是现在网络上只有免费的省市区的坐标geojson数据 但是到了区级没有了街道镇级的数据就没办法精确展示。
2025-01-02 18:05:17
1370
原创 vue中使用transform做一个呼吸提示点（基础型）
在日常开发中会遇到有消息的需求 这时候就会伴有一个有消息时候出现红点 点内有未读消息数 并伴有放大缩小闪动的效果。
2024-12-27 16:51:46
449
原创 vue中做一个最多输入一位小数且可以为负数的输入框（包含最前面最后面为小数点及多个-符号与前导零校验）
日常开发中会有对input做校验的需求 例如做一个只可以输入一位小数及可以为负数的输入框 这时候会出现0开头、多个--、多个小数点插入或开头结尾为小数点的情况。
2024-12-24 15:44:15
514
原创 SpringBoot的Thymeleaf做一个可自定义合并td的pdf表格
项目开发过程中 有需要生成pdf的需求 这种需求内可能会存在使用表格去展示一些数据给用户 使其更明显直观的对比数据 这时候会存在一个项目或者仪器对应了多个单子 这就用到了table的td合并。
2024-12-23 14:11:10
676
原创 vue中使用echarts做一个基础可滚动的折线图及dataZoom滚动配置项
在项目开发中有的页面会要求使用图表区显示以往数据 但时间跨度很大 数据比较多 若展示一个月的话 每天对应一组数据 那就是30条左右 全部堆积到图表上会密密麻麻的 这使用有几种解决方式 要么设置时间范围 要么就给图表加入滚动条。
2024-12-23 13:40:12
723
原创 html中实用标签dl dt dd（有些小众的标签 但是很好用）
html 是一组合标签，他们与ol li、ul li标签很相似 但是他却是没有默认前缀并且有缩进的标签 使用方式与table表格的标签一致。
2024-12-20 11:00:53
1450
原创 vue中打包dist文件内static 和 assets 的区别
在Vue.js项目中，assets和static是两个用于存放静态资源的文件夹，但它们在使用方式和处理机制上有所不同。
2024-12-13 15:51:34
1063
原创 vue运行项目时local有显示 但是network却显示unavailable
日常开发中 和后端本地调试时 后端需要使用你的本地去访问页面 可运行项目时会出现network显示unavailable的情况。
2024-12-12 14:24:14
1372
2
原创 dayjs（2kb）和momentjs（70kb）关系详述及项目中如何选择讲解
Day.js被设计为Moment.js的极简替代品，其API和用法与Moment.js几乎完全一致。这使得开发者在两者之间进行切换时，学习成本极低。
2024-12-12 13:41:11
491
原创 git commit提交时报错running pre-commit hook:lint-staged
在提交代码时 突然报错running pre-commit hook:lint-staged 下方则有报错文件及因为什么报错的提示。
2024-12-12 11:38:11
537
原创 vue中readonly、shallowReadonly、isReadonly作用与使用方法解读
在日常开发中 可能会存在你定义一个变量 这个变量你只是用于存入一组数据 不希望被更改 可是由于代码逻辑中使用函数不当并且没有进行深拷贝会导致数据被更改 或者传入子组件 被子组件影响改掉了父组件的参数 从而形成代码的一些bug 而readonly、shallowReadonly、isReadonly对这种情况就是一种很好的解决方式 他们有些类似于深拷贝和浅拷贝的关系。
2024-12-11 15:55:11
816
原创 vue中借助vueQr进行二维码生成及获取二维码图片功能（0难度上手）
需要在项目中做一个分享按钮 点击时弹窗弹出并含有一个二维码 扫码即可进入当前页面。
2024-12-05 16:40:08
389
原创 vue项目中复制功能实现（包含TypeError: Cannot read property ‘writeText‘ of undefined解决方案）
在开发过程中很常见遇到需要提供复制按钮进行一键复制。
2024-12-05 15:55:57
211
原创 vue中$notify的使用案例及api参数的讲解（需要在整个项目页面/单页面进行弹窗提示）
position: 弹出位置（top-right、top-left、bottom-right、bottom-left，默认为top-right）duration: 弹窗关闭的时间间隔（多少秒后自动关闭 默认为4500毫秒）type: 弹窗类型icon（success error warning message）offset：距离屏幕边缘偏移量showClose： 是否显示关闭按钮（默认是）
2024-12-05 15:29:06
693
转载 SpringBoot的Thymeleaf和Freemarker模板引擎
在Spring Boot中，模板引擎是用于渲染视图的重要组件。目前，Spring Boot支持多种模板引擎，其中最常用的是Thymeleaf和Freemarker。这两种模板引擎各有特点，选择合适的模板引擎对于提高项目开发效率和降低维护成本至关重要。Thymeleaf是一个用于Web和独立环境的现代服务器端Java模板引擎。它是一个开源项目，拥有强大的社区支持和活跃的。一、Thymeleaf。
2024-12-05 11:14:13
299
原创 nvm下载到使用全流程
平常开发时多项目同时开发 有的项目适用的node版本不一致 若直接下载node的话切换时卸载重新安装过于浪费时间 nvm可以很好解决此问题。
2024-12-03 13:11:24
731
1
原创 vue开发中使用chrome谷歌浏览器debugger不生效解决方式
在开发vue项目时 之前一直用的是Microsoft Edge进行开发 使用chrome开发时发现代码中的debugger不生效了。
2024-12-02 17:16:04
1006
1
原创 vue+arco design中封装一个支持单个多个上下换序需求的穿梭框
在vue+arco的项目中做一个导出按钮前置弹窗，弹窗内含一个穿梭框，并且支持穿梭框内有默认选中字段并且可以自己调整字段左右及上下位置以便导出表格内字段位置显示。
2024-11-22 16:41:45
374
1
原创 vue+element项目中报错Blocked aria-hidden on an element because its descendant retained focus. The focus m
【代码】vue+element项目中报错Blocked aria-hidden on an element because its descendant retained focus. The focus m。
2024-11-20 17:32:31
4468
2
原创 vue使用条码枪/球进行条码录入时，条码中非全数字时不触发回车事件
页面中有一处input框，需要进行扫码器扫码录入，正常全数字条码录入时正常触发回车事件，可我使用了一个带有英文的条码时，回车事件不进行触发，后续我到其他电脑的另一个项目试验时发现可以正常录入，均使用el-input，只不过现在的项目是v2使用keyup.enter.native触发而另一个项目是v3使用keydown.enter，结果定义为api问题。
2024-11-08 16:14:57
396
原创 vue2和3中父组件获取子组件数据和方法的几种写法
3.vue3中defineOptions内包setup写法。2.vue3中setup语法糖写法获取。
2024-10-28 17:25:40
731
原创 es6新增的endsWith和startsWith方法（简便对比字符串前缀和后缀）
需要对一个字符串进行判断是否为什么什么开头或什么什么结尾例：对上传的文件判断后缀。
2024-10-28 16:54:36
277
原创 web 使用XLSX导出excel文件实现全流程
pnpm i xlsx 或者 npm i xlsx进行依赖下载。进行页面表格数据导出（我使用的是。
2024-10-16 17:43:29
225
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人