基于web页面开发串口程序界面---前端实现

让我们结合着js和html以及UI界面来介绍每一个功能。

打开串口

4行请求得到当前电脑的串口名称列表，利用模板生成下拉菜单。

11行表示串口参数设置，高亮样式切换。

html页面如下，我们将串口的参数以data-value，和data-role分组到各个下拉列表中

15行点击打开串口按钮，将当前选择需要打开的串口名称以及其他串口参数作为请求参数向后台post请求，串口成功打开后提示。如果没有选择需要打开的串口，提示需要选择一个串口。

21行获取串口参数json

post请求参数

关闭串口

发送指令

53行在左边文本框中输入的指令，点击发送后向后台发送请求，请求响应将串口返回数据以16进制显示在右侧文本框中。

下一篇介绍整个程序最神奇的地方，通过在html页面中分组使用data标签来配置modbus协议中各部分字节对应的业务含义以及数据类型，前端和后台使用统一的代码来完成其他业务读写功能。