- 博客(101)
- 收藏
- 关注
RSS订阅
原创 Cursor + 云效 DevOps MCP
AI辅助开发正成为主流趋势，Cursor编辑器与阿里云效DevOps通过MCP服务集成，实现了从需求到代码变更的全链路自动化。开发者需完成环境配置、创建个人访问令牌，并在Cursor中手动配置MCP服务，将令牌嵌入JSON代码。通过智能会话指令，AI可自动完成分支创建、代码生成、提交推送及合并请求等操作，实现需求-代码-MR的闭环追溯。该方案显著提升研发效率，减少机械操作，同时确保权限精细化和安全性。
2025-09-02 11:03:32
1253
原创 如何实现从网页一键启动你的 Electron 桌面应用（zxjapp://）
本文详细介绍了如何通过自定义URL协议（如zxjapp://）实现从网页一键启动本地Electron应用。首先，通过app.setAsDefaultProtocolClient()方法注册协议，并在主进程中监听open-url事件以处理协议调用。接着，在网页中添加按钮，通过隐藏的iframe尝试打开应用，并利用页面可见性变化判断应用是否成功启动。文章还提供了Windows和macOS平台下的注意事项，如Windows注册表自动写入和macOS沙盒权限配置。通过这一方案，开发者可以轻松实现网页与本地应用的交互
2025-05-19 14:52:15
824
原创 在高德地图上加载3DTilesLayer图层模型/天地瓦片
提供的一个类，专门用于加载和渲染符合3D Tiles规范的数据。3D Tiles是一种开放标准，旨在高效地传输和渲染大规模三维地理空间数据集。提供的一个类，它允许你将Three.js场景作为一个图层添加到高德地图中。这个类封装了Three.js的核心功能，并与高德地图API进行了集成，使得我们可以轻松地在地图上展示3D内容。是Three.js中的一个类，用于为场景提供均匀的光照效果。同时，还可以添加其他类型的图层，比如瓦片图层，来丰富地图的内容。最后，我们需要初始化高德地图，并在地图加载完成后调用。
2025-01-06 17:57:01
1908
原创 Electron electron-builder.yml 配置 (自定义包名，用户自定义安装目录...)
【代码】Electron electron-builder.yml 配置 (自定义包名，用户自定义安装目录...)
2024-12-12 11:43:57
3069
3
原创 Vue FullPage.js 完整使用指南：Vue 3 官方全屏滚动解决方案
Vue-FullPage.js 是 FullPage.js 的官方 Vue 3 封装组件，提供全屏滚动功能，适用于数据大屏、产品展示等场景。安装后全局注册即可使用，支持导航点、滚动速度等丰富配置。基础使用需创建 <full-page> 容器包裹多个 section 内容区。高级功能包括自定义导航菜单和 API 控制。可能遇到的路由滚动冲突可通过禁用路由滚动行为解决。该插件特别适合企业数据可视化、领导驾驶舱等专业展示需求。
2025-09-12 10:54:33
642
原创 升级 Docker Compose 到最新版本：从安装到验证全指南
Docker Compose v2.39.2升级指南：本文详细介绍如何将Docker Compose升级至最新v2.39.2版本，适用于Linux x86_64系统。相比旧版，v2版本采用Go语言重写，整合为Docker CLI插件，性能更优。升级步骤包括：1.从GitHub下载对应二进制文件；2.移动至/usr/local/bin目录并赋予执行权限；3.验证版本确认升级成功。文中还提供了常用命令示例，如docker compose up/down等。通过升级可获得更好的兼容性和新功能支持。
2025-08-22 17:26:13
1677
原创 Next.js 项目 保姆级入门!!!!!!
本文介绍了如何使用 Next.js 框架创建一个简单的 TodoList 应用。首先，通过 create-next-app 工具初始化项目，并选择 TypeScript、ESLint、Tailwind CSS 等配置。接着，解释了 Next.js 13+ 的文件系统路由机制，展示了如何通过文件夹结构自动生成路由。最后，详细演示了如何实现一个 TodoList 页面，包括添加、切换完成状态和删除待办事项的功能。整个过程涵盖了客户端组件的使用、状态管理以及基本的 UI 交互，适合初学者快速上手 Next.js
2025-05-15 18:27:11
1243
3
原创 Electron 应用的升级机制详解
在产品迭代过程中，Electron应用通常采用全量升级和增量升级两种方式。全量升级需要用户重新安装整个新版本，优点是升级彻底，缺点是用户体验较差，适合功能变动较大的场景。实现方式可通过electron-updater库进行自动更新。增量升级则只更新修改部分，升级速度快、资源消耗低，适合小范围优化或Bug修复，核心是更新asar文件。实际项目中，可根据迭代节奏和用户需求选择合适的升级策略，或结合两者优势，采用混合模式以兼顾效率与质量。
2025-05-15 17:13:12
1099
原创 Electron详解：原理与不足
Electron是一个通过集成定制版本的Chromium和Node.js来开发桌面应用程序的框架。它通过消息轮询机制打通Node.js和Chromium的消息循环，并提供内置模块以支持开发者使用API。Electron应用由主进程和渲染进程组成，主进程管理窗口和核心逻辑，渲染进程负责用户界面，两者通过IPC通信。尽管功能强大，Electron存在应用体积大、版本更新快、安全性问题、资源消耗大、性能问题等不足，且不支持老版本Windows操作系统。这些因素开发者在选择Electron时需综合考虑。
2025-05-15 17:08:59
674
原创 Three.js模型材质调整与性能优化实战
本文介绍了材质调整与优化的关键技术，涵盖基础颜色与透明度控制、高级材质属性优化、性能优化、环境与后期处理以及动态材质交互。通过Material.color和opacity属性实现颜色与透明度的调整，利用MaterialPatch.ModifyMtlProperties批量修改材质物理属性，如粗糙度、金属感和自发光效果。性能优化方面，采用几何体合并与实例化、阴影优化策略减少渲染开销。环境与后期处理中，使用HDR环境贴图增强材质反射，并通过SMAAEffect实现高性能抗锯齿。动态材质交互部分，展示了光照动态调
2025-05-13 13:59:14
557
原创 使用 Cesium 构建 3D 地图应用的实践
以上就是基于 Vue 和 Cesium 构建 3D 地图应用的基本流程。通过这些步骤，你可以实现一个具备基础交互功能的 3D 地球应用，并支持加载自定义模型。
2025-05-08 13:33:15
670
原创 Cursor 配置快速生成vue3模版
在 Cursor 中，点击菜单栏的，进入代码片段配置页面。在搜索框中输入 “Vue”，如果首次使用可能没有对应的 Vue.json 文件。此时可以直接点击 “Vue”，系统会自动为你创建并打开一个空的 Vue.json 配置文件。
2025-05-07 15:45:34
1563
原创 使用 Vue3 + Webpack 和 Vue3 + Vite 实现微前端架构（基于 Qiankun）
在现代前端开发中，微前端架构逐渐成为一种流行的解决方案，尤其是在大型项目中。通过微前端，我们可以将一个复杂的单体应用拆分为多个独立的小型应用，每个子应用可以独立开发、部署和运行，同时共享主应用的基础设施。本文将详细介绍如何使用 Vue3 + Webpack 作为主项目，Vue3 + Vite 作为子项目，并通过 Qiankun 实现微前端架构。
2025-04-28 15:10:04
749
原创 Vue3 实现扫码枪监听与二维码解析
方法，将传入的 URL 转换为 Base64 编码的 Data URL 图片格式。这个方法是异步的，因此需要用。的 prop，用于接收外部传递的 URL 地址。这个地址将作为二维码的内容。方法，确保二维码在页面加载时自动生成。属性，将生成的二维码图片显示在页面上。运行后，页面会显示一个基于。在组件挂载完成后，通过。生命周期钩子自动调用。
2025-04-23 11:39:50
1315
2
原创 Vue3 + TypeScript 实现二维码生成与展示
方法，将传入的 URL 转换为 Base64 编码的 Data URL 图片格式。这个方法是异步的，因此需要用。的 prop，用于接收外部传递的 URL 地址。这个地址将作为二维码的内容。方法，确保二维码在页面加载时自动生成。属性，将生成的二维码图片显示在页面上。运行后，页面会显示一个基于。在组件挂载完成后，通过。生命周期钩子自动调用。
2025-04-23 11:34:29
771
原创 Nginx配置终极指南：从入门到企业级配置大全
配置管理原则使用include拆分配置文件版本控制所有配置变更定期进行配置审计安全黄金法则定期更新OpenSSL版本性能调优检查表# 自动匹配CPU核心# CPU亲和性# 单个连接最大请求数# 文件缓存调试技巧# 配置检查 nginx -t # 流量重放测试 goaccess /var/log/nginx/access.log # 实时监控 nload -u Miftop -P。
2025-04-21 11:33:57
615
原创 自动生成树形目录结构：与 `el-tree` 和滚动定位结合的完整解决方案
函数清理标题中的 HTML 实体字符和多余空格，确保目录文本的可读性。通过解析 HTML 文档中的标题标签 或者 富文本框收集的数据（如。组件展示树形目录，并通过节点点击事件触发滚动定位。点击目录中的节点时，页面会平滑滚动到对应的内容部分。方法，根据节点信息定位到对应的文档内容。使用 Element Plus 的。数据格式的树形目录。
2025-03-20 21:32:36
581
原创 Vue 3 实现富文本内容导出 Word 文档：前端直出方案与优化实践
优势亮点🚀 300ms 内完成文档生成🖨️ 完美兼容 WPS/Office 等办公软件📦 零服务端依赖🔒 内容不经过网络传输扩展方向与后端协作实现模板化导出集成电子签名功能添加文档加密保护源码参考提示：生产环境建议添加文件大小监控，防止生成超大文档导致浏览器崩溃。
2025-03-05 18:42:37
2171
原创 Vue 3 实现 HTML 内容预览功能：仿 Word 样式与内存安全实践
/ 子组件暴露接口previewHtmlAsWord // 显式暴露预览方法});通过本文实现的预览组件具有以下优势：🚀性能优异：本地处理无需网络🔒安全可靠：沙箱隔离 + 内存自动回收📑专业呈现：完美还原 Word 版式🔄易于集成：开箱即用的组件化方案。
2025-03-05 18:28:28
976
原创 Vue 3 整合 WangEditor 富文本编辑器：从基础到高级实践
通过本文的实践，我们已经实现了：✅ 编辑器的完整集成✅ 云端图片上传✅ 数据双向绑定✅ 工具栏定制✅ 内存安全防护官方资源WangEditor 官网GitHub 仓库。
2025-03-05 18:23:10
1419
原创 Vue3 使用 MinIO 实现文件上传功能详解
MinIO 是一款高性能的对象存储系统，专为大规模 AI/ML、数据湖和数据库工作负载而设计。它兼容亚马逊 S3 API，并支持软件定义存储，无需购买任何专有硬件即可在云上或普通硬件上部署分布式对象存储。
2025-02-20 11:33:50
1225
原创 Go语言入门指南
Go语言，作为一门现代编程语言，自诞生以来便备受开发者青睐。它以其简洁的语法、高效的性能和强大的并发支持，迅速成为云服务开发、后端开发以及微服务架构中的热门选择。本文将从Go语言的历史背景、特性、安装方法到快速入门等方面进行详细介绍，帮助你快速上手这门语言。Go语言（Golang）由Google公司于2007年9月30日启动研发，并在2009年11月10日正式开源。它的设计初衷是为了满足大规模软件开发的需求，解决C++和Java等传统语言在构建大型系统时遇到的问题。Go语言的主要创造者包括：经过三年的研发，
2025-02-19 11:16:56
1165
原创 Vue 项目自动化：运行后自动打开浏览器的多种配置方法
在Vue工程化项目中，配置项目运行完成后自动在浏览器中打开是一项非常实用的功能，它能够显著提高开发效率。下面将详细介绍几种实现这一功能的方法。
2025-02-19 10:38:30
1203
原创 前端项目零停机部署方案与最佳实践
将每个版本的前端资源部署到独立的目录中，而不是直接覆盖现有的文件。通过修改服务器配置（如 Nginx 或 Apache）来动态指向最新版本的目录。使用自动化部署工具（如 Jenkins、GitLab CI/CD、Ansible 等）来简化部署流程，减少手动操作带来的延迟。蓝绿部署是一种常见的零停机部署策略，通过同时运行两个版本的应用程序来实现无缝切换。创建一个软链接指向当前版本的目录，在部署时只需更改软链接的目标即可。只更新发生变化的文件，而不是删除整个目录再重新上传。
2025-02-12 17:36:28
893
原创 使用 Web Speech API 构建通用的语音播报工具函数
允许选择特定的声音类型。例如，在某些实现中可以选择男声、女声或者其他特色声音。本文聚焦于后者——语音合成（TTS），即通过 JavaScript 将文本转换为语音播放出来。这些事件可以帮助监控语音合成过程中的各个阶段，从而实现更复杂的交互逻辑。较低的值意味着较慢的语速，而较高的值则表示较快的语速。改变音调可以区分不同的说话者或者表达情感变化。: 定义了语音的语言环境。: 调整语音的音调高低，范围从。获取所有可用的声音列表来实现。: 控制语速，取值范围为。: 设置播放音量，范围为。
2025-02-12 14:26:45
728
原创 用户体验UP！响应式网页设计的CSS魔法
【代码】用户体验UP！响应式网页设计的CSS魔法。响应式网页设计的CSS技巧，响应式网页的CSS布局方案，响应式网页设计的CSS优化策略，响应式网页设计的CSS终极指南，9个必备CSS技巧
2025-02-11 11:11:43
622
原创 使用 js-cookie 和 localStorage/sessionStorage 构建高效的浏览器缓存管理
是一个轻量级的 JavaScript 库，提供了简洁的 API 来读取、写入和删除 Cookies。通常需要跨多个页面共享，并且可能涉及到安全性问题（如HTTPS），所以选择将其存储在 Cookies 中，而不是。两者的主要区别在于数据的生命周期不同，因此在实际应用中可以根据需求选择合适的存储方式。更加易用且功能丰富，支持自动编码/解码、路径和域设置等功能。此外，为了确保键名的一致性和可维护性，定义了一个。在不同页面之间的传递，还能利用。方法来为每个键添加前缀。提供的安全特性，如设置。
2024-12-21 16:38:04
485
原创 构建健壮的 Axios 请求管理器：提升 React 应用的 API 交互体验
首先，我们需要安装axiosaxios：用于发起 HTTP 请求。qs：用于序列化复杂的查询参数，支持点号表示法（如user.namenprogress：用于显示加载进度条，提升用户体验。：提供一些常用的 UI 组件，如 Toast 提示框。我们根据不同的错误类型（如超时、网络错误、接口路径找不到等）生成相应的错误提示信息。通过Toast组件显示这些提示，用户可以清楚地了解发生了什么问题，并采取相应的行动。现在，我们可以在项目的其他地方使用这个自定义的 Axios 实例来发起 API 请求。
2024-12-19 18:08:13
1249
原创 实现 React 电子签名功能：从零开始构建一个完整的解决方案
我们希望通过 React 构建一个简单的电子签名组件，用户可以在画布上手写签名，完成后可以保存签名并将其上传到服务器。用户可以在画布上自由绘制签名。提供“清除”按钮，允许用户重置签名。提供“保存”按钮，将签名保存为图片文件并上传到服务器。签名应以 Base64 格式保存，并转换为文件流后上传。使用 MinIO 作为文件存储服务，确保签名文件的安全性和持久性。
2024-12-19 18:00:13
982
原创 Electron-Vite 项目搭建（Vue）
electron-vite如果一切设置正确，能够看到Electron 应用程序。完成上述步骤后，脚手架将会自动搭建好项目结构。的文件夹，并在其中创建一个。桌面应用
2024-12-12 11:30:12
1464
1
原创 Vue3 实现拖拽小图片覆盖大图片并下载合并后的图片
2. 拖拽小图片使用 来引用大图片和小图片，并通过监听鼠标事件来实现拖拽功能。使用 HTML5 Canvas 来绘制合并后的图片，并提供下载功能。在组件挂载完成后，动态创建一个下载按钮并添加到页面中。
2024-11-09 15:47:45
1282
原创 Vue 3 对接保利威云点播播放器实践
首先，需要在项目中引入保利威的云点播播放器脚本。这个播放器的脚本可以从保利威的官网获取。我们将使用 Vue 3 的onMounted这些生命周期函数来加载和卸载播放器。
2024-10-24 17:34:19
782
原创 在 Vue 3 中实现电子签名组件
在 Vue 3 中实现一个简单的电子签名组件，并解决一个常见问题：当签名组件放在弹窗内时，鼠标绘制会出现偏移的问题。
2024-10-22 18:23:14
3049
原创 Vue3 使用CryptoJS加密
现在的互联网世界充满了各种各样的信息，有些信息非常重要，比如密码、个人信息等。如果我们把这些信息直接发送到服务器，别人可能会截取到，然后偷走我们的信息。为了避免这种情况发生，我们需要把重要的信息变成别人看不懂的东西，这就是加密的作用。CryptoJS 是一个非常好用的 JavaScript 库，它能帮我们加密和解密信息。另外还有一个叫“偏移量”的东西，它可以帮助我们更好地加密信息。这个函数接收加密后的文字，然后返回正常的明文。我们创建一个简单的 Vue 组件，让用户输入一些信息，然后可以加密和解密。
2024-10-12 11:19:42
2285
原创 Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
2024-10-12 10:41:56
1117
原创 H5扫码 html5-qrcode + React中使用
是一个轻量级的库，可以让你在网页上轻松实现二维码扫描功能。它支持多种设备和浏览器，并且提供了丰富的配置选项。注：网络协议必须是HTTPS协议，否则访问不了手机摄像头。
2024-09-23 11:54:21
1353
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人