基于web页面开发串口程序界面---功能实现

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

以设备系统参数为例。

首先看一下html

可以看到针对每个功能，其实对应的串口指令做的都是一件事---从某位置开始读取多少个字节。所以我们直接将加上crc校验码的指令配置在功能模块div的data-write属性上，当将读指令发给串口，串口返回相应信息的字节流。通常情况下我们后台根据具体业务构造结构体来解析字节流到业务字段。但是我们很巧妙的将字节流对应的业务结构体配置在html页面中。如上图：data-field，data-type，data-size分别定义了返回字节流每一部分解析规则。

看一下js代码，看一下整个过程，以及请求的格式是什么样的。

当点击读取按钮时，使用jQuery选择器将配置在DOM中的参数转换为json，然后当做请求参数发送到后台，cmd表示此功能的串口指令，params告诉后台要将串口返回字节流，按照size分解成field字段后，按照type解析不同类型显示。

因为有时会用到动态生成UI，比如当使用传感器配置读取到传感器数量时，才会生成每一个传感器设置的面板UI。

再看上面的js，检查是否有data-callback属性，如果有，根据返回的数据调用callback函数，通常回调函数做的事是动态循环生成其他功能的UI。

下文介绍使用underscore.js模板函数来动态生成DOM。