- 博客(90)
- 收藏
- 关注
RSS订阅原创 若依框架favicon.ico缓存更新问题解决方案：本地生效但线上未更新
解决网站favicon缓存问题的6种方法：1.强制刷新缓存（Ctrl+F5/Cmd+Shift+R或清除浏览器缓存）；2.修改favicon引用方式（推荐），通过添加版本号或动态时间戳（如/favicon.ico?t=<%=new Date().getTime()%>）；3.检查vue.config.js配置；4.重新构建部署或配置服务器禁止缓存favicon；5.确认favicon.ico文件路径、名称和格式正确；6.多标签页需关闭重开或使用"清空缓存并硬性重新加载"功能。
2025-11-20 09:14:29
367
原创 解决若依框架点击菜单无效的问题（或者main主体白板）vue3版本
摘要：本文探讨了Vue路由组件渲染问题和前端缓存管理方案。针对路由视图空白问题，提出两种解决方案：1)在嵌套路由出口(AppMain.vue)添加$route.fullPath作为key强制重新渲染，而非在根组件添加以避免全局重渲染；2)移除transition的out-in模式以避免组件切换时的白屏现象。对于前端更新后的缓存问题，建议采用文件名哈希、合理配置服务器缓存策略、ServiceWorker更新控制和版本号检查机制，并提供了一套完整的版本检测和强制刷新方案代码实现。这些方法有效解决了路由组件复用导
2025-11-12 18:27:24
950
原创 el-progress自定义样式（element-plus）
本文介绍了Element UI中环形进度条(el-Progress)的使用方法。通过type="circle"可创建环形进度条，width属性控制其大小。重点讲解了如何自定义样式：1. 使用stroke-linecap属性调整进度条端点形状(round/butt/square)2. 通过CSS深度选择器::v-deep修改背景色和文字颜色3. 结合transform实现进度条旋转效果4. 利用插槽自定义进度条显示内容。文中还展示了完整的组件代码示例，包括设置进度条宽度、颜色、旋转角度等属
2025-11-05 11:53:42
906
原创 解决若依侧边栏收缩展开控制问题（vue3版本）
本文介绍了如何修改Pinia状态存储中的侧边栏默认展开状态。通过分析若依框架中useAppStore的代码实现，发现侧边栏状态(opened)默认从Cookies读取，若不存在则默认收起。要实现默认展开且不受其他影响，只需将opened属性改为固定值true即可，无需依赖Cookies或其他逻辑。修改后侧边栏会始终处于展开状态，且不影响其他功能如动画效果、设备适配等。这种修改方式简单直接，适用于需要强制展开侧边栏的场景。
2025-11-04 17:11:01
178
原创 前端引入及使用svg图片方式大全
本文介绍了10种在Web开发中使用SVG的方法，包括直接内联、img标签、CSS背景图、object/embed/iframe标签、JavaScript动态加载、SVG Sprite、CSS遮罩以及构建工具集成。每种方式各有特点：内联SVG支持完全交互但增加HTML体积；img标签简单可缓存但无法操作内部元素；SVG Sprite适合多图标管理；构建工具可优化项目配置。开发者应根据交互需求、性能优化和项目复杂度等因素，选择最适合的SVG引入方式，如需要动画选内联，简单展示用img标签，复杂项目推荐使用...
2025-10-10 15:18:31
1271
原创 国庆节快乐：中国国旗绘制与烟花效果（适配pc+移动端-带难点注释）
这篇代码实现了一个2025国庆节烟花特效页面，主要包含以下核心功能： 精确绘制的中国国旗：严格按照国旗法规定，使用Canvas绘制3:2比例的五星红旗，包括五角星的位置和角度计算。 动态烟花效果： 自动发射随机颜色的烟花 点击/触摸可触发额外烟花 完整模拟烟花发射、爆炸和消散的物理过程 关键技术点： 五角星绘制算法（黄金比例计算） 粒子系统管理（发射粒子和爆炸粒子） 物理模拟（重力、阻力） 动画优化（requestAnimationFrame） 交互处理（支持PC和移动端） 整个效果通过Canvas渲染实现
2025-09-30 11:00:18
473
原创 国庆节快乐：中国国旗绘制与烟花效果（pc）
实现了一个动态的国庆节祝福页面。页面包含：1. 中国国旗绘制（使用Canvas精确绘制五角星图案）；2. 国庆祝福语展示；3. 烟花特效效果（包含火箭升空、爆炸粒子效果）；4. 随机出现的祝福消息。页面加载后会自动播放烟花动画，并支持点击国旗或按空格键触发更多烟花效果。整体设计采用红黄色调，突出国庆主题，通过JavaScript实现了丰富的交互效果。
2025-09-30 10:54:59
407
原创 vue3中使用Object.assign 与扩展运算符进行赋值的区别
Vue3中修改嵌套响应式对象时，Object.assign和扩展运算符虽然都是浅拷贝，但存在重要区别。Object.assign直接修改原对象属性，可能保留不需要的旧属性；而扩展运算符创建新对象后赋值，代码意图更清晰，符合Vue推荐模式。两者都能保持响应性，但官方更推荐扩展运算符方式，因其能避免意外保留属性等问题。对于大型对象，扩展运算符会带来创建新对象的性能开销，此时可酌情使用Object.assign。Vue3更推荐使用ref处理需要完全替换的对象，因其通过.value赋值能更好保持响应性。
2025-09-29 15:48:24
885
原创 什么是指数退避算法（或者策略）？
指数退避是一种网络请求重试策略，在请求失败时逐步延长重试间隔时间（每次呈指数增长）。它能有效避免服务器过载，给服务恢复时间，并防止客户端同时重试造成"重试风暴"。典型实现包括：基础延迟、最大延迟限制、随机抖动和最大重试次数。算法公式为：等待时间=min(基础延迟*(2^重试次数),最大延迟)+随机抖动。该策略广泛应用于API调用、WebSocket重连等场景，在服务成功率与资源消耗间取得平衡，是构建高可用系统的关键技术。
2025-09-29 10:45:17
910
原创 什么是vue-demi？怎么使用？到底是优化还是桥梁？
vue-demi是一个帮助开发者编写同时兼容Vue2和Vue3代码的桥梁库。它提供统一的API接口和版本检测功能，使开发者无需维护两份代码。通过简单的安装配置，开发者在导入ref、reactive等API时，vue-demi会自动适配当前Vue版本。该库特别适合插件开发者和需要渐进式迁移的项目，能显著降低开发和维护成本，但不会直接影响运行时性能。使用vue-demi时，Vue2项目需额外安装@vue/composition-api。
2025-09-24 11:14:50
1205
原创 pnpm i后提示Ignored build scripts: @parcel/watcher, esbuild, vue-demi...和命令冲突：npx only-allow npm解决方案
摘要：PNPM默认禁止依赖包构建脚本执行，导致常见工具如@parcel/watcher、esbuild功能异常。可通过pnpm approve-builds命令审批或配置.npmrc文件设置白名单。对于强制使用npm的项目，需修改package.json中的preinstall脚本或改用npm安装。知名依赖如esbuild、vue-demi安全可信，可通过npm下载量和安全报告验证。
2025-09-22 14:24:54
1774
原创 vue2、vue3多组件通信方案（简单介绍）
摘要：本文介绍了Vue中5种组件通信方式：1)事件总线模式(Vue2/3)，通过发布/订阅机制实现跨组件通信；2)Vuex状态管理(Vue2)，采用集中式存储管理应用状态；3)Pinia状态管理(Vue3)，简化了Vuex的API；4)Provide/Inject依赖注入，适合深层组件通信；5)组合式函数(Vue3)，封装可复用逻辑。每种方式都详细说明了实现方法、核心概念和使用注意事项，并比较了适用场景，帮助开发者根据项目需求选择最佳通信方案。
2025-09-22 11:54:42
1063
原创 Vue 事件总线 主流的一些npm包推荐
Vue生态中常用的事件总线npm包包括：mitt（超轻量200B）、tiny-emitter（支持once方法）、eventemitter3（高性能）、vue-bus（Vue专属集成）和beesbus（TypeScript支持）。选择建议：Vue项目首选vue-bus，极简需求选mitt，TypeScript项目用beesbus，高性能场景选eventemitter3。使用时需注意内存管理、事件命名和错误处理，也可根据需要自定义实现事件总线。
2025-09-19 18:02:36
877
原创 请问token和cookie有啥区别？后台为啥不要token但是要cookie？难道cookie不是包裹token的容器？
本文对比了Token与Cookie的本质区别：Token是身份凭证（如JWT字符串），而Cookie是存储和传递Token的浏览器机制。从工作流程看，Token需要前端手动管理（存储、添加请求头等），而Cookie通过Set-Cookie自动完成认证传递。安全性方面，配置HttpOnly和Secure的Cookie能有效防御XSS攻击，但需防范CSRF；前端管理的Token则易受XSS威胁但免疫CSRF。后台建议使用Cookie方案的核心原因在于简化前端工作（浏览器自动处理）、提升安全性（后端控制凭证）及适
2025-09-17 17:45:55
780
3
原创 Git .gitignore 文件不生效的原因及解决方法
Git忽略文件失效问题解决方案 摘要：当.gitignore文件失效时，通常是因为文件已被Git跟踪、.gitignore位置错误、语法错误或缓存未清除。解决方案包括：1)使用git rm --cached移除已跟踪文件；2)确保.gitignore位于项目根目录；3)检查忽略规则语法；4)清除Git缓存。建议项目初期就设置好.gitignore，并定期检查更新。不同项目类型(如Node.js/Python/Java)需要配置特定的忽略规则，可使用GitHub提供的模板简化配置。
2025-09-12 18:10:28
1116
原创 探讨图片以Base64存数据库的合理性
**摘要：**Base64编码存储图片到数据库适合极简架构或需要事务一致性的场景，但存在明显弊端：数据膨胀33%，影响数据库性能、网络带宽和缓存效率；无法利用浏览器缓存、CDN加速和HTTP/2优势；处理图片需反复编解码。生产环境推荐替代方案：元数据和路径存数据库，图片存储在文件系统或对象存储（如AWSS3），兼具扩展性、高性能和低成本优势。
2025-09-11 17:47:50
1125
原创 uni.navigateTo传参方式（包含简单复杂及混合传参）
本文介绍了UniApp中使用uni.navigateTo进行页面跳转并传递参数的多种方法，包括：1.传递简单参数（字符串/数字）通过URL拼接；2.传递复杂参数（对象/数组）需JSON字符串转换；3.混合传递简单和复杂参数；4.其他参数设置（动画效果/页面通信等）。同时指出了URL长度限制、参数编码处理等注意事项，建议复杂数据使用状态管理或本地存储替代URL传递。
2025-09-11 11:49:32
1249
原创 git config user.name “xxx“命名报错fatal: not in a git directory
摘要：本文介绍了Git用户名设置的方法及常见错误。当在非Git仓库目录下设置用户名时会报错，需先进入项目目录或初始化仓库。设置方式分为本地配置（在仓库目录执行）和全局配置（加--global参数），本地配置会覆盖全局配置。设置完成后可通过gitconfig--list查看验证。文章还提供了初始化仓库和设置用户信息的完整命令行示例。
2025-09-08 15:07:08
388
原创 微信小程序如何进行分包处理？
小程序分包是将小程序拆分为主包和多个功能模块分包的技术，主要用于突破2MB单包体积限制（可扩展至20MB）和优化启动性能。主包包含启动必备的核心页面和公共资源，分包则按功能划分，实现按需加载。配置时需在app.json中声明subPackages字段，将非核心页面移至分包目录。独立分包可完全脱离主包运行，适合独立功能页面。注意事项包括：TabBar页面必须放在主包、严格控制主包体积、正确处理跨包引用关系，并可使用预加载机制提升用户体验。
2025-09-05 15:27:03
1785
原创 小程序的project.private.config.json是无依赖文件，那可以删除吗？
摘要：project.private.config.json是微信小程序开发中重要的个性化配置文件，由开发者工具自动生成。它包含开发者个人设置（如项目名称、编译选项等），会覆盖project.config.json中的相同配置。虽然静态分析工具会将其标记为"无依赖文件"（因其未被代码直接引用），但删除它将导致个人设置丢失，开发者工具会重新生成默认配置文件。该文件通常被排除在版本控制之外，以避免不同开发者之间的配置冲突。建议保留该文件以维持开发环境稳定性。
2025-09-05 10:45:19
1015
原创 开发过程中leafle和高德地图该如何选择？哪个更专业？
Leaflet和高德地图是两种不同性质的地图工具，它们的专业性体现在不同维度：Leaflet是一个开源JavaScript库，提供高度定制化的地图渲染能力，适合处理复杂地理数据可视化，但需要自行解决数据源和功能实现；高德地图是商业地图服务，提供现成的中国本土化地图数据和LBS功能，开发成本低、合规性好，但定制性较弱。两者也可以结合使用，用Leaflet控制地图渲染，同时调用高德API实现搜索导航等功能。选择取决于项目需求：数据可视化项目选Leaflet更专业，大众LBS应用选高德地图更专业。
2025-09-03 16:08:49
831
原创 GeoJSON的数据是从哪里来的?
GeoJSON数据主要来源于机器自动生成和人工辅助处理：1）机器生成是主流方式，包括卫星遥感测绘、程序化转换GIS数据、算法计算行政边界等；2）人工辅助主要用于数据校验修正，如专业测绘人员在GIS软件中勾勒地图要素，或通过众包平台（如OpenStreetMap）补充数据；3）纯人工输入坐标的情况极少，仅适用于极小数据量或特殊场景。GeoJSON本质上是机器生成、人工辅助协作的产物，而非单纯人工绘制。
2025-09-03 14:22:05
881
原创 SVG为什么需要 viewBox？理解“画布”与“视口”
SVG的viewBox属性定义了虚拟画布坐标系，通过它与width/height属性的配合实现图形自适应。当画布尺寸变化时，viewBox能保持内容比例不扭曲。文章通过画家与画框的比喻，对比有无viewBox的区别，并演示了三种典型场景：固定尺寸与响应式尺寸的对比、纯CSS控制的SVG图标，以及通过preserveAspectRatio控制对齐方式。关键点在于viewBox建立了独立于显示尺寸的坐标系，结合CSS可实现完美缩放的矢量图形，而preserveAspectRatio则进一步控制不同比例下的显示效
2025-09-01 18:12:55
1218
原创 让你从零开始全面掌握 SVG
本文介绍了SVG（可缩放矢量图形）的核心概念和应用。SVG作为基于XML的矢量图像格式，具有无限缩放、体积小、可编程交互等优势，适用于图标、数据可视化等场景。文章详细讲解了SVG基础语法、基本形状元素（矩形、圆形等）和强大的路径元素，并演示了如何使用CSS进行样式设置。此外，还介绍了SVG动画与交互的三种实现方式：CSS动画、SVG原生动画和JavaScript控制。最后指出SVG还有更多高级功能需要进一步学习。
2025-09-01 17:46:07
1452
原创 docker: Error response from daemon: Conflict.The container name “xxx“ is already in use by contain报错
【Docker容器名称冲突解决方案】运行时报错显示容器名"ceshiApp"已存在，提供三种处理方案：1）强制删除旧容器（docker rm -f ceshiApp）后重建；2）使用新名称启动（如ceshiApp_new）；3）重命名现有容器后再启动。注意端口3060需未被占用（netstat检查），删除容器会永久丢失未备份的数据。其他常用命令包括docker ps -a查看容器、docker stop停止容器等。
2025-08-15 16:22:11
677
原创 解决ECharts图表上显示的最小刻度不是设置的min值的问题
ECharts图表y轴最小值显示问题的解决方案：当设置yAxis.min为110时，图表可能从111开始显示刻度。本文提供三种解决方法：1）强制显示最小值标签（showMinLabel）；2）设置固定刻度间隔（interval）；3）动态计算刻度间隔（通过调整算法确保110成为刻度点）。同时介绍了数据标签的配置方法，包括显示位置、格式设置和颜色修改。这些方案可有效解决ECharts中y轴最小值显示不准确的问题，适用于各种数据可视化场景。
2025-08-15 15:43:56
839
原创 Vue响应式数据管理：如何根据需求控制数据响应性呢？
本文探讨了Vue开发中数据响应性的管理策略。首先分析了控制数据响应性的必要性，包括性能优化、安全需求和特殊场景应用。接着详细介绍了创建非响应式数据的方法，如组件外定义数据、Object.freeze()冻结对象以及深度冻结技术。对于响应式数据的创建，分别讲解了Vue2和Vue3的实现方式，并特别提醒Vue3中解构可能导致的响应性丢失问题。最后，对比了不同场景下的推荐方案，并提供了注意事项和优化建议。通过合理选择响应式或非响应式处理方式，开发者可以提升应用性能、增强代码安全性并避免常见陷阱。
2025-07-24 10:56:34
648
原创 React项目运行环境与执行顺序及动态路由等使用注意点
本文探讨了React项目中动态路由在不同环境下的执行问题及解决方案。文章指出开发和生产环境分别涉及Node和浏览器环境，分析了文件执行顺序差异导致动态路由无法正确渲染的问题。针对Ant Design Pro/Umi框架，提出了三种解决方案：运行时动态路由（推荐）、构建时预取数据（需插件支持）和自定义构建脚本。同时解析了package.json文件的关键配置，包括元数据、脚本命令、依赖管理等。最后总结了常见环境问题，强调浏览器API访问时机的重要性，建议在useEffect中执行相关操作，并正确处理环境变量。
2025-07-23 18:06:59
1203
原创 报错error:0308010C:digital envelope routines::unsupported解决方案
Node.js版本与加密算法不兼容导致npm run serve报错（error:0308010C）。主要原因是Node.js v17+升级OpenSSL 3.0后废弃了旧算法（如MD4），而旧版Webpack仍在使用这些算法。解决方案：1）临时方案：添加NODE_OPTIONS=--openssl-legacy-provider环境变量；2）长期方案：升级Vue CLI到5.x或Webpack到5.x；3）降级Node.js到v16.x及以下版本。推荐使用nvm管理Node版本切换。
2025-07-22 16:47:54
2441
1
原创 简单了解下npm、yarn 和 pnpm 中 add 与 install（i） 命令的区别（附上两图带你一目明了）
本文比较了pnpm、npm和yarn中包管理命令的区别： pnpm中add专用于添加新依赖（pnpm add react），i通用安装（pnpm i或pnpm i react）； npm无add命令，仅支持i/install（npm i react）； yarn中add添加依赖（yarn add react），i/install仅安装全部依赖（yarn）。 三者关键差异在于：add是否作为独立命令存在，以及install的功能范围。
2025-07-22 10:47:00
783
原创 Vue中最简单的PDF引入方法及优缺点分析
Vue项目中实现PDF预览的4种方法： 原生HTML标签法： 使用<embed>、<object>或<iframe>标签直接嵌入PDF 零依赖、简单易用但功能受限 存在跨域限制和固定样式的缺点 PDF.js解决方案： 引入pdfjs-dist库实现高级功能 支持文本提取、缩放、分页等交互功能 需要配置Worker路径，支持远程和本地PDF 提供完整的API控制能力 实现对比： 简单场景推荐原生标签法 复杂需求选择PDF.js方案 需权衡功能需求与实现复杂度
2025-07-22 10:17:52
1099
原创 解决el-select数据类型相同但是显示数字的问题
在Element UI的el-select组件中，当选项无法显示中文标签时，问题通常出在el-option的配置上。原代码只绑定了value属性而未绑定label属性，导致显示的是数字值而非中文标签。解决方案是：1)在el-option上添加:label="option.label"属性；2)确保v-model绑定值与option.value类型一致；3)可以简化标签内容。修改后的代码示例展示了如何正确配置，使下拉框能正常显示中文选项。
2025-07-05 16:44:40
381
原创 vue切换路由进入页面不会刷新页面解决方案
Vue路由切换时页面不刷新是SPA特性。解决方案包括：1)监听$route变化重新加载数据；2)给router-view绑定key强制组件重建；3)使用导航守卫处理数据刷新；4)手动刷新(不推荐)。动态路由参数变化推荐watch监听，不同路由可用key强制刷新。默认不刷新是为优化性能，复用组件减少渲染开销。根据场景选择合适方案即可实现数据重新初始化。
2025-06-30 11:57:25
1426
原创 Emitted value instead of an instance of Error) ＜tr＞ cannot be child of ＜table＞, according to HTML...
HTML表格报错摘要： 报错原因为Vue模板中直接使用<tr>作为<table>子元素，违反HTML规范要求<tr>必须位于<thead>、<tbody>或<tfoot>内。提供两种解决方案：1）添加<tbody>包裹<tr>元素；2）使用Vue的<template>标签循环渲染。方案1更推荐，既简单又符合规范，还能保持原有样式。修改后表格结构更规范，提高了SSR兼容性并规避未来浏览器兼容问题。
2025-06-27 11:37:56
830
原创 git远程分支重命名（纯代码操作）
Git 的远程分支是不能够直接重命名的.要重命名 Git 的远程分支，可以通过本地分支重命名后推送并删除...如果没有的话，先拉下线上的最新代码，然后创建一个...设置上游后，本地分支会与远程分支建立跟踪关系，后续操作...
2025-04-21 18:15:34
2047
原创 前端Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array 报错解决方案
出现了控制台TypeError: Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method.的报错本来是没有报错的，提供默认值确保数据已正确加载使用可选链和空值合并操作符添加类型检查...
2025-04-09 16:37:51
2167
原创 什么是Cache-Control？如何使用？使用好可优化web性能
一小时后："老板，这箱苹果过期了，检查下还能卖吗？这样每次请求的 URL 都不同，浏览器就不会缓存。决定了资源是否可以被缓存、缓存多久、如何验证缓存。→ 专门控制 CDN 缓存时间（优先级高于。，浏览器可以使用本地缓存，减少数据传输。→ CDN 边缘节点缓存 1 小时。→ CDN 会回源验证资源是否过期。等可缓存指令，CDN 会存储资源。（更严格，但可能增加服务器负担）。的内容（如用户信息、动态配置）。（如 JS/CSS/图片），使用。首次请求：下载资源并缓存（根据。会导致不必要的验证请求，不如。
2025-04-03 11:42:56
2305
原创 一个文件夹里面有很多项目，怎么一下把他们的node_modules全部删了
定义是 Node.js 项目中自动生成的目录，用于存放通过 npm（Node Package Manager，Node 包管理器）安装的 npm 包。功能：该目录使得项目能够方便地管理和使用第三方库和框架。通过引入这些包，项目可以快速地实现各种功能，提高开发效率和代码质量。但是好久没用的项目的包会占用大量的空间，可以使用命令删除...
2025-04-03 10:12:26
585
1
原创 预处理器Stylus的介绍及使用，并同Less、Sass进行对比（简单介绍）
Stylus是一种CSS预处理语言，它允许开发者使用更加强大和富有表现力的方式来写CSS代码...
2024-12-13 15:35:26
1534
原创 修改this.$confirm的按钮位置、图标、文字及标题
在Vue.js项目中，this.$confirm通常是基于某些UI库的对话框确认方法...使用h函数创建的虚拟DOM节点...
2024-11-20 16:45:05
2366
省市区json，带码值
2024-06-20
省市区下拉选择：3个el-select（json）
2024-06-20
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人