基于Electron-vue框架使用node-modbus采集硬件设备数据

什么是Electron?

Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将ChromiumNode.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。

额,其实就是用前端的技术去写一个桌面应用程序,因为公司项目需求所以需要用electron-vue来开发,因为自己也是第一次接触遇到了很多坑,所以拿来分享一下。

node-modbus模块:

用node.js实现串口通讯,使用modbus-tcp协议与硬件设备进行通信,直接操控串口,更是直接可用于工业控制。

技术栈:

  • [x] Vue

  • [x] VueRouter

  • [x] Vuex

  • [x] Vue-Electron

  • [x] nedb

  • [x] Babel

  • [x] Webpack

  • [x] Less

  • [x] Nodejs

  • [x] node-modbus

1.在项目打包时会出错,出现这种情况,大多数都是因为用cnpm下载依赖引起的,把项目的node_modules删除,用yarn安装依赖试试。我打包用的是yarn build 命令,这样解决报错问题。

2.electron-vue 是一个结合 vue-cli 与 electron 的项目,主要避免了使用 vue 手动建立起 electron 应用程序,很方便。我们需要做的仅仅是像平常初始化一个 vue-cli 项目一样

vue init simulatedgreg/electron-vue my-project

3.引入node-modbus

npm install node-modbus

建立客户端:

基于Electron-vue框架使用node-modbus采集硬件设备数据_第1张图片

(我们项目中传感器设备通过网线连接到串口服务器、电脑端的ip段位必须与串口服务器的ip段位一致,否则无法读取到传感器数据,检测电脑是否与串口服务器接通--- 命令行输入: ping 192.168.1.xxx -t  此ip为串口服务器ip)

链接服务端:


读取不同段位与寄存器的地址位:

基于Electron-vue框架使用node-modbus采集硬件设备数据_第2张图片

(一个客户端client下只能读取某一个段位、同时读取会报错)

4.数据存储:

采集回来的数据需要做一个短期的存储、期初是用cooki和localStorage来存储调试的时候还可以存取、但打包后就无法读取数据了、所以改用嵌入式数据库--NeDBNeDB可以看作是精简版的MongoDB,这里和MongoDB的使用做一下对比,以便可以更直观的感受NeDB的简便;

1、安装模块

2、使用

最后 完整的目录结构:

基于Electron-vue框架使用node-modbus采集硬件设备数据_第3张图片

你可能感兴趣的:(基于Electron-vue框架使用node-modbus采集硬件设备数据)