- 博客(202)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 H5 CSP 本地图片识别故障排查教程
H5页面选择本地图片后，因CSP策略未允许blob: URL导致预览或二维码识别失败。问题根源在于浏览器拦截了blob:图片加载，而img-src未显式授权blob:。修复方案为在img-src中增加blob:，如img-src 'self' data: blob: https:，避免修改其他指令。需确认最终响应头生效的CSP配置，优先通过Report-Only观察风险。若无法修改，可将图片上传至服务端处理，规避前端CSP限制。
2026-11-05 10:56:04
149
原创 Web Speech API 使用指南
本文介绍浏览器原生 Web Speech API 的语音合成（TTS）与语音识别（STT）能力，涵盖功能概览、兼容性检测、参数配置、语音选择、播放控制及事件处理。通过纯 JavaScript 实现，强调需检测支持情况、处理异步语音列表、合理降级，并指出其局限性——如依赖远程服务、无法导出音频、跨平台表现不一。适用于消息播报、语音输入等场景，但对音色固定、离线处理或高稳定性需求，建议使用专用 TTS/STT 服务。
2026-10-12 14:21:25
146
原创 前端RSA加密、MD5 摘要与 AES Token 登录技术方案
账号密码登录中 RSA 加密传输、MD5 加盐校验、AES Token 生成及 Redis 会话控制的完整前后端实现流程
2026-08-31 09:18:25
209
原创 vue3页面缓存设计与接入规范
页面缓存按路由名称保存，页面请求前写入、加载时恢复；左侧菜单进入时清理目标页缓存，特殊跳转也可先清理，登出时清空全部。默认使用 sessionStorage，同一标签页刷新可恢复，且每次存取、清理都同步更新内存和持久化数据。
2026-08-27 14:14:45
342
原创 Vue H5 纯前端扫码方案
本文介绍了在浏览器端实现二维码和条形码识别的解决方案，支持摄像头实时扫描和相册图片识别两种模式。主要内容包括： 功能概述：支持后置摄像头连续扫描、相册图片识别、模式切换，并处理各类错误场景（权限拒绝、设备不可用等），确保安全性和资源释放。 技术方案：基于Vue 3和html5-qrcode库实现，提供标准化结果协议和完整生命周期管理（启动/停止/清理）。 开发调试：详细说明HTTPS本地调试方案，包括Vite快速配置和mkcert可信证书生成方法。
2026-08-21 15:05:00
234
原创 企业微信联登与扫码通用业务方案
本文介绍了在企业微信环境下实现前后端联合登录和扫码功能的技术方案，核心要点如下： 通过企业微信外部身份凭证完成系统登录，后端验证并映射本地用户后签发独立会话，避免直接使用外部凭证访问业务接口。 扫码功能优先调用企业微信原生API，不可用时降级使用浏览器摄像头/相册识别。 明确划分四个参与方职责：企业微信提供环境能力、前端处理交互、后端完成身份验证、业务服务处理数据。 详细时序图展示了从页面加载到业务处理的完整流程，强调各阶段的独立状态管理。 提供企业微信环境判断、SDK初始化等前端实现细节
2026-08-21 10:24:41
387
原创 Vue H5 扫码接入指南
Vue H5 企业微信扫码接入指南摘要 本指南提供了一套标准化扫码接入方案，适用于Vue 3 + Vite的H5项目，支持企业微信原生扫码和浏览器摄像头两种模式。方案采用三层架构设计：扫码适配层（统一识别接口）、业务编排层（处理业务逻辑）和业务接口层（对接业务数据）。关键实现包括： 环境判断：自动检测企业微信/普通浏览器环境 模块化设计：拆分为环境检测、认证、扫码实现等独立模块 统一接口：所有扫码方式输出标准化结果格式 安全规范：前端不接触企业微信Secret，依赖后端完成签名 兼容性处理：支持摄像头故障时
2026-08-18 16:14:31
325
原创 docker开了之后Vemmen内存占比很高？wsl配置即可解决问题
WSL内存限制解决方案 问题：安装Dify后电脑卡顿，发现Vmmem占用10+GB内存。 解决步骤： 在用户目录创建/修改.wslconfig文件 配置关键参数： memory=2GB（限制内存） processors=2（CPU核心数） swap=4GB（交换空间） 管理员权限运行wsl --shutdown 重启Docker服务 效果：成功限制Vmmem内存占用，解决系统卡顿问题。
2026-04-08 10:05:14
85
原创 Element Plus el-dialog在高分屏缩放时样式异常问题解决方案
摘要：Element Plus的el-dialog组件在高分屏缩放环境（如125%）下会出现样式异常，主要表现为页面布局错乱和元素偏移。原因是其lock-scroll机制会自动添加el-popup-parent--hidden类并设置transform样式。解决方案推荐：1）设置:lock-scroll="false"禁用滚动锁定（简单有效）；2）通过CSS覆盖transform样式（不推荐）。最佳实践是默认禁用滚动锁定并确保弹窗内部滚动功能，同时在不同缩放比例下测试效果。该问题影响用户
2026-03-23 16:30:19
403
原创 使用jsencrypt加密前端密码
摘要 本文介绍了如何使用jsencrypt库进行前端密码加密。首先通过npm安装jsencrypt，然后封装加密方法：设置公钥并创建JSEncrypt对象，最后调用encrypt方法对密码进行加密。使用时只需导入封装好的方法，传入原始密码即可获取加密后的密码字符串。这种方法简单易用，能够有效提升密码传输的安全性。
2025-12-23 11:30:02
208
原创 前端浏览器设置input不记住密码、不自动填充密码，举例jquery
密码输入框安全优化方案 该方案通过以下步骤增强密码输入框安全性： 初始设置：将input类型设为text，清空自动填充属性，name属性设为空 页面加载后：清空值，随机生成name属性 用户首次聚焦时：切换为password类型，并应用CSS样式使输入显示为圆点 使用jQuery实现事件绑定和属性操作 关键点在于延迟显示密码字段，防止自动填充，并通过随机name属性增加安全性。
2025-11-06 23:45:34
265
原创 mac安装Trae并解决App Unavailable问题
摘要：用户在Mac上通过谷歌浏览器安装Trae国际版时遇到"App Unavailable"问题。解决方法是通过第三方工具进行离线下载安装，使用浏览器扩展工具完成安装并注册登录。最终成功解决了地区限制问题，使Trae能够正常使用。整个过程无需了解具体技术原理，只需按照步骤操作即可。
2025-08-20 22:47:14
1808
原创 vue2用elementUI做单选下拉树
摘要 本文介绍了一个基于Element UI的自定义树形选择组件实现方案。该组件通过组合el-input、el-popover和el-tree组件，实现了类似下拉树的功能，避免了使用级联选择器。主要特点包括：支持点击输入框或图标展开/收起树形菜单、可配置节点过滤功能、自定义节点渲染样式、点击外部区域关闭菜单等。组件通过v-model进行双向绑定，并提供了丰富的配置选项如禁用状态、占位文本、节点键名等。核心逻辑包括处理节点点击事件、设置当前选中值、同步显示标签等，为表单中需要树形选择但不想使用级联选择的场景提
2025-07-25 16:11:20
1113
原创 修复echarts由4.x升级5.x出现地图报错echarts/map/js/china.js未找到
ECharts 5.x 地图数据缺失问题解决方案 升级到 ECharts 5.x 后，发现地图模块报错找不到中国地图文件，原因是新版本移除了内置地图 JSON 文件。解决方案有两种：1) 手动下载中国地图 JSON 文件并注册；2) 通过 npm 安装相关依赖包（如 echarts-china-provinces-pkg）后引入地图数据。两种方法都需要使用 registerMap 方法注册地图数据。文中提供了地图 JSON 文件下载链接和代码示例。
2025-07-21 19:22:34
796
原创 iframe窗体默认白色背景去除
解决iframe加载时白色闪屏问题的方案 针对深色背景系统中iframe加载时出现白色闪屏的问题，文章提出以下解决方案： 设置iframe背景透明：通过CSS设置background-color: transparent 允许透明属性：在iframe标签添加allowtransparency="true" 加载时显示优化：使用visibility:hidden配合onload事件，待加载完成后再显示 最终方案同时应用以上三种方法，确保在不同环境下都能有效解决问题。
2025-06-24 23:43:49
852
原创 css使用clip-path属性切割显示可见内容
使用css属性clip-path可以裁剪很多奇形怪状的内容显示，也不需要额外的元素或者特殊处理，简单实现一些箭头、控制显示内容等。
2025-05-20 18:40:28
861
1
原创 vue3自适应高度超出折叠功能
本文介绍了一个实现内容折叠与展开功能的Vue组件。通过监听内容区域的高度变化，判断是否需要显示折叠按钮。当内容超过指定高度时，显示“展开”按钮，点击后展开内容并显示“收起”按钮。代码中使用了ref和computed等Vue特性，结合CSS样式实现平滑的展开与收起动画。组件还通过resize事件监听窗口大小变化，确保在不同屏幕尺寸下功能正常。整体实现简洁高效，适用于需要动态控制内容展示的场景。
2025-05-19 10:45:42
972
原创 css使用mix-blend-mode的值difference实现内容和父节点反色
CSS mix-blend-mode属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。
2025-04-08 00:42:04
556
原创 vue2版本elementUI的clearable属性和DateTimePicker 下拉框的清空功能冲突
vue2版本elementUI的clearable属性和DateTimePicker 下拉框的清空功能冲突解决方案。
2024-12-24 17:59:40
949
原创 echarts的toolbox自定义feature标签及事件
在使用echarts图时希望toolbox扩展一些自定义icon和点击事件，而不只是图中这些echarts提供的事件。feature除了各个内置的工具按钮外，还可以自定义工具按钮。
2024-06-06 13:20:02
1454
原创 vue2的form利用插槽修改错误提示UI
很多时候我们使用el-form想修改下错误提示的UI，比如table中使用form校验这类场景下错误提示的UI调整就非常重要。
2024-06-06 11:13:04
1089
原创 vue2的element的table组件使用form校验
vue2有时候做自增表格el-table，希望能够带一些校验，但又不想手搓校验逻辑，可以借用el-form的校验逻辑。
2024-06-05 16:31:26
1069
原创 ReactFlow的ReactFlow实例事件传参undefined处理状态切换
ReactFlow实例如果没有传监听事件方法，父节点就不会触发事件，那么我们试着切换传参处理。通过传参`undefined`，成功的没有触发对应事件，同时也没有出现渲染可拖拉拽连线的标志。
2024-05-07 23:25:45
821
原创 mac安装nvm管理node(手残流，git下载)
首先电脑里得有brew、git、vscode，看，看。我本人比较low，mac命令也记不熟，本篇就是git下载nvm，vscode看配置，省心不动脑子就可以了。
2024-04-20 14:16:01
1324
原创 vue2的ElementUI的form表单报错“Error: [ElementForm]unpected width”修复
ElementUI的form表单，当动态切换显示表单时报错 `Error: [ElementForm]unpected width`。
2024-02-20 19:04:07
3952
原创 Fiddler【autoResponder】直接模拟接口返回数据调试
Fiddler【autoResponder】直接模拟接口返回数据调试接口对接时需要更多可能的数据类型来满足调试系统健壮性。
2024-02-02 18:32:18
1024
原创 代码去除注释Remove Comments、合并行Join Lines、代码压缩Minify等vscode功能
代码去除注释Remove Comments、合并行Join Lines、代码压缩minify等vscode功能
2023-12-08 15:01:58
2288
原创 el-select的多选multible带全选组件二次封装(vue2,elementUI)
Select 选择器 多选需要增加 全选 和 取消全选 功能，前端框架为vue2，UI组件为elementUI。
2023-12-07 22:36:06
1268
java面试专用八股文
2025-03-07
el-select的多选multible带全选组件二次封装(vue2,elementUI)
2023-12-07
echarts双y轴对齐和0线对齐的数据处理js
2022-08-01
不同角度看前端 ppt.pdf
2019-11-01
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人