- 博客(106)
- 收藏
- 关注
RSS订阅原创 利用宝塔面板部署自己的前后端项目——亲测可试
作为一名前端工程师，项目部署往往是开发流程中的最后一道关键工序。今天我将分享如何使用宝塔面板这一强大工具，轻松部署前后端分离项目，让你从繁琐的部署流程中解放出来。
2025-12-21 21:47:49
750
原创 阿里Qoder开发工具：前后端开发者的编码利器！！！
在2025年的前端开发领域，AI工具已从“辅助角色”进化为“核心生产力引擎”。作为一线开发者，我亲历了从手动编码到智能协作的范式转变，而阿里Qoder的推出，更是将这一变革推向了新高度。本文将结合实战案例，解析Qoder如何重构前端开发流程，并分享其三大核心能力对团队的赋能价值。
2025-12-20 21:33:13
749
原创 Uniapp中实现微信分享好友功能。
本文介绍了在uniapp项目中实现微信分享功能的完整方案。首先需要配置基础环境，包括manifest.json设置和微信开放平台申请。核心是使用uni.share API，详细说明了必填参数如provider、scene等，并提供了分享图文到微信好友的代码示例。针对常见问题如内容显示异常、按钮不显示等给出解决方案，还介绍了系统级分享的扩展功能。该方案支持跨平台使用，开发者可根据不同平台特性进行调试优化。实现社交分享功能可有效提升应用传播和用户活跃度。
2025-12-20 20:46:20
323
原创 微信扫码登录SDK隐藏检测逻辑的解决方案
微信扫码登录SDK默认会检测本地微信登录状态，导致二维码不显示。本文提供解决方案：通过自定义CSS样式覆盖默认行为。使用WxLogin对象的href参数传入base64编码的CSS样式，隐藏多余元素并强制显示二维码。核心代码包括创建自定义CSS字符串并转换为base64格式，通过设置!important属性覆盖默认样式。该方法实现简单，风险较低，适用于大多数项目场景。
2025-12-13 15:48:30
225
原创 前端实现PC网站微信扫码授权登陆
本文介绍了基于Vue 3和Element Plus的项目实现PC端微信扫码授权登录的技术方案。系统提供手机号验证码登录和微信扫码登录两种方式，支持账号与微信绑定功能。技术栈采用Vue 3 Composition API、Pinia状态管理，并集成微信开放平台JS SDK。核心流程包括三种登录场景：手机号验证码登录、微信直接扫码登录（已绑定）和微信二次授权绑定（未绑定）。重点实现了微信二维码初始化、自定义样式优化、手机号验证逻辑及状态管理。该方案通过回调页面处理不同授权状态，实现了无缝的用户登录体验。
2025-12-09 14:57:14
1056
原创 Dify接入外部知识库-RAGFlow
本文介绍了Dify与RagFlow的集成方案，用于构建企业级智能问答和文档检索系统。RagFlow是一款基于深度文档理解的开源RAG引擎，支持多种文件格式解析和智能信息提取。文章详细说明了在Dify中配置RagFlow API密钥、连接外部知识库的具体步骤，包括获取知识库ID等关键操作。通过两者的深度集成，可有效解决企业知识管理碎片化问题，实现智能检索与生成技术的融合。随着RAG技术的发展，这种架构将在知识密集型行业发挥更大价值。
2025-12-06 16:07:10
326
原创 Dify 工作流设计-搭建电商智能客服。
Dify工作流设计器是一款可视化AI应用开发工具，通过拖拽节点方式快速构建复杂业务流程。文章介绍了其节点化设计和可视化连接两大核心特点，并以智能客服为例演示了从创建应用到测试的全流程。该工具通过模块化设计解决了传统开发中代码耦合、调试困难等问题，强调业务逻辑梳理、节点拆分和维护性优化。这种低代码开发方式正成为AI应用构建的新趋势，可显著提升开发效率和可维护性。
2025-12-06 15:41:22
356
原创 Dify 快速入门：搭建个人旅行规划助手
Dify是一个面向前端开发者的开源LLM应用开发平台，可快速构建AI应用而无需后端和机器学习知识。核心优势包括可视化工作流、多模型支持、RAG增强和一键部署。通过Docker或云服务版可5分钟快速上手，开发者能轻松创建智能客服等应用，并通过拖拽界面配置参数、测试优化。Dify显著降低AI应用开发门槛，实现从创意到产品的快速转化，适合前端开发者探索AI领域。
2025-11-24 13:42:42
425
原创 Vue3中发送请求时，如何解决重复请求发送问题？
在开发过程中，重复请求发送问题可能会导致数据不一致、服务器压力增加或用户操作异常。以下是解决重复请求问题的常见方法和最佳实践：
2025-11-22 13:45:40
298
原创 Electron + Vue3 进程通信全攻略——主进程与渲染进程的那点事。
本文对比了Electron中主进程与渲染进程通信的两种方式。传统send+on模式适合单向通知，需手动管理回复逻辑；现代invoke+handle模式基于Promise，简化了双向通信和错误处理。对于主进程主动推送数据，推荐使用webContents.send实现实时通信。文中提供了Vue3项目中的完整代码示例，建议根据场景需求选择通信方式：无返回值用send，需要返回数据用invoke，实时推送用webContents.send。
2025-06-22 11:55:23
1216
原创 React 19 中的useRef得到了进一步加强。
在 React 的世界里，`useRef` 是一个既简单又强大的 Hook，它常常被用于访问 DOM 元素、保存不可变数据或管理组件的生命周期行为。随着 React 19 的发布，`useRef` 的使用场景和最佳实践也得到了进一步强化。本文将结合 React 19 的特性，深入探讨`useRef` 的核心用法、常见误区以及实战技巧。
2025-06-20 12:36:43
959
原创 React 19中如何向Vue那样自定义状态和方法暴露给父组件。
在 React 的函数组件中，我们通常通过 props 将数据从父组件传递给子组件，而子组件通过状态（useState）和副作用（useEffect）来管理自身的行为。然而，在某些场景下，我们希望父组件能够直接调用子组件中的某些方法或访问其内部状态。这时，useImperativeHandle 就派上了用场。
2025-06-19 14:39:44
1252
原创 React 泛型组件:用TS来打造灵活的组件。
在 React 开发中，我们常常需要创建可复用的组件。然而，随着项目规模的扩大，组件需要处理的类型也变得多样化。为了在保持组件灵活性的同时确保类型安全，React 结合 TypeScript 的泛型组件成为了一种强大的解决方案。本文将深入探讨 React 泛型组件的概念、用法及其在实际项目中的应用。
2025-06-18 12:28:42
990
原创 高德地图点标记功能实现技术分享
本文详细介绍了基于高德地图API实现点标记功能的技术方案。首先讲解了基础环境搭建，包括API引入和地图容器初始化；随后重点阐述了核心点标记实现方法，涵盖基础标记、批量标记以及MarkerClusterer聚合功能；接着展示了自定义样式和事件处理等高级功能；最后通过门店标注案例和常见问题解决方案，为开发者提供实用参考。文章为在Web或移动端实现地图标记功能提供了完整的技术路径，帮助开发者快速掌握高德地图API的点标记技术要点。
2025-06-16 14:34:50
1851
原创 React中巧妙使用异步组件Suspense优化页面性能。
在 React 应用中，随着功能复杂度的增加，代码体积膨胀和首屏加载缓慢成为常见问题。异步组件技术通过按需加载和代码分割有效解决了这些痛点。本文系统梳理了 React 中实现异步组件的核心方法，包括 React.lazy 和 Suspense 的官方推荐方式，以及路由级代码分割的最佳实践
2025-06-16 14:07:31
739
原创 Vue2 与 Vue3 中环境变量配置的差异详解。
本文对比了Vue2和Vue3在环境变量配置上的主要差异：1）变量前缀不同（Vue2用VUE_APP_，Vue3用VITE_APP_）；2）访问方式不同（Vue2通过process.env，Vue3通过import.meta.env）；3）构建工具不同（Vue2通常使用webpack，Vue3倾向于Vite）。两者都需要创建.env文件并在package.json中配置运行命令，合理使用环境变量能提升项目的环境适应性和可维护性。
2025-06-14 09:44:07
844
原创 前端项目Excel数据导出同时出现中英文表头错乱情况解决方案。
本文解决前端Excel导出功能出现的表头中英文混杂问题。当导出数据包含中英文字段时，表头会同时显示两种语言。解决方案是通过数据预处理，将英文字段统一转换为中文对应项。具体实现方法是在导出前使用map方法重构数据对象，将所有属性名改为中文。最终导出的Excel表格呈现纯中文表头，符合业务需求。该方法简单有效，可供遇到类似问题的开发者参考。
2025-06-13 10:31:02
370
原创 Vue3封装全局自定义指令实现图片懒加载功能。
本文介绍了如何实现图片懒加载功能。首先编写自定义指令代码，使用IntersectionObserver监听图片是否进入可视区域，2秒后加载实际图片。然后将指令注册为全局自定义指令，在模板中使用v-my-img指令绑定图片数组。最终效果是页面上多张图片实现懒加载，优化页面性能。该方法实现了一个简单但有效的图片懒加载解决方案。
2025-06-13 09:45:41
468
原创 带你手写React中的useReducer函数。(底层实现)
本文解析React中useReducer的原理与应用，介绍Reducer如何集中管理状态逻辑、提升可预测性，并处理复杂状态。通过代码示例展示Reducer函数结构和useReducer钩子使用方式，重点实现自定义useReducer：利用useState存储状态，通过dispatch触发更新。文章还结合useContext演示实际应用场景，说明如何通过Reducer模式构建可维护的状态管理方案。
2025-06-12 10:17:36
831
原创 Vue3+Vite开发的移动端项目如何打包成app。(经验分享)
本文介绍了使用Vite打包Vue3移动端H5应用的完整流程。首先通过npm run build生成dist目录，然后在HBuilder中新建5+App项目并替换静态资源文件。重点说明了manifest.json配置注意事项和云打包操作，提供了避免白屏问题的解决方案（配置vite路径为相对路径）。最后强调在开发过程中需关注移动端适配、路由配置等关键点，并要及时处理页面加载异常等问题。该指南为开发者提供了从项目构建到APP打包的完整路径参考。
2025-06-11 12:10:28
2021
1
原创 从前端工程化角度解析 Vite 打包策略：为何选择 Rollup 而非 esbuild。
摘要：本文分析了Vite在打包阶段选择Rollup而非esbuild的技术考量。esbuild在开发阶段具有极速构建优势，但在Tree Shaking、代码分割、插件生态和生产级功能方面存在不足；而Rollup在生产构建时能提供更精准的代码优化、丰富的插件支持和稳定的输出质量。Vite采用两者结合的方案，在开发阶段用esbuild保证速度，生产构建用Rollup确保质量，实现了开发效率与产物性能的平衡。这种设计体现了前端工程化中对工具链优化和开发/生产需求差异的深刻理解，为项目构建提供了高效可靠的解决方案。
2025-06-01 21:31:11
1252
原创 Rollup打包输出产物遇到的一个坑。(分享心得)
本文分享了在Vite项目中使用Rollup的generateBundle钩子时遇到的bug：因项目路径含有中文导致无法获取原始文件信息。作者通过调试发现，当路径改为全英文后成功获取到打包产物信息。文章建议开发中应遵循英文路径规范，避免此类问题，尤其对团队协作和自动化部署场景更为重要。这则经验提醒开发者注意基础开发环境设置对构建工具的影响。
2025-05-31 11:25:14
462
原创 TypeScript 中高级类型 keyof 与 typeof的场景剖析。
TypeScript中的keyof和typeof是提升代码类型安全性的核心操作符。typeof可将运行时值映射为类型，实现类型复用；keyof能提取类型的所有键名生成联合类型。二者结合可用于：1)安全访问对象属性；2)创建映射类型和Pick类型；3)与Record结合定义键值对象。最佳实践建议避免过度使用typeof，并注意keyof在原始类型和联合类型中的限制。这两个操作符是TypeScript类型系统的基石，能显著提升开发效率和代码健壮性。
2025-05-30 15:46:45
776
原创 React 项目中封装 Excel 导入导出组件：技术分享与实践
在 React 项目中，处理 Excel 文件的导入和导出是常见的业务需求。无论是导出报表数据供用户下载，还是让用户上传 Excel 文件进行数据解析，一个高效、易用的组件都能极大提升开发效率和用户体验。本文将分享如何在 React 项目中封装一个通用的 Excel 导入导出组件，涵盖核心实现思路、代码示例以及最佳实践。
2025-05-30 12:49:43
826
原创 TypeScript 中的剩余参数：灵活处理可变数量参数
在 JavaScript 和 TypeScript 中，剩余参数（Rest Parameters）是一种强大的特性，允许函数接受可变数量的参数，并将它们收集到一个数组中。剩余参数极大地提高了函数的灵活性和可复用性。本文将深入探讨 TypeScript 中剩余参数的概念、用法及其在实际项目中的应用。
2025-05-28 18:53:30
1033
原创 TypeScript 索引签名：灵活处理动态属性对象
在 TypeScript 中，当我们需要处理属性名不固定或动态生成的对象时，索引签名（Index Signatures）便成为了我们的得力助手。索引签名允许我们定义对象的键和值的类型，从而在编译时提供类型检查。本文将深入探讨 TypeScript 索引签名的概念、用法及其在实际项目中的应用。
2025-05-28 18:42:31
1117
原创 TypeScript使用小技巧:灵活的交叉类型。
本文介绍了TypeScript中交叉类型的概念与应用。交叉类型通过&操作符合并多个类型，形成包含所有属性约束的新类型。主要应用场景包括扩展配置对象、组合功能模块和处理第三方类型扩展。文章通过具体代码示例展示了如何利用交叉类型实现类型复用与安全，同时提醒注意属性冲突、只读属性等限制。交叉类型能有效提升代码的健壮性和可维护性，是处理复杂类型系统的有力工具。
2025-05-24 17:27:43
880
原创 TypeScript小技巧使用as const：让类型推断更精准。
TypeScript中的as const是一个强大的类型断言工具，它能够防止类型宽化，保留更精确的类型信息。通过将变量标记为常量，as const可以帮助开发者：1) 保留字面量类型而非泛型；2) 将数组推断为元组类型；3) 使对象属性变为只读。文章通过配置对象和枚举替代方案等实际案例，展示了as const在提升代码类型安全性方面的作用。合理使用这一特性可以有效减少潜在的类型错误，优化TypeScript开发体验。
2025-05-24 17:20:57
1234
原创 前端项目中为啥Redux，Pina存储数据要结合本地存储？
在前端开发中，频繁从本地存储（如 `localStorage` 或 `sessionStorage`）中读取数据确实可能带来性能问题，尤其是当这种操作发生在高频触发的代码路径（如渲染循环、事件处理、定时器等）中时。以下是具体原因和优化建议：
2025-05-23 12:13:57
919
原创 React19 项目开发中antd组件库版本兼容问题解决方案。
在前端开发中，库与框架之间的兼容性问题时常困扰着开发者。最近，我在使用 Ant Design（antd）v5 和 React 19 时，遇到了一个兼容性警告：`Warning: [antd: compatible] antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for compatible.`。本文将详细解析这个警告的含义、原因以及解决方案，帮助同样遇到这个问题的开发者快速定位并解决问题。
2025-05-22 18:08:15
2744
1
原创 React 如何封装一个可复用的 Ant Design 组件
作为一名前端开发工程师，在日常项目中，我们经常会使用 UI 框架（如 Ant Design）来快速搭建界面。然而，直接使用框架组件可能会导致代码重复、样式不统一或功能扩展困难。本文将以封装一个 **可复用的表格组件** 为例，分享如何基于 Ant Design（antd）封装自己的业务组件，提升开发效率和代码质量。
2025-05-22 17:52:23
1406
原创 React 19版本refs也支持清理函数了。
React 19版本引入了ref支持清理函数的功能，使得在ref改变时执行清理操作更加便捷，类似于useEffect的效果。清理函数的主要作用是节约内存，避免内存泄漏。文章通过一个防抖请求接口的案例，对比了useEffect和ref清理函数的写法。useEffect通过依赖项控制清理操作，而ref清理函数则直接在ref回调中处理，无需额外引入useEffect。虽然ref清理函数简化了代码，但useEffect在精确控制依赖性方面更具优势。因此，在实际使用中，应根据具体需求选择合适的方式。
2025-05-18 15:02:56
753
原创 React Fiber 架构深度解析：时间切片与性能优化的核心引擎
在 React 生态中，性能优化始终是开发者关注的焦点。React 16 引入的 Fiber 架构，通过时间切片（Time Slicing）技术，彻底改变了 React 的渲染机制，为复杂应用的流畅运行提供了有力保障。本文将深入探讨 React Fiber 架构的核心概念，特别是时间切片技术，并通过手写 Fiber 节点结构来加深理解。
2025-05-17 18:56:33
1470
原创 JS 中 Object.keys() 和 Object.values() 的深度解析与应用
在 JavaScript 开发中，操作对象（Object）是日常任务之一。`Object.keys()` 和 `Object.values()` 是两个常用的内置方法，用于获取对象的键或值。虽然它们看起来简单，但在实际开发中有许多值得探讨的细节和应用场景。本文将深入解析这两个方法，并结合实际案例展示它们的用法。
2025-05-14 18:35:59
1264
原创 二次封装 Element Plus 的 el-table：提升开发效率与代码复用性
在前端开发中，Element Plus 的 el-table 组件虽然功能丰富，但在实际项目中直接使用可能导致代码重复、维护成本高和业务逻辑耦合等问题。为了解决这些问题，可以通过二次封装 el-table 来提升开发效率和降低维护成本。封装的目标包括统一配置、简化 API、增强扩展性和内置状态管理。具体实现步骤包括创建一个基础表格组件 BaseTable.vue，封装 el-table 的核心功能，设计合理的 Props 和事件，支持自定义列和插槽，并暴露必要的方法供父组件调用。
2025-05-14 18:27:33
1396
原创 二次封装 el-dialog 组件：打造更灵活的对话框解决方案
在 Vue 项目中，Element UI 的 `el-dialog` 是一个非常实用的对话框组件。但在实际开发中，我们经常会遇到需要重复设置对话框属性、处理相同逻辑的情况。通过二次封装，我们可以创建一个更灵活、更易用的对话框组件，提高开发效率并保持代码一致性。
2025-05-13 18:53:23
1112
原创 深入理解 JavaScript 中的 FileReader API：从理论到实践
在现代 Web 开发中，处理用户上传的文件是一个常见的需求。无论是图片预览、文档解析还是数据导入，都离不开对文件内容的读取和操作。JavaScript 的 `FileReader` API 正是为解决这类问题而生的工具。本文将详细介绍 `FileReader` 的核心功能、使用场景，并通过实际案例展示其强大之处。
2025-05-11 20:19:22
738
原创 Vue3简易版购物车的实现。
本文展示了一个使用Vue 3和TypeScript编写的简单商品管理系统。代码包括一个表格，用户可以新增、修改和删除商品，并实时计算商品总价。通过v-model实现双向数据绑定，computed属性用于搜索过滤和总价计算。用户可以输入商品编号、名称、价格和数量来新增商品，或通过点击按钮修改现有商品信息。删除功能通过splice方法实现。整体代码简洁明了，展示了Vue 3的基本用法。
2025-05-11 10:34:47
273
原创 H5 移动端适配最佳实践落地指南。
在移动端开发中，适配不同设备屏幕尺寸和分辨率一直是一个核心挑战。作为一名前端工程师，我在多个项目中积累了丰富的 H5 移动端适配经验。
2025-05-09 18:39:49
1850
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人