什么是Electron?
Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.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
建立客户端:
(我们项目中传感器设备通过网线连接到串口服务器、电脑端的ip段位必须与串口服务器的ip段位一致,否则无法读取到传感器数据,检测电脑是否与串口服务器接通--- 命令行输入: ping 192.168.1.xxx -t 此ip为串口服务器ip)
链接服务端:
读取不同段位与寄存器的地址位:
(一个客户端client下只能读取某一个段位、同时读取会报错)
4.数据存储:
采集回来的数据需要做一个短期的存储、期初是用cooki和localStorage来存储调试的时候还可以存取、但打包后就无法读取数据了、所以改用嵌入式数据库--NeDB;NeDB可以看作是精简版的MongoDB,这里和MongoDB的使用做一下对比,以便可以更直观的感受NeDB的简便;
1、安装模块
1
|
npm
install
nedb
--
save
|
2、使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
// 加载模块
const
nedb
=
require
(
'nedb'
)
;
// 实例化连接对象(不带参数默认为内存数据库)
const
db
=
new
nedb
(
{
filename
:
'/data/save.db'
,
autoload
:
true
}
)
;
// 插入单项
db
.
insert
(
{
name
:
'tom'
}
,
(
err
,
ret
)
=
>
{
}
)
;
// 插入多项
db
.
insert
(
[
{
name
:
'tom'
}
,
{
name
:
'jerry'
}
]
,
(
err
,
ret
)
=
>
{
}
)
;
// 查询单项
db
.
findOne
(
{
name
:
'tom'
}
,
(
err
,
ret
)
=
>
{
}
)
;
// 查询多项
db
.
find
(
{
name
:
{
$
in
:
[
'tom'
,
'jerry'
]
}
}
)
.
sort
(
{
_id
:
-
1
}
)
.
exec
(
(
err
,
ret
)
=
>
{
}
)
;
// 更新单项
db
.
update
(
{
_id
:
'1'
}
,
{
$
set
:
{
name
:
'kitty'
}
}
,
(
err
,
ret
)
=
>
{
}
)
;
// 更新多项
db
.
update
(
{
}
,
{
$
set
:
{
name
:
'kitty'
}
}
,
{
multi
:
true
}
,
(
err
,
ret
)
=
>
{
}
)
;
// 删除单项
db
.
remove
(
{
_id
:
'1'
}
,
(
err
,
ret
)
=
>
{
}
)
// 删除多项
db
.
remove
(
{
name
:
'kitty'
}
,
{
multi
:
true
}
,
(
err
,
ret
)
=
>
{
}
)
;
|
最后 完整的目录结构: