- 博客(122)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 【Iot】前端串口serialport.js串口通信库快速入门（附经验总结）
`serialport.js` 是一个用于 `Node.js` 的串口通信库，允许开发者通过 JavaScript 与串口设备（如 Arduino、传感器、GPS 模块等）进行通信。它提供了一个简单且强大的 API，用于打开、配置、读取和写入串口数据。`serialport.js` 是开源的，基于 `MIT` 许可证，广泛应用于物联网（IoT）、嵌入式系统和硬件开发项目中。重点，`serialport.js`必须运行与`Node.js`环境，在浏览器环境是无法使用的，所以一般结合`electron.js
2024-12-12 17:07:08
410
1
原创 【Iot】一文搞懂Modbus通讯协议。Modbus分类：Modbus ASCII、Modbus RTU、Modbus TCP/IP都是什么？
协议：是进行数据交换和解释信息时所要遵守的一套规则和约定，或者说是通信双方共同遵守的一组规则或标准。（下图是书上的截图）串行通信：串行通信是一种计算机通信方式，它在主机与外设以及主机之间的数据传输中起着重要作用。串行通信是指数据按位依次传输的通信方式，每位数据占据固定的时间长度，并使用少数几条通信线路完成系统间的信息交换。在串行通信中，数据被分解为一系列单独的比特（位），并按顺序通过传输线进行传输。每个比特在传输线上占用固定的时间长度，这样接收端就可以按照相同的时序接收并重组这些数据位，从而回复出原始数据。
2024-12-06 15:01:13
1262
2
原创 【Electron】electron-vite使用pnpm与electron-builder打包报错：nsis-3.0.4.1\Bin\makensis.exe process failed ERR
针对问题2：pnpm与electron-builder的设置问题可以手动修改。文件完整配置：（问题3可以参考这个文件的镜像配置）针对问题3也可以直接复制下面的包。网上有众多此类报错的可能，比如。二、可能原因与解决方案。
2024-10-16 10:32:38
622
原创 【设计模式】六大原则之依赖倒置原则（Dependency Inversion Principle，DIP）
依赖倒置原则，DIP是编程开发中的一个重要原则，具体指抽象不应该依赖于具体类，具体类应当依赖于抽象。换言之，要针对接口编程，而不是针对实现编程，旨在降低模块间的耦合度，提高系统的可维护性和稳定性。高层次的模块不应该依赖于低层次的模块，他们都应该依赖于抽象。抽象不应该依赖于具体，具体应该依赖于抽象。
2024-08-14 15:07:26
1019
原创 【TS】Typescript中接口(Interfaces)与类(class)的用法详解
使用接口（Interface）来定义对象的类型。使用接口（Interface）对行为进行抽象，而具体如何行动需要由类（class）去实现（implements）。// 使用接口（Interface）来定义对象的类型age: 25赋值的时候，变量的形状必须和接口的形状保持一致// 使用接口（Interface）对行为进行抽象alert() {alert() {类（Class）：定义了一件事物的抽象特点，包含它的属性和方法。
2024-08-14 11:06:39
1635
原创 【JS】详解浏览器的5 种Observer: Mutation、Intersection、Performance、Resize、Reporting
监听用户的交互行为，我们会用 addEventListener 来监听 click、mousedown、keydown、input 等事件，但对于元素的变化、performance 的记录、浏览器干预行为这些不是用户交互的事件就要用 XxxObserver 的 api 了。IntersectionObserver：监听元素可见性变化，常用来做元素显示的数据采集、图片的懒加载MutationObserver：监听元素属性和子节点变化，比如可以用来做去不掉的水印。
2024-08-13 16:25:42
1068
原创 【JS】JS高阶函数——reduce()用法详解总结。你不得不知道的数组reduce高级用法!
reduce() 方法对数组中的每个元素执行一次提供的回调函数，且该函数为升序执行，并将其结果汇总为单个返回值。
2024-06-05 17:36:42
3443
原创 【uni-app】uniapp页面与组件生命周期介绍
uniapp应用开发过程中经常会在不同的时机触发一些事件，这篇文章主要是总结一下uniapp常用的一些生命周期钩子。不同的环境运行可能有差异,下图为微信小程序执行图示。
2024-06-04 10:31:13
2009
原创 【Vue3】vue3快速实现响应式数据恢复初始值。浅拷贝与深拷贝的应用。
有一个经常遇到的场景就是，一个表单最后一列有个编辑按钮，点击编辑按钮之后打开表单弹窗，修改其中的数据，但是如果此弹窗再作为新增弹窗打开的时候，弹窗数据会缓存上次编辑的数据。在 Vue 3 中，由于引入了新的响应式系统，重置数据到初始值的方法与 Vue 2 不同。当你使用 reactive 创建响应式对象时，一个常见做法是保留初始数据的引用，以便在需要时恢复数据。
2024-06-03 16:05:53
4452
原创 【uniapp】uniapp返回上一页，并实现刷新界面数据
在uniapp中，经常会有返回上一页的情况，官方提供有 uni.navigateBack 这个api来实现效果，但是此方法返回到上一页之后页面并不会自动刷新（不会触发上一页的onLoad()方法）。
2024-04-18 09:35:46
6511
2
原创 【uniapp】uniapp小程序中实现拍照同时打开闪光灯的功能，拍照闪光灯实现
## 一、需求前提特殊场景中，需要拍照的同时打开闪光灯，（例如黑暗场景下的设备维护巡检功能）。起初我是用的`uviewui`中的`u-upload`组件自带的拍照功能，但是这个不支持拍照时打开闪光灯，也不支持从通知栏中打开闪光灯。## 二、解决方案采用组合形式解决：1. 使用uniapp官方内置组件中的 [媒体组件：camera](https://uniapp.dcloud.net.cn/component/camera.html) 实现闪光灯拍照，`uni.createCameraConte
2024-03-08 15:44:58
2132
1
原创 【Vue2】vue2中自定义组件实现双向绑定的写法，v-model在自定义组件中的实现
封装一些小组件的时候常常会用到双向数据绑定，下面简单总结一下用法
2024-03-08 15:13:29
2048
原创 【uniapp】uni-app开发手持PDA上的激光扫码程序，uniapp主动触发pda激光扫码（附完整代码）
工业级智能手机（PDA），PDA设备是Android9系统，带有激光扫码灯，现在要使用uniapp开发安卓程序，并实现在PDA设备上的激光扫码程序。// 在页面展示时触发，用于处理页面显示相关的逻辑，可能会多次执行，包括页面首次展示和从后台切换到前台时。// init传入一个回调函数做参数，在扫描时候会将数据传入此方法里，然后处理此方法的自定义业务逻辑。// onLoad 是在页面加载时触发，用于页面的初始化操作，只执行一次。激光扫码效果见如下视频。
2024-03-01 10:18:59
6438
25
原创 【vscode】windows11在vscode终端控制台中打印console.log()出现中文乱码问题解决
在前端开发过程中使用vscode编写node.js，需要在控制台中打印一些中文信息，但是一直出现中文乱码问题，英文和数字都显示正常。在网上试了很多设置的办法，最终找到windos11设置中解决。，name大概率就是因windows中文版系统cmd编码默认为GBK，而vscode默认新建文件的编码为UTF-8所以会出现中文乱码情况。首先打开控制台，输入命令。，如果你的输出内容没有。
2024-02-04 10:10:25
2734
1
原创 【Iot】什么是串口？什么是串口通信？串口通信(串口通讯)原理，常见的串口通信方式有哪些？
串行接口简称串口，也称串行通信接口或串行通讯接口（通常指COM接口），是采用串行通信方式的扩展接口。串口可以将接收来自CPU的并行数据字符转换为连续的串行数据流发送出去，同时可将接收的串行数据流转换为并行的数据字符供给CPU的器件。一般完成这种功能的电路，我们称为串行接口电路。串口通信（Serial Communications）是串口按位（bit）发送和接收字节的通信方式，它是嵌入式物联网领域中常用的通讯方式。典型的串口通信使用3根线完成，分别是发送、接收、地线。由于串口通信是异步的，所以端口能够在
2024-02-03 17:23:55
17277
1
原创 【Electron】electron-builder打包过程中报错： A connection attempt failed—connected host has failed to respond
npm run build 打包报错信息如下：Get “https://github.com/electronXXXX”: dial tcp XXXX: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connecte
2024-01-24 15:16:48
1753
2
原创 设置windos电脑开机自动启动chrome浏览器，并且打开指定网页
注意，这是一个简单的批处理脚本，它只会在命令行窗口中执行。这是一个Windows批处理脚本，主要用于启动Chrome浏览器并设置一些特定的参数。的意思是在改变当前目录之前，如果目录不是硬盘的根目录或者U盘的根目录，就先退出，这样可以保证安全。是批处理中的一个变量，表示%0（即批处理文件自身）的完全路径（包含目录信息）。：启动Chrome浏览器并打开指定的URL，同时设置一些特定的参数。：设置命令行窗口的标题为"Chrome"。的值为0，表示浏览器窗口在屏幕的左上角。的值为0，表示浏览器窗口在屏幕的左上角。
2023-09-06 17:38:42
3886
原创 【Vue】使用elementPlus的table时,实现自定义tooltip效果，单行显示，超出则显示省略号，鼠标移入后，当文字数量大于20则换行自定义展示的tooltip
使用elementPlus的table时，实现自定义show-overflow-tooltip效果，文字在table中单行显示，超出宽度则显示省略号，鼠标移入后，当文字为30个字以内的时候单行显示tooltip，超出30个字则显示可以换行自定义展示的tooltip。
2023-08-15 14:52:25
5910
2
原创 【Vue3】Vue3中的组合式API是什么？hook是什么？什么是“组合式函数”？项目中如何使用自定义 hook 函数？
组合式API(Composition API)是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。响应式 API：例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。生命周期钩子：例如 onMounted() 和 onUnmounted()，使我们可以在组件各个生命周期阶段添加逻辑。依赖注入：例如 provide() 和 inject()，使我们可以在使用响应式 API 时，利用 Vue 的依赖注入系统。
2023-07-22 10:36:35
1401
1
原创 【权限控制】ACL、RBAC、ABAC三大权限管理模型，到底怎么选?
系统规模：对于小型系统，ACL 可能是足够简单的解决方案。而对于大型系统，RBAC 或 ABAC 可能更适合。复杂性：RBAC 和 ABAC 提供了更高级别的权限管理功能，但也带来了更多的复杂性。根据系统需求和管理员的技能来评估是否需要更复杂的模型。灵活性：如果需要灵活性和动态的权限管理，ABAC 是更好的选择。RBAC 提供了一种适度的灵活性，而 ACL 则较为静态。
2023-07-03 17:43:43
5094
原创 【JS】vis.js使用之vis-timeline使用攻略，vis-timeline在vue3中实现时间轴、甘特图
`vis-timeline`时间轴是一个交互式可视化图表，用于实时可视化时间数据。数据项可以只与某个时间点关联，也可以有开始和结束日期（即一个时间范围）。vis-timeline可以通过拖拽和滚动时间轴自由移动和缩放。可以在时间轴中创建、编辑和删除数据项目。轴上的时间尺度是自动调整的，支持从毫秒到年的尺度。vis-time时间轴使用常规`HTML DOM`呈现时间轴和放在时间轴上的项目，这样的好处就是可以使用自定义css样式进行灵活定制。
2023-04-18 09:28:06
9753
3
原创 【CSS】SVG实战入门，svg画曲线，svg简单动画上手入门
- `` 根元素以像素为单位定义了整个图像的 width 和 height，还通过 xmlns 属性定义了 SVG 的命名空间，- `version` 属性可定义所使用的 SVG 版本，- `` 元素的内容可以被阅读器显示在标题栏上或者是作为鼠标指针指向图像时的提示， - `` 元素允许咱们为图像定义完整的描述信息，- ``标签 用来创建一个矩形，通过 `fill` 属性 把背景颜色设为黄色。- ``标签 用来创建一个圆。
2023-03-14 16:57:28
4610
原创 【JS】jsx/tsx是什么？为什么 Vue3 的组件库都在使用 jsx/tsx？如何在Vue3中使用 jsx/tsx？
前几天得到一个疑问，为什么 React 要用 JSX 语法，这样显得代码好像“很耦合”。按照传统应推荐 html、js、css 模版分离，这样设计的优越性到底在哪里？
2023-03-10 11:41:00
3528
7
原创 【TS】TypeScript泛型 T 的用法详解
泛型，从字面上理解，泛型就是一般的，广泛的的意思。TypeScript中泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体类型，而是在使用的时候再指定类型的一种特性。泛型中的T就像一个占位符、或者说一个变量，在使用的时候可以把定义的类型传入，它可以原封不动地输出。，这些成员可以是：函数参数、函数返回值、类的实例成员、类的方法等。
2023-03-09 17:03:22
3919
3
原创 【JS】Blob对象使用：前端实现流文件下载
前端由于安全方面的因素，不能直接对文件进行写操作。但是在实际的业务需求中，难免会遇到各种各样文件的下载、预览。如果服务端下载文件是以流的形式传递到前端，前端通常是将流转换为objectURL,借用a标签的download属性，进行文件下载。
2023-02-27 16:47:19
2933
原创 【Vue】浅谈vue2、vue3响应式原理，vue中数组的响应式，响应式常见问题分析
Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时，视图会随即自动更新。vue2使用Object.defineProperty实现响应式。vue3使用Proxy实现响应式。
2023-02-16 16:37:46
2249
1
原创 【Iot】阿里云物联网平台入门之什么是消息解析、什么是Topic、JavaScript脚本示例解析
即通过脚本（可以是js、php、python），将消息数据在设备自定义格式和JSON格式之间转换。Topic是消息发布（Pub）者和订阅（Sub）者之间的传输中介。物联网平台中，服务端和设备端通过Topic来实现消息通信。Topic是针对设备的概念，Topic类是针对产品的概念。产品的Topic类会自动映射到产品下的所有设备中，生成用于消息通信的具体设备Topic。Topic类：产品维度的Topic，是同一产品下不同设备的Topic集合。一个ProductKey下有多个Topic类。
2023-01-16 10:41:41
3145
原创 【CSS】flex布局用法解析，快速上手flex布局，flex:1是什么意思？肯定看的懂好吧？
flex-wrap属性定义，如果一条轴线排不下，如何换行。nowrap（默认）：不换行。wrap：换行，第一行在上方。（常用此项）wrap-reverse：换行，第一行在下方。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap// 主轴水平向右，并且元素自动换行。
2022-12-24 17:13:19
5330
原创 【Three.js】Three.js快速上手教程
`three.js`是`JavaScript`编写的`WebGL`第三方库。提供了非常多的3D显示功能，是一个常见的`web 3D`库。
2022-12-19 17:24:47
7848
5
原创 【JS】前端js实现树形结构：递归拼接树形结构与使用filter函数，不使用递归实现树形结构, O(n)解法
前端树形结构一般用于网页的地理位置输入框，地理位置级联选择，人员的部门选择等。常见的做法是使用递归实现树形结构，还有的使用filter函数可直接实现树形结构。
2022-12-13 14:27:06
3481
1
原创 【TS】TypeScript声明文件（.d.ts）的使用
当我们在TS文件中需要引入外部库时，编译时是无法判断传入参数的类型的，所以我们需要在引入前加入一个声明文件来帮助ts判断类型。当然现在大部分库都自带有自己的声明文件，一般在@types目录下。
2022-12-13 08:51:26
4148
原创 【Web通信】WebSocket详解：WebSocket是什么？如何使用WebSocket？在Vue中封装WebSocket(心跳监测)。nginx配置websocket。
`WebSocket` 是一种基于`TCP`的**全双工**通信协议，它提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法。数据可以作为“数据包”在**两个方向**上传递，而无需中断连接也无需额外的 `HTTP` 请求。- 使用场景：对于需要连续数据交换的服务，例如网络游戏，实时交易系统等，WebSocket 尤其有用。最典型的场景就是聊天室。
2022-11-21 17:27:38
1823
1
原创 【Web通信】短轮询与长轮询(Long Polling)是什么？
早期的很多网站为具备数据推送能力，所在用的技术基本都是HTTP轮询。**轮询**是由由客户端每隔一段时间（如每隔5s）向服务器发出HTTP请求，服务端接收到请求后向客户端返回最新的数据。客户端的轮询方式一般为==短轮询==或==长轮询==。
2022-11-03 11:54:33
1264
原创 【权限控制】PC端与小程序权限设计浅析---RBAC基于角色的访问控制（Role-Based Access Control）
RBAC权限模型：RBAC，即基于角色的访问控制（Role-Based Access Control），是优秀的权限控制模型，主要通过角色和权限建立管理，再赋予用户不同的角色，来实现权限控制的目标。
2022-10-24 10:46:07
1291
原创 【Vue】vue3.2中使用pdf.js踩坑：Cannot read from private field---pdf.js使用详解
本人项目中使用的是`vue3.2`+`vite`+`ts`，现在打算使用pdf.js库来加载预览pdf文件，下面是我的一些踩坑记录！真的太难受了！！！
2022-10-17 17:14:47
4229
11
原创 【Nginx】https兼容http后，post请求返回405、301，显示接口方法不允许
强制把`http`请求跳转到`https`,结果发现App有部分的功能不能使用.因为App一共设置了4种请求方式，分别是`GET`、`POST`、`DELETE`和`OPTIONS`方式，设置301跳转后所有的请求方法都变成了`GET`方式，导致一些功能无法正常使用。
2022-10-17 10:15:18
2535
原创 【JS】前端常见加密算法MD5、AES、RSA介绍，Vue3中使用jsencrypt使用rsa加密示例
哈希散列算法、对称加密算法和非对称加密算法。vue3中使用
2022-09-30 15:48:09
4317
原创 【Vue3】 vite获取.env文件中配置的环境变量
// 根据当前工作目录中的 `mode` 加载 .env 文件// 第二个参数：process.cwd()表示返回运行当前脚本的工作目录的路径（current work directory）// 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。const env = loadEnv(mode.mode, process.cwd(), '');
2022-09-19 11:07:04
11921
5
原创 【JS】js正则匹配字符串是否为指定的某几个字符结尾
在做省市区级联选择的时候遇到，有的情况需要点击非最底层但是又要求可以选中，就需要 前端来增加判断。这里可以使用正则来判断label的值是否以某个字符结尾
2022-09-16 14:21:30
3350
electron-builder目录下的Cache文件夹中的nsis与winCodeSign文件夹
2024-10-16
javascript红宝书阅读路线图！没错，就是那个最厚的红色大book
2024-08-14
electron-builder打包过程中报错所需的文件
2024-01-24
开发-性能优化方法论（蚂蚁集团高级java工程师）
2023-02-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人