- 博客(130)
- 收藏
- 关注
RSS订阅
原创 从零学习Node.js框架Koa 【一】 Koa 初探从环境搭建到第一个应用程序
本文介绍了Node.js框架Koa的特点和优势，适合新手作为全栈开发的入门选择。Koa具有轻量自由、洋葱模型中间件和Async/Await三大核心特点，相比Express和NestJS更适合中小型项目和API服务开发。文章详细演示了从环境准备到第一个Koa应用的创建过程，包括初始化项目、安装依赖、编写启动代码以及配置热更新功能。通过实践指导读者快速搭建支持热更新的基础Koa项目，为后续深入学习中间件、路由等核心机制奠定基础。
2025-11-10 14:53:26
1578
原创 别再用 loading 动画了！骨架屏实战手册：原理 + Vue3 三种优雅实现方式
骨架屏：提升Web加载体验的关键技术 摘要 骨架屏是一种优化Web加载体验的技术，通过在内容加载前显示与最终页面结构相似的灰色占位区域，显著提升用户等待体验。本文首先分析了骨架屏相比传统加载方式的优势，其核心原理是通过轻量UI元素模拟页面结构，并在内容就绪后切换显示。重点介绍了两种工程化实现方案：1）全局CSS类方案，定义骨架屏基础样式；2）SCSS混入方案，支持动态参数配置。通过代码示例展示了如何实现带光影动画的骨架屏效果，并讨论了内容切换控制逻辑。实践表明，合理使用骨架屏可使页面加载感知时间提升40%以
2025-08-12 10:17:27
1547
原创 Vue3 组合式 API 进阶：深入解析 customRef 的设计哲学与实战技巧
Vue 3 的 customRef 是一个强大的响应式 API，允许开发者自定义 ref 的行为，控制依赖追踪和更新触发时机。本文详细介绍了 customRef 的核心概念、使用场景及实际应用，特别适合需要防抖、节流或复杂状态管理的开发场景。通过示例代码展示了如何实现防抖搜索输入框、窗口大小调整处理和表单验证等常见功能，帮助开发者提升应用性能。customRef 在与外部系统集成或实现高级状态管理时尤为有用，为 Vue 3 开发提供了更灵活的响应式控制能力。
2025-07-02 15:04:55
1903
原创 前端 EventSource（SSE）实时通信使用指南（EventSource-polyfill）
EventSource作为HTML5标准中的服务器推送技术，提供了轻量级实时通信解决方案。文章解析了其单向通信、自动重连等特性，对比了轮询、WebSocket等技术差异，列举了实时通知、数据监控等典型应用场景。详细介绍了EventSource API使用方式，包括连接管理、事件监听、自定义事件处理等核心功能，并针对无法设置请求头的限制，提出了URL参数、Cookie认证和代理层三种替代方案。文章还强调了指数退避重连策略的重要性，为开发者提供了完整的EventSource实践指南。
2025-06-16 15:00:00
5468
2
原创 微信小程序开发支付提示“违规“？发货信息录入接入指南
微信小程序平台近期更新了运营规范，要求所有实物电商类小程序必须接入微信订单管理系统，以确保交易安全和提升用户体验。商家需在小程序后台进行订单和发货信息管理，用户可通过微信服务通知了解物流状态并确认收货。接入方式包括使用微信后台自带的订单管理系统或通过API接入自有系统。接入后，商家需调用相关API进行发货信息录入、订单状态查询、确认收货提醒等操作，并确保资金在用户确认收货前处于冻结状态。本文详细介绍了订单发货管理功能、接入前的准备工作、发货信息录入的两种方式以及相关API的使用方法，帮助开发者顺利接入微信订
2025-05-19 10:29:06
4181
29
原创 Vue3 Echarts 3D饼图（3D环形图）实现讲解附带源码
本文介绍了如何利用 ECharts 和 echarts-gl 插件实现 3D 饼图和 3D 环形图。首先，准备工作包括引入 ECharts 核心库和 echarts-gl 插件，支持通过 CDN 或 npm 安装。3D 饼图的实现原理主要依赖于 echarts-gl 插件，通过自定义曲面图、三维折线图和三维散点图分别绘制饼图主体、指示线和标签。文章详细解析了 echarts-gl 插件的常用配置项，如 grid3D 和 series，并重点介绍了曲面图的参数方程（parametricEquation）
2025-05-12 15:00:33
5624
7
原创 Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
通过本篇教程，我们认识了什么是Three.js和Three.js应用场景，共同探索了Three.js的核心概念与基础用法。从构建场景（Scene）、相机（Camera）到渲染器（Renderer）的"铁三角"架构，再到几何体（Geometry）、材质（Material）与网格（Mesh）的有机结合，至此你已经了解并掌握了创建最基础三维场景的核心工具链。更多three.js入门知识点请关注该系列教程后续的更新。
2025-02-19 15:20:41
3290
原创 【组件封装】vue3移动端手把手教你封装一个带动画和吸顶的 下拉菜单组件（DropdownMenu）
手把手教你封装一个移动端 下拉菜单组件（DropdownMenu），以uniapp vue3为代码示例。
2024-11-25 14:57:27
2542
9
原创 HarmonyOS Next 组件或页面之间的所有通信（传参）方法总结
本文总结了鸿蒙中常用的组件或页面之间参数传递方法，包括父子组件，子孙组件，兄弟组件，互不相关的组件（页面）和页面路由跳转的参数传递以及父子组件方法互调等。
2024-11-13 16:44:47
3480
原创 vue3实现一个无缝衔接、滚动平滑的列表自动滚屏效果，支持鼠标移入停止移出滚动
列表自动滚屏效果常见于大屏开发场景中，本文将讲解用vue3实现一个无缝衔接、滚动平滑的列表自动滚屏效果，并支持鼠标移入停止滚动、移出自动滚动。
2024-11-07 14:02:28
7610
7
原创 【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器（上）
HarmonyOS NEXT（鸿蒙应用）开发快速入门教程ArkTS语法之装饰器篇，基于HarmonyOS NEXT Beta1版本（api 12）讲解。本文将从前端开发者角度来理解和学习每个语法点，通过举例HarmonyOS NEXT和web端两种领域类似语法的使用，帮助前端开发人员快速入门HarmonyOS NEXT。在每个装饰器讲解上把同一个功能分别用ArkTs和vue 2种代码进行演示，使其更深刻理解每个装饰器的作用，在类比中学习记忆达到无缝衔接。
2024-09-19 09:52:28
2022
原创 HarmonyOS Next 系列之列表下拉刷新和触底加载更多数据实现（十一）
HarmonyOS Next（基于API12）实现下拉刷新和上拉触底加载更多功能实现讲解。
2024-08-15 10:19:02
5145
2
原创 HarmonyOS Next系列之地图组件（Map Kit）使用（九）
HarmonyOS Next（基于API12）自带地图Map Kit使用——本文将讲述如何通过手动生成签名证书、申请地图权限、地图展示和地图常用功能示例讲解。
2024-07-22 10:11:51
5644
25
原创 HarmonyOS Next系列之Echarts图表组件（折线图、柱状图、饼图等)实现（八）
HarmonyOS Next（基于API11）实现Echarts图表组件（折线图、柱状图、饼图等)。
2024-07-03 09:33:11
7296
19
原创 Web Serial API串口通信，实现web和electron扫码枪读取数据
本文将讲述Web Serial API简单应用，以扫码枪为示例，通过代码实现web端读取扫码枪扫码内容。
2024-02-23 16:26:10
9233
16
原创 一文读懂vue+scss实现主题换肤功能
web实现主题换肤方案有很多种，例如css变量、动态加载样式文件、js变量。目前流行工程化开发自然少不了css预处理（less/scss）方案，这也是目前在脚手架项目中比较流行实现方案。less/scss实现主题换肤本质就是动态切换节点某个变量，这个变量可以是HTML标签属性值也可以是类名，这个变量位置既可以是最顶层也可以是需要换肤地方（子节点）。变量如果是类名的话需要设置一个独一无二的名称，这个我们无法保证后面开发一不小心类名被重复了特别是团队协同开发，所以更好的选择变量是属性值。//顶层方案。
2024-01-26 15:08:44
5015
1
原创 electron+vite+vue3 快速入门教程
本文将介绍electron基本使用和构建electron+vite+vue3脚手架开发项目electron框架对web开发人员来说非常友好，无须了解原生开发技能，就能通过web技术进行桌面应用开发，大大减少学习成本，一套代码能快速构建生成多端应用，也大幅减少了开发成本。简言之，electron开发可以看成是桌面功能开发+纯web页面开发，桌面功能开发在主进程调用Electron API，而web页面开发就是html，css，js技术栈。
2024-01-17 14:45:52
6842
7
原创 web端播放rtsp视频流（摄像头监控视频）教程及window下开机自启动部署
像海康大华一些摄像头或者直播源 为rtsp视频流，想在web上播放必须进行协议转换。已知一些方案例如rtsp转rtmp需要flash，现在浏览器基本不支持flash。还有转hls或者flv这些延迟都比较高。经过实践对比比较理想方案是 经转码后视频流通过websocket传送给客户端在将视频流解码成图片通过canvas渲染出来，延迟比较小基本在1s以内。所用工具(插件)为ffmpeg+node（node-rtsp-stream）+jsmpeg。
2024-01-09 15:06:17
10667
41
原创 express+mongoDB开发入门教程之mongoose使用讲解
本文将讲述Mongoose的入门开发教程，以及通过一些示例演示对mongoDB数据库的增删改查操作。
2024-01-03 16:19:55
2616
2
原创 uniapp H5、小程序、APP端自定义不同运行环境（开发、测试、生产）、自定义条件编译平台、以及动态修改manifest.json值讲解
企业项目开发流程上一般都要配置多个运行环境（不同的服务器请求地址）。不同环境有不同用途，主要用于区分开发、测试、上线，对应的环境称为开发环境、测试环境、生产环境。实际开发中经常要在不同环境进行联调或者打包，对于uniapp每次都要手动修改服务请求地址很是麻烦，有什么方法能实现按需运行按需打包呢，答案是——自定义条件编译平台HBuildex默认编译平台例如有H5端、小程序端、APP端,像小程序端细分还有微信小程序，钉钉小程序等，不同编译平台我们可以用条件编译来指定特殊代码运行在哪种平台上。
2023-11-24 16:30:52
8202
原创 web JS高德地图标点、点聚合、自定义图标、自定义窗体信息、换肤等功能实现和高复用性组件封装教程
本文将讲述如何利用高德地图JS API实现地图标点、聚合点、自定义图标、点击窗体信息展示等基本功能实现，结合实际项目中遇到场景需求进行演示聚合点自定义样式通过设置renderClusterMarker字段配置渲染函数，并在渲染函数中通过dom操作生成样式节点插入聚合点父节点上//聚合点实例renderClusterMarker:renderClusterMarker,//自定义样式渲染});//渲染函数//自定义图标背景//聚合个数。
2023-08-18 21:47:30
8615
11
原创 vue移动端手把手教你封装一个可移动悬浮窗、可移动打开扇形悬浮按钮组件
本文将手把手教你封装一个可移动的悬浮框组件，利用悬浮窗在进阶封装一个可展开可移动的扇形悬浮按钮组件。本案例将以移动端为背景采用uniapp技术实现一个三端（H5、小程序、APP）通用的悬浮组件。
2023-06-18 17:49:26
7861
1
原创 uniapp APP端在线升级功能实现讲解——强制或可选升级，下载进度显示
本文主要讲述uniapp APP在线升级功能实现，并用代码演示包括强制升级、可选升级、下载进度显示、下载自动安装等功能，示例代码已经过测试可结合实际开发场景做调整直接引入使用
2023-06-16 15:20:33
22385
82
原创 从零学习Node.js框架Koa 【六】Koa文件上传下载实现：@koa/multer 与 koa-send 深度解析
本文介绍了在Koa框架中实现文件上传下载功能的实践方案。通过@koa/multer中间件处理文件上传，详细讲解了单文件上传、多文件上传、文件大小/类型限制等核心功能。同时介绍了使用koa-send实现文件下载的最佳实践，包括文件流传输、断点续传等特性。文章提供了完整的代码示例，帮助开发者快速掌握Koa文件处理的关键技术点，为Web应用开发提供高效的文件管理解决方案。
2025-11-25 10:06:16
469
原创 从零学习Node.js框架Koa 【五】Koa鉴权全解析：JWT+Redis构建安全认证系统
本文介绍了Koa框架中的JWT鉴权实现方案，主要包含三部分内容：首先讲解了鉴权的必要性和JWT的工作原理，包括其结构组成和优势；其次详细介绍了jsonwebtoken库的核心API，演示了如何生成和验证JWT令牌；最后说明了koa-jwt中间件的使用方法，包括路由白名单配置。通过JWT+Redis的方案，可以在Koa中构建安全高效的身份认证系统，解决传统Session机制存在的跨域和服务器存储压力问题。文章是系列教程的第五篇，完整涵盖了从环境搭建到数据库操作再到安全认证的Koa开发全流程。
2025-11-10 15:02:22
1474
原创 从零学习Node.js框架Koa 【四】Koa 与数据库（MySQL）连接，实现CRUD操作
本文是Koa系列教程的第四篇，主要介绍如何在Koa框架中集成MySQL数据库并实现CRUD操作。文章首先详细讲解了MySQL在Windows系统下的安装过程、环境变量配置及连接测试，并推荐了Navicat等可视化数据库管理工具的使用方法。随后重点介绍了通过mysql2库在Koa中配置数据库连接池，实现稳定高效的数据库连接方案。教程内容从环境搭建到数据库操作层层递进，为开发者提供了Koa与MySQL集成的完整实践指南。
2025-11-10 15:00:40
1867
原创 从零学习Node.js框架Koa 【三】Koa路由与静态资源管理：处理请求与响应
本文是Koa框架系列教程第三篇，重点讲解路由管理与请求响应处理。文章详细介绍了官方推荐路由中间件@koa/router的安装与基础用法，包括路由配置、HTTP方法支持以及三种参数获取方式：查询参数(ctx.query)、动态路由参数(ctx.params)和请求体参数。通过代码示例展示了如何优雅地管理路由，避免原生Koa处理路由时的if/else臃肿问题。该教程适合Node.js开发者从零系统学习Koa框架，掌握构建Web应用的核心路由处理能力。
2025-11-10 14:58:21
1537
原创 从零学习Node.js框架Koa 【二】Koa 核心机制解析：中间件与 Context 的深度理解
本文是Koa框架系列文章的第二篇，主要解析Koa的核心机制——中间件与Context对象。文章首先通过日志中间件示例介绍了中间件的基本概念和使用方式，重点讲解了Koa独特的"洋葱模型"执行流程，即请求从外到内再由内到外的处理过程。接着详细介绍了Context对象的作用和常用API，包括ctx.state数据传递、ctx.app全局事件发布订阅以及ctx.throw错误处理方法。文章通过丰富代码示例帮助读者理解Koa的核心机制，为后续路由、数据库连接等高级主题打下基础。
2025-11-10 14:56:54
1662
原创 Web大屏适配终极方案：vw/vh + flex + clamp() 完美组合
大屏适配方案对比与推荐 本文对比了四种主流大屏适配方案：媒体查询（断点适配但代码冗余）、Rem（依赖JS且计算复杂）、缩放变换（简单但影响质量）、百分比布局（易用但控制困难）。重点推荐"vw+vh+flex+clamp()"组合方案，该方案采用视口单位(vw/vh)处理整体尺寸，flex弹性布局控制内部排列，通过纯CSS实现自动适配。文中提供了完整示例，展示如何构建导航栏+三栏布局的大屏页面，并确保在各种尺寸下保持响应式效果。该方案具有不依赖JS、适配灵活、开发简单等优势，适合数据可视化
2025-10-10 14:27:22
1312
原创 Vue3 高效开发技巧：defineModel 玩转双向绑定与修饰符，让组件开发更丝滑
摘要： Vue3.4引入的defineModel彻底简化了父子组件双向绑定流程，替代了传统手动配置props和emit的方式。通过const model = defineModel()即可实现数据同步，支持多模型绑定（v-model:name）、类型校验（type:String）和默认值设置（default:'游客'）。还能自定义修饰符处理逻辑（如自动trim）。该特性需Vue≥3.4且仅限<script setup>使用，将双向绑定代码减少80%，显著提升开发效率。
2025-09-15 14:53:09
1414
原创 Vue3 自定义 Tooltip 组件：实现文本溢出才显示的优雅提示（附完整代码）
本文介绍了一个基于Vue3的自适应Tooltip组件实现方案。该组件具有以下特点：仅当文本溢出时显示提示框，支持多行文本省略检测，提供四种位置选项并能自动调整避免超出视口，可配置延迟显示和插槽自定义内容。技术实现上采用Composition API+SCSS，关键点包括：通过Teleport避免样式裁剪，使用DOM API检测文本溢出，动态计算Tooltip位置，并添加平滑的过渡动画。该组件解决了传统Tooltip无条件触发的痛点，能更精准地满足实际业务需求。
2025-08-26 10:00:00
1429
原创 Three.js 进阶技巧：用 CubeCamera 实现逼真倒影效果
本文介绍了使用Three.js中的CubeCamera实现3D场景倒影效果的方法。首先通过CubeCamera从六个方向捕获场景生成环境贴图，然后将贴图作为反射纹理应用到材质表面。文章详细讲解了基础环境搭建、CubeCamera配置、场景物体创建和实时更新逻辑四个关键步骤，并提供了波动水面倒影的扩展示例。该技术能有效提升3D场景的真实感和沉浸感，相比传统平面镜像方案在处理曲面反射时效果更自然。
2025-08-26 10:00:00
1093
原创 为什么高手都爱用 Array.from ()？从基础到实战，这篇吃透数组处理新姿势
《JavaScript中Array.from()的实用指南》 Array.from()是ES6引入的强大工具，用于将类数组和可迭代对象转换为真正数组。它支持映射函数处理元素，能生成特定长度数组，优化DOM集合操作，并实现数组去重等场景。相比传统方案，Array.from()具有更高的可读性和性能优势，尤其适合处理arguments、Set、Map等特殊数据结构。实际应用包括表单数据处理、分页拆分、颜色梯度生成等，是提升JavaScript数组处理效率的利器。
2025-08-12 10:19:01
1182
原创 Vue3高级特性：深入理解effectScope及其应用场景
本文深入解析Vue3中的高级特性effectScope，探讨其在响应式副作用管理中的核心价值与实战应用。effectScope通过创建独立作用域实现对多个副作用（watch、computed等）的批量管理，有效解决了传统手动清理方式存在的逻辑分散、易遗漏等问题。文章详细解析了effectScope API，包括作用域创建、run方法执行、副作用暂停/恢复等核心功能，并特别介绍了onScopeDispose回调机制。通过对比传统方式和effectScope的代码示例，展示了其在简化组件卸载逻辑、提升可组合函数
2025-07-16 14:37:20
1971
原创 Vue3 watchEffect 进阶使用指南：这些特性你可能不知道
本文深入探讨Vue3中watchEffect的进阶用法，帮助开发者更高效管理副作用。文章主要讲解三个核心技巧：1）主动停止监听，通过调用watchEffect返回的停止函数，在异步创建、临时监听等场景中手动终止监听；2）利用onCleanup清理副作用，解决异步请求竞态等问题，确保资源释放；3）通过flush选项控制执行时机，优化性能。这些技巧可提升代码质量，避免内存泄漏，实现更优雅的副作用管理。
2025-07-08 15:10:48
1785
原创 Web Worker使用指南 解锁浏览器多线程 ，提升前端性能的利器
Web Worker是HTML5提供的多线程解决方案，允许在后台独立线程中执行复杂计算任务，避免阻塞UI主线程。本文详细介绍了Web Worker的核心概念、适用场景（如CPU密集型计算、图像处理、实时数据处理等）以及API使用技巧。通过消息机制实现主线程与Worker线程通信，支持现代ES6+语法和模块化开发。文章还提供了在Vite等现代工程化环境中的实践示例，帮助开发者提升应用性能与响应速度。
2025-06-25 15:02:24
1263
原创 Vue3通过自定义指令实现大屏数字递增滚动效果
本文介绍了在Vue3中实现数字滚动动画效果的方法。数字滚动效果通过平滑过渡数值，常用于数据可视化场景。文章重点讲解了基于Vue3自定义指令的实现方案，包括指令的生命周期、参数传递和动态绑定等核心概念，并详细解析了数字滚动功能的设计思路。实现原理是通过定时器按照计算好的间隔时间和递增值逐步显示数值，确保动画连贯性。最后给出了完整的自定义指令代码，支持两种调用方式：直接传递数值或通过配置对象指定目标值和动画时长。这种实现方式简洁优雅，开发者可轻松集成到项目中。
2025-06-10 15:37:44
2211
原创 Three.js 快速入门教程【二十二】动画神器Tween.js使用指南
本文介绍了Tween.js在Three.js中的应用，详细讲解了其安装方法、基本语法与核心API。通过创建动画实例、定义目标属性、设置缓动效果等步骤，可实现平滑过渡的3D动画效果。文章还涵盖了动画控制方法（启动/暂停/停止）和事件回调机制，帮助开发者高效创建相机移动、物体变换等动画效果。
2025-05-26 14:58:54
1484
原创 Three.js 快速入门教程【二十一】CSS3D渲染器（CSS3DRenderer、CSS3DObject 、CSS3DSprite）介绍，实现场景中物体标注标签信息
本文介绍了如何在Three.js中使用CSS3DRenderer渲染3D场景中的标签，并对比了CSS3DRenderer与CSS2DRenderer的区别。CSS3DRenderer通过CSS 3D变换渲染HTML元素，支持完整的3D变换，元素可随相机视角产生透视效果，适合需要HTML元素深度融入3D空间的场景。而CSS2DRenderer仅支持2D变换，元素始终面向屏幕，适合静态标签和信息提示。文章还详细讲解了CSS3DObject的创建与使用，并提供了示例代码，展示了如何在正方体和圆柱体上标注标签。
2025-05-12 15:01:32
1539
uniapp vue3 自定义下拉刷新组件pullRefresh，带释放刷新状态、更新时间、加载动画
2024-11-26
uniapp vue3 下拉菜单组件（dropdownMenu）
2024-11-23
web端播放rtsp/rtmp视频流demo
2024-04-02
微信小程序隐私协议引入组件demo
2023-09-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人