AnYaoqi博客 https://www.anyaoqi.cn/ 一名97年的前端小学生 Sun, 20 Apr 2025 10:20:12 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed en-US All rights reserved 2025, AnYaoqi <![CDATA[前端对接电子秤、扫码枪设备serialPort 串口使用教]]> https://www.anyaoqi.cn/article/1db6402e-a6a5-800a-974b-f6a496d9039e https://www.anyaoqi.cn/article/1db6402e-a6a5-800a-974b-f6a496d9039e Sun, 20 Apr 2025 00:00:00 GMT
因为最近工作项目中用到了电子秤，需要对接电子秤设备。以前也没有对接过这种设备，当时也是一脸懵逼，脑袋空空。后来就去网上搜了一下前端怎么对接，然后就发现了SerialPort串口。
Serialport
官网地址：https://serialport.io/
Github：https://github.com/serialport/node-serialport
官方描述：使用 JavaScript 访问串行端口。Linux、OSX 和 Windows。

SerialPort是什么？

SerialPort 是一个用于在 Node.js 环境中进行串口通信的库。它允许开发者通过 JavaScript 或 TypeScript 代码与计算机上的串口设备进行交互。SerialPort 库提供了丰富的 API，使得在串口通信中能够方便地进行设置、监听和发送数据。
一般我们的设备(电子秤/扫码枪)会有一根线插入到电脑的USB口或者其他口，电脑上的这些插口就是叫串口。设备上的数据会通过这根线传输到电脑里面，比如电子秤传到电脑里的就是重量数值。那么我们前端怎么接收解析到这些数据的呢？SerialPort的作用就是用来帮我们接收设备传输过来的数据，也可以向设备发送数据。
简单概括一下：SerialPort就是我们前端和设备之间的翻译官，可以接收设备传输过来的数据，也可以向设备发送数据。

SerialPort怎么用？

SerialPort可以在Node项目中使用，也可以在Electron项目中使用，我们一般都是用在Electron项目中，接下来讲一下在Electron项目中SerialPort怎么下载和引入

1、创建Electron项目

网上有很多Electron教程，这里不再详细说了
在package.json中看一下自己的Electron的版本，下一步会用到。

2、下载SerialPort

这里先看一下自己使用的Electron对应的Node版本是什么，打开下面electron官网看表格中的Node那一列
Electron发行时间表：https://www.electronjs.org/zh/docs/latest/tutorial/electron-timelines
notion image
如果你Electron对应的Node版本高于v12.0.0，直接下载就行
如果你Electron对应的Node版本低于或等于v12.0.0，请用对应的Node版本对应下面的serialport版本下载
https://serialport.io/docs/next/guide-platform-support#last-known-versions-for-unsupported-versions-of-nodejs
  • 对于 Node.js 版本0.10和0.12，最后一个正常运行的版本是serialport@4。
  • 对于 Node.js 版本4.0，最后一个正常运行的版本是serialport@6.
  • 对于 Node.js 版本8.0，最后一个正常运行的版本是serialport@8.
  • 对于 Node.js 版本10.0，最后一个正常运行的版本是serialport@9.
  • 对于 Node.js 版本12.0，最后一个正常运行的版本是serialport@10.
我项目的Electron版本是11.5.0，对应的Node版本号是12.0，对应的serialport版本号是serialport@10.0.0

3、编译Serialport

  • 安装node-gyp 用于调用其他语言编写的程序（如果已安装过请忽略这一步）
    <!---->
    • 进入@serialport目录
      • 进行编译，target后面换成当前Electron的版本号
        如果编译的时候报错了就将自己电脑的Node版本切换成当前Electron对应的版本号再编译一次
        查看Electron对应Node版本号：https://www.electronjs.org/zh/docs/latest/tutorial/electron-timelines
        编译成功以后就可以在代码里使用Serialport了

        4、使用Serialport

        serialport官网使用教程：https://serialport.io/docs/next/guide-usage

        4.1、引入Serialport

        4.2、创建串口（重点！）

        创建串口有两种写法，新版本是这样写法new SerialPort(params, callback)
        旧版本是下面这样的写法new Serialport(path, params, callback)，我用的是serialport@10.0.0版本就是这样的写法
        创建串口的时候需要传入两个重要的参数是path和baudRate，path是串口号，baudRate是波特率。最后一个参数是回调函数
        不知道怎么查看串口号和波特率看这篇文章
        如何查看串口号和波特率？

        4.3、手动打开串口

        如果autoOpen参数是false，需要使用port.open()方法手动打开

        4.4、接收数据（重点！）

        接收到的data是一个Buffer，需要转换为字符串进行查看
        接收过来的data就是设备传输过来的数据，转换后的字符串就是我们需要的数据，字符串里面可能有多个数据，我们把自己需要的数据截取出来就可以了
        假设通过电子秤设备获取到的数据就是"205 000 000"，中间是四个空格分割的，第一个数字205就是获取的重量，需要把这个重量截取出来。下面是我的示例代码
        notion image

        4.5、写入数据

        4.6、实时获取(监听)所有串口

        更多内容

        serialport官网教程：https://serialport.io/docs/next/guide-usage
         
        ]]>                 <![CDATA[解决node上传文件乱码问题终极方案]]> https://www.anyaoqi.cn/article/1db6402e-a6a5-80ac-aa64-e1adc13a8eaa https://www.anyaoqi.cn/article/1db6402e-a6a5-80ac-aa64-e1adc13a8eaa Sun, 20 Apr 2025 00:00:00 GMT

        问题描述

        今天在菜鸟教程学习node上传文件时遇到了一个中文乱码的问题，文件名包含中文就会显示乱码，上传到服务器的文件名也是乱码。试了两个方法都不行，最后还是问了万能的度娘才解决。
         
        我做了一个非常简单的上传文件的界面，
        • 第一步选择文件
        • 第二步点击上传文件，上传到node后端服务
        上传文件的界面
        notion image
        • node后端服务会上传文件，上传成功后会把文件名返回前端显示出来，这时候就会显示乱码了
        notion image
        notion image

        node上传文件代码

         

        解决过程

        在文章底下别人的笔记里面看到了关于这个问题的两个解决方案，决定尝试一下，尝试过后发现还是会乱码，不知道为什么，总之这两个方案都没有能解决我的问题。
        notion image
         

        最终解决方案

        后来去问了度娘，看到了一个比较靠谱的解决方案，决定尝试一下。
        notion image
        加上这段代码后上传到服务器的文件没有乱码了，但是页面上显示的还是会乱码。
        然后又加上了方案一的代码，页面上也不乱码了。
         
         
        总结：上面这两段代码都加上就可以解决node上传文件时中文乱码的问题
         
        附上我改完后的完整代码
         
        ]]>                 <![CDATA[TypeScript 基础]]> https://www.anyaoqi.cn/article/1db6402e-a6a5-8071-9d47-fc7b22515291 https://www.anyaoqi.cn/article/1db6402e-a6a5-8071-9d47-fc7b22515291 Sun, 20 Apr 2025 00:00:00 GMT

        1. 原始数据类型

        • Boolean
        • number
        • string
        • undefined
        • null
        • any

        2. 数组和元祖

        元祖：本质上其实就是数组，不过跟数组不一样的就是可以单独限制数组中的每个数据类型

        3. interface接口

        • 通过interface关键字定义接口
        • 属性前添加readonly表示只读属性
        • 属性后加?问号表示可选属性

        4. 类型推论、联合类型、类型断言

        类型推论

        变量不需要声明类型，根据赋值自定推论出变量类型

        联合类型

        联合类型就是可以指定多个类型

        类型断言

        当变量不确定是什么类型，但是我们知道会是什么类型时，可以断言为某种具体类型

        通过as关键字断言

        隐式断言

        不需要主动断言，ts会根据代码逻辑自动断言出类型

        5. 枚举enums

        枚举就是固定的几个值，比如每周的工作日，红绿灯的颜色。
        类似数组，默认索引是从0开始的数字，索引可以修改。

        枚举

        编译后的js代码

        常量枚举

        在enum前面加一个const就可以变为常量枚举
        常量枚举编译后的js代码量少，因为编译成了对应的值，没有枚举创建的过程了。
        编译后的js代码

        6. 泛型

        定义函数、接口和类的时候不指定类型，使用的时候再定义类型
        定义的时候先创建泛型名称，使用泛型代替类型，也就是泛型代指某一种具体类型。

        泛型-第一部分：定义泛型

        定义函数、接口和类的时候，在名称后面加上< >来定义泛型，< >里面加上泛型的名称
        • <T> 创建了一个名称为T的泛型，T到底是什么类型不知道，可能是任何一种，具体是什么要看使用时传入的类型。
        • arg: T 使用泛型T作为入参的类型
        • 将泛型T作为函数返回值

        定义多个泛型

        泛型-第二部分：约束泛型

        通过泛型约束传入的参数中必须包含某个属性，通过添加extends关键字约束泛型。
        上面的函数中会报一个警告：类型“T”上不存在属性“length”。
        如果泛型T是string或者array没问题，因为本身就有length，但如果是number就会报错，因为number没有length属性。因为ts不知道泛型T会是什么类型，所以也就不知道arg上面会不会有length属性。
        如果使用泛型约束就可以很好的解决上面得问题，因为可以约束泛型T必须包含length属性。
        通过extends关键字约束泛型

        泛型-第三部分：泛型在类和接口中的使用

        在类中的使用
        在接口中的使用
        通过泛型创建数组

        7. 类型别名、字面量、交叉类型

        类型别名

        有些类型名称比较长，就是给类型起一个别的名称
        如果多个函数都是这样的类型就需要写很多次，可以给这个类型定义一个别名使用

        字面量

        创建固定值的类型，自己创建一个类型，这个类型是固定的值，可以是多个值。
        字面量的使用

        交叉类型

        对某个类型进行扩展组合成为新的类型
        类和接口的交叉类型
        type和interface的区别
        • type是某个类型的别名，当类型的名称太长或想起另一个名称时使用
        • interface是一个标准的类型接口

        8. 内置类型

        global objects(全局对象)
        build-in object(内置对象)
        Dom and Bom（DOM和BOM标准对象类型
        Utility Types(功能性类型)
        Partial：把传入的类型都变成可选类型
        Omit: 忽略传入的某个属性
        更多Utility Types类型请查看ts官网：
        https://www.typescriptlang.org/docs/handbook/utility-types.html
         
        ]]>                 <![CDATA[钝感力，是生活最好的解药]]> https://www.anyaoqi.cn/article/1db6402e-a6a5-803c-9f58-cfa5f17d5e39 https://www.anyaoqi.cn/article/1db6402e-a6a5-803c-9f58-cfa5f17d5e39 Sun, 20 Apr 2025 00:00:00 GMT

        钝感力，是生活最好的解药

        本周读了《钝感力》这本书，刚开始看到这个书名的时候感觉不太吸引我，我看在当当热卖榜排名很高所以也想看看，在网上看了几页以后觉得很好，感觉说的跟自己很像，然后就决定买了这本书来读。现在已经看了一半，把看的时候心中的想法写一下，就当是个笔记吧。
        所谓'钝感力’，即'迟钝之力’，亦即从容面对生活中的挫折伤痛，而不要过分敏感。

        心

        生活中当我们遇到被别人指责、批评和谩骂的时候，我们会感觉到难过或者生气，特别是自己在乎的人，自尊心越强的人就会感觉越难过。钝感力就是可以对那些声音保持一种顿感，也就是不要有太强的自尊心，等于给自己的心加了一个盾牌，这样就会越挫越勇。
        企业家在创业的路上总会听到各种各样的声音，如果他们轻易因为别人的一句话就被影响了那肯定也不会成功。明星也经常会听到网友的指指点点，如果明星因为其他人的指指点点就整天怀疑自己也明星也做长久不了。
        再没有比有点才华但自尊心过强的人更难伺候的了。
        有一个场景非常能说明钝感力的好处，就是考驾照。在练车的时候一出错驾校教练就会劈头盖脸的骂你，甚至有的骂的特别凶，无论你是小女生还是大老爷们都是一顿骂。我就是那种自尊心比较强的人，以前考驾照的时候就被骂的特别狠，我当时练车的时候心里特别难过，特别不想去练车，但是又没办法想考驾照只能去练车。我以为是我倒霉遇到的这个教练脾气不好，后来从网上看了别的学员吐槽才知道所有教练都是这样。也有一些人对教练的话就是选择忽略，他骂的时候就回复嗯，左耳朵进右耳多出。当遇到这种教练的时候就要保持一种钝感力。
        有一种职业是最需要读这本书的，因为这种钝感力是他们必备的工作技能，这种职业就是销售。做销售的人每天都会遇到各种各样的顾客，有脾气好的可能会婉言拒绝，但遇到那种脾气不好的顾客也许会说些很难听的话，甚至有的还会故意刁难。所以很多销售团队每天早上都会喊口号互相激励，也会想各种方法锻炼员工的能力。当员工拥有了这种钝感力的时候无论再遇到什么样的顾客也可以应对自如。

        身

        对健康而言，最为重要的就是让自己全身的血液总是能够顺畅地流淌。
        我们的身体也需要一种钝感力，书中用人的五官介绍了钝感力对身体的作用。我读完后觉得说的很对，人的感官太敏锐肯定也有很多好处，比如夜间开车的时候视力好就可以比别人看的更清楚一些，这样的例子很多。但是太敏锐的话也会有一些困扰，主要是看这种能力使用的场景，比如晚上睡觉的时候，听觉不好的人即使外界有些声音也不会醒，但听觉特别灵敏的人就不行，只要外面有一丁点的声音就会醒，特别是很多缺乏安全感的女生都会这样，所以身体也需要拥有钝感力。
        书中通过血液的流动讲了如果没有拥有钝感力造成的负面情绪是如何影响身体健康的。保持心情舒适可以让我们的血液畅通无阻。当内心拥有钝感力会让我们的身体更健康，这样可以减少生气、难过和不开心等这种负面情绪，
        一旦下了决心，就能够无视周围人的目光和流言蜚语，毅然决然地进行。即使听到别人的讽刺，也是一副“与我无关”的架势，大大方方地勇往直前。这种钝感力，正是人们向崭新的领域挑战时能够获得成功的原动力。

        个人总结

        无论是心的钝感力还是身体的钝感力我感觉都跟一个字有关系：度。
        做任何事都有一个度，超出这个度不好，低于这个度也不好。这个度包括我们心里对别人的感受和身体对外界的感受。对别人的话不能一点不在乎，但也不用太在意，不用听了以后就整天一直想着他的话，只需要挑出别人话里的关键信息听就可以了，把一些带有情绪的话忽略掉。
         
         
        ]]>