风清云淡_A-CSDN博客

原创【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能

本文介绍了如何通过自定义React Hooks封装可复用的业务逻辑。示例包括：1) 修改页面标题的useTitle Hook，通过useEffect设置document.title；2) 捕获鼠标位置的useMouse Hook，使用useImmer管理状态并监听mousemove事件；3) 处理异步请求的useGetInfo Hook，管理加载状态和数据获取。这些自定义Hooks都基于React原生Hooks构建，可返回特定值或作为副作用函数使用，有效优化代码复用性。

2025-07-24 15:09:03 247

原创【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据

本文演示了如何在React中使用useRef、forwardRef和useImperativeHandle实现父子组件通信。子组件通过forwardRef暴露方法，父组件通过ref调用子组件的handleFocus、handleSelect和handleClick方法。子组件内部使用useImperativeHandle对外暴露方法，并维护状态数据。这种模式适用于需要从父组件直接操作子组件功能的场景，如获取焦点、选中文字或修改信息等交互操作。

2025-07-24 12:06:50 195

原创【REACT18.x】CRA+TS+ANTD5.X实现数据的增删改查

摘要：本文实现了一个完整的问卷列表增删改查功能，通过封装QuestionCard组件展示每个问卷项，并使用useImmer管理状态。主要功能包括：1) 编辑问卷标题；2) 删除问卷；3) 切换发布状态；4) 新增问卷。代码采用React+TypeScript开发，界面使用Ant Design组件库，实现了良好的类型检查和状态管理。通过immer库简化了不可变数据的操作，确保数据更新时的正确性。

2025-07-24 09:19:08 272

原创【REACT18.x】creat-react-app在vscode中,使用husky对代码提交进行规范化校验

本文介绍了如何使用Husky和Commitlint规范Git提交信息。首先通过npm install --save-dev husky安装Husky，并初始化生成.husky目录。然后配置pre-commit钩子执行代码校验，确保提交前通过ESLint检查。接着安装Commitlint相关依赖，创建配置文件规范提交信息格式，要求符合"type: description"的标准模式（如feat/fix/docs等类型）。最后通过修改文件编码解决可能出现的校验问题，实现规范的提交流程控制。这

2025-07-19 16:08:32 550

原创【REACT18.x】creat-react-app在vscode中，实现代码保存后的自动prettier配置

本文介绍了如何在VSCode中统一团队代码风格的三步方案：1）安装Prettier并配置规则文件；2）安装Prettier插件；3）设置VSCode默认格式化工具为Prettier。通过.prettierrc.js文件定义具体格式规则（如单引号、缩进等），并在VSCode配置中指定Prettier为各类文件的默认格式化工具，实现保存时自动格式化。文末展示了TSX、CSS、HTML等文件的格式化效果，证明该方案能有效统一团队代码风格。

2025-07-19 14:47:04 252

原创【REACT18.x】creat-react-app在添加eslint时报错Environment key “jest/globals“ is unknown

文章摘要：在创建React项目时添加ESLint支持遇到报错"Environment key 'jest/globals' is unknown"。问题原因是环境变量中包含了jest库的配置。解决方案是修改package.json文件，移除相关的jest配置项。修改后重新启动项目即可正常运行。文中提供了错误截图和解决步骤图示。

2025-07-19 10:27:13 243

原创【鸿蒙HarmonyOS】鸿蒙app开发入门到实战教程(三):实现一个音乐列表的页面

本文介绍了如何在鸿蒙系统中实现一个音乐播放列表功能。通过定义歌曲数据结构（包含封面图片、歌名和作者信息），使用List组件展示播放列表。每个ListItem包含封面图片、歌曲信息（歌名、作者和VIP标识）和操作按钮。当用户点击某首歌曲时，会显示音波动画效果表示当前播放状态。代码展示了完整的页面布局和交互逻辑，包括标题显示、列表渲染和点击事件处理，实现了一个简洁美观的音乐播放界面。

2025-07-15 11:17:41 357

原创【鸿蒙HarmonyOS】鸿蒙app开发入门到实战教程(二):封装自定义可复用组件

本文介绍了在鸿蒙系统中实现组件复用的两种方法。局部封装使用@Builder装饰器在组件内部定义可复用的UI构建函数，通过this调用；全局封装则将@Builder函数定义在组件外部，实现跨组件的复用。两种方式都能构建包含标题文本和更多图标的行布局，通过参数设置默认标题，支持链式调用配置样式。全局封装更灵活，可在多个页面共享使用，提高了代码复用性和开发效率。

2025-07-15 09:30:21 203

原创【鸿蒙HarmonyOS】鸿蒙app开发入门到实战教程(一):条件判断与数组展示

本文介绍了鸿蒙(HarmonyOS)开发中实现条件判断和数组迭代的方法。在条件判断方面，通过Boolean变量控制Text组件的显示内容；数组迭代使用ForEach遍历数字数组并显示每个元素。同时展示了购物车数量加减功能的实现，通过按钮点击事件修改状态变量并更新显示。文章还提供了完整的组件代码示例和效果演示，帮助开发者快速掌握鸿蒙应用开发中常见的交互逻辑实现方式。

2025-07-14 17:30:41 138

原创【原生js】原生js实现页面的弹性拖动

本文演示了如何使用原生JS结合jQuery实现页面上下拖动的弹性效果。通过监听touch事件，计算移动距离和速度，实现列表内容的平滑滚动。当内容到达边界时，通过transform动画产生弹性缓冲效果。代码采用jQuery简化DOM操作，核心逻辑包括：记录触摸起始位置、计算移动差值、边界判断处理以及松手后的惯性滚动。该方法不依赖现代UI框架，适用于移动端H5页面开发，实现了类似原生APP的交互体验。

2025-06-27 16:28:39 203

原创【springboot3】整合mybatis-plus出现PaginationInnerInterceptor拦截器找不到的问题

在Mybatis-Plus 3.5.12版本中，PaginationInnerInterceptor类已被单独抽离。解决方案是额外引入mybatis-plus-jsqlparser依赖（版本需与主包一致）。配置拦截器时，创建MybatisPlusInterceptor实例并添加PaginationInnerInterceptor即可。注意保持相关依赖版本统一（如3.5.12），该问题通常由版本升级导致类路径变化引发。

2025-06-24 16:05:25 393

原创【springboot3】整合mybatis出现Invalid value type for attribute ‘factoryBeanObjectType‘: java.lang.String

摘要：SpringBoot3整合MyBatis时遇到"Invalid value type for attribute ‘factoryBeanObjectType‘"错误。检查业务代码无果后，发现是版本兼容性问题。将mybatis-spring-boot-starter从3.0.2升级到3.0.4后解决主要报错，同时更新mysql-connector-j驱动版本以解决兼容性问题。最终项目成功启动，日志输出正常。该问题提示开发中需特别注意依赖版本匹配。（150字）

2025-06-23 16:14:56 306

原创【mongoose8.x】mongoose8.x入门教程(三):express中mongoose数据更新和删除

本文介绍了使用Mongoose实现数据修改和删除操作的方法。首先展示如何通过findByIdAndUpdate修改指定ID的商品名称，并演示API调用和数据库验证过程。接着说明如何用findByIdAndDelete删除单条数据。最后讲解批量删除的实现，包括deleteMany方法的使用，以及通过$in操作符删除指定ID集合的数据。文章还提到谨慎使用deleteMany({})进行全表删除，建议在实际业务中添加确认弹窗防止误操作。所有操作都配有代码示例、API调用截图和数据库验证结果。

2025-06-20 09:53:41 207

原创【mongoose8.x】mongoose8.x入门教程(二):express中mongoose的链接

摘要：本文介绍了如何在Node.js后端框架(如Express或Koa)中使用Mongoose操作MongoDB数据库。内容包括项目初始化、Mongoose连接配置、创建Collection模型、查询和新增商品数据的实现，以及统一返回结果的封装。通过示例代码演示了使用async/await进行数据库查询和新增操作的方法，并使用测试工具验证了接口功能。文章还展示了如何在MongoDB可视化工具中查看持久化后的数据。整个流程涵盖了从项目搭建到数据库增查操作的完整实现。

2025-06-19 18:10:09 476

原创【mongoose8.x】mongoose8.x入门教程(一):windows环境安装篇

本文介绍了MongoDB最新8.x版本的主要变化及安装使用方法。重点指出必须单独安装Shell工具(mongosh)，Windows自带shell已无法使用。文章详细说明了MongoDB Community Edition的下载安装过程，强调需要合理配置安装目录和data/log文件夹。同时介绍了Compass可视化工具的使用方法，通过命令行和图形界面两种方式演示了数据库的基本操作。安装完成后可通过mongosh执行show dbs等命令进行验证，成功运行即表示本地开发环境配置完成。

2025-06-19 17:46:45 173

原创【react18】在styled-components中引入图片报错

在styled-components项目中，背景图片无法显示的问题

2025-05-21 14:43:44 448

原创【vue3】vue3中封装懒加载指令

在电商网站或图片密集的企业官网中，图片懒加载是性能优化的关键技术之一。通过延迟加载图片，可以减少HTTP请求次数，从而减轻服务器压力。本文介绍了如何使用Vue3和VueUse库实现图片懒加载。通过useIntersectionObserver监听图片是否进入视口，动态加载图片，并在加载完成后停止监听以优化性能。代码示例展示了如何封装懒加载指令，并提供了全局或局部注册指令的方法。最后，文章还演示了如何在组件中使用该指令，进一步提升网站性能。

2025-05-09 17:35:28 312

原创【vue3】pinia调试状态的插件安装

在使用vue3进行公共状态数据配置的时候，一般都会用到pinia这个插件，要像调试vuex一样调试pinia里面的数据，要安装适配的Vue.js Devtools插件才行。

2025-05-08 11:35:40 301

原创【angular19】入门基础教程(四):默认的css隔离作用域

众所周知，在vue和react框架中，我们css都是全局作用域的，如果不显示声明为私有的组件级别作用域，会影响到全局的布局样式。所以在vue中，需要配置scoped这样的属性来限制css的作用范围，在react中相对来说要复杂点,css module或者第三方的styled-component解决方案是比较常见的。

2025-04-29 10:33:34 297

原创【angular19】入门基础教程(三):关于angular里面的响应式数据入门使用

三个框架，都有响应式数据的概念。在angular里面有专门的叫法，响应式数据叫信号,英文名signal。其他两个框架式没有专门的名字的，统称为动态数据。！那么，信号也就是响应式数据在ng里面该怎么使用呢？

2025-04-28 18:31:15 388

原创【angular19】入门基础教程(二):组件的创建与使用

现代化前端，基本都是工程化的项目。而工程化的项目，组织方式又是组件化的方式。那么在angular中，如何创建一个组件并相互引用来编写需求业务呢？

2025-04-28 18:18:45 266

原创【angular19】入门基础教程(一):项目的搭建与启动

整个过程非常的流畅，保证环境正确，就能一次性的完成项目初始化功能。

2025-04-28 17:21:57 433

原创【vue3】vue3+express实现图片/pdf等资源文件的下载

文件资源的下载，是我们业务开发中常见的需求。作为前端开发，学习下如何自己使用node的express框架来实现资源的下载操作。

2025-04-15 11:14:29 406

原创【react18】react项目使用mock模拟后台接口

前后端分离项目，后端还没有接口的时候，前端可以使用mockjs的技术实行假数据的模拟。这里使用的是mock的库msw实现这个业务.

2025-03-25 10:17:48 580

原创【react18】如何使用useReducer和useContext来实现一个todoList功能

重点知识点就是使用useReducer来攻坚小型的公共状态管理，来实现数据的不可变。

2025-02-21 16:49:13 347

原创【react8】如何在网页中直接引入react进行demo开发

【代码】【react8】如何在网页中直接引入react进行demo开发。

2025-02-17 15:42:40 283

原创【KOA框架】koa框架基础及swagger接口文档搭建

koa是express的一层封装，语法比express更加简洁。所以有必要了解下koa的相关开发方法。

2025-01-20 17:35:49 425

原创【js进阶】设计模式之单例模式的几种声明方式

单例模式，简言之就是一个类无论实例化多少次，最终都是同一个对象。

2025-01-15 17:26:04 498

原创【js进阶】ES5原生JS中的几种继承方式

在 JavaScript 中，new 关键字主要用于创建一个对象实例，其具体执行的操作如下：创建一个空对象：首先，会创建一个空的简单 JavaScript 对象，这个对象会继承自构造函数的 prototype 属性。设置原型链：将新创建的对象的属性（在现代 JavaScript 中可以使用 Object.getPrototypeOf() 来访问）设置为构造函数的 prototype 属性，从而实现原型链的继承。

2025-01-15 16:28:20 277