- 博客(9)
- 收藏
- 关注
RSS订阅原创 基于 Electron+serialport 打造串口通信桌面应用
本文基于 Electron+Vue+serialport 实现了一套完整的串口通信桌面应用，核心是利用 Electron 主进程的 Node.js 环境操作串口，通过预加载脚本暴露安全 API 给渲染进程，最终在 Vue 组件中实现交互界面。该方案兼顾了桌面应用的跨平台特性和串口操作的底层能力，可快速扩展为工业调试工具、硬件监控系统等实际应用。
2025-12-18 15:20:16
1030
原创 Vue3 + Node.js 实现双 Token 验证与无感刷新完整指南
传统单 Token 认证存在过期重新登录、Token 被盗风险高等问题，而双 Token 验证（Access Token + Refresh Token） 结合无感刷新机制，能有效解决这些痛点，提升用户体验与系统安全性。后端核心任务：生成双 Token、验证 Access Token、通过 Refresh Token 刷新 Access Token、配置跨域支持 Cookie 传递。Express（Web 框架） + jsonwebtoken（JWT 库） + cors（跨域处理）。
2025-09-19 17:47:39
828
1
原创 用 Node.js 模拟 MQTT 硬件设备：从配置到通讯全解析
解耦开发：前端无需等待真实硬件，可独立完成 MQTT 通讯逻辑开发和联调；协议验证：提前验证前端与硬件的通讯协议（主题格式、指令结构），避免后期硬件开发完成后才发现协议不兼容；场景模拟：支持随机响应、多设备并发、手动调试等场景，覆盖真实环境中的大部分情况；易于扩展：代码结构清晰，可根据实际需求快速增加状态上报、指令校验、日志记录等功能。结合上一篇的 Vue3 前端页面和本文的 Node.js 模拟硬件，你已经拥有了一套完整的 “前端 - 硬件 MQTT 通讯” 开发与测试方案。
2025-08-22 16:58:19
1164
原创 Vue3 + MQTT 实现前端与硬件设备直接通讯
MQTT 生命周期管理：连接、重连、关闭、订阅 / 发布消息的完整逻辑；硬件搜索与匹配：定时器控制搜索进度，异步递归处理硬件匹配，确保流程严谨；
2025-08-22 16:07:08
1780
原创 涂鸦智能小程序开发：设备 ID 获取、DPS 下发与监听实现
在涂鸦智能生态的小程序开发中，设备交互是核心功能之一，本文将基于涂鸦@ray-js系列 SDK，实现设备 ID 获取、DPS（设备功能点）下发以及 DPS 变化监听的完整流程。首先要在Tuya MiniApp IDE，新建项目会自动集成好相关的SDK。
2025-07-15 15:21:34
666
原创 微信小程序蓝牙开发全流程：从初始化到数据交互
在物联网快速发展的今天，微信小程序与蓝牙设备的交互已成为智能硬件开发的重要场景。本文将基于官方蓝牙 API，详细讲解小程序连接蓝牙设备的完整流程，涵盖从适配器初始化到数据收发的全链路操作。
2025-06-25 15:12:36
3639
2
原创 react路由传参
传参)</Link>在页面获取传递的参数需要使用useLocation这个hook,具体使用方法如图所示。前提条件，和路由跳转一样，路由传参同样需要react-router-dom插件。与问号传参的方式有所不同主要是在routes.ts文件中，给路径添加匹配。问号传参我们需要在页面路径后以问号（？）开始，不同参数之间用&连接。获取斜杠传参的参数，如图所示。
2025-06-23 15:43:53
247
原创 React项目实现路由跳转
在现代 React 项目开发中，实现页面间的路由跳转是构建单页应用 (SPA) 的核心需求。React Router 作为官方推荐的路由解决方案，为我们提供了强大而灵活的路由管理能力。创建页面，在app>routes中创建页面，然后在routes.ts文件中将新建的页面路径写入。4实现页面间路由跳转，这里我们就要用到react-router-dom这个插件。创建组件，在app中创建components文件夹用于存放我们的组件。要在项目中使用路由功能，首先需要安装。到这，就实现了自定义组件和路由跳转。
2025-06-23 15:26:17
460
原创 快速搭建React项目并集成路由
4.因为我们要创建的是react项目并且集成路由，这里我们选择React Router v7。5.接下来刻选择是否需要初始化git仓库，和是否时使用npm依赖（可根据自己需要自行选择）1.打开命令行窗口，输入npm create vite@latest。8.点击连接，至此完成react项目的创建并且自动集成路由。6.等运行完毕，根据提示进入新建的项目，3.选择你要创建的项目，进入下一个选择。7.输入npm run dev运行项目。2.根据提示输入你的项目（自定义）打开项目文件，如图所示。
2025-06-23 14:38:32
215
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人