基于B/S的远程物联网实验系统设计与实现

马青松 刘拥军 韩冬瑞 赵毅飞

(河南职业技术学院，河南 郑州 450000)

0 引言

物联网行业拥有广阔的发展前景，但急需高素质、高技能的物联网专业人才。人才的培养要由物联网实验系统作为支撑［1］，进行物联网试验，有利于物联网相关专业学生理解物联网信息采集、数据传输和执行反馈的过程［2］。

为满足新兴产业的发展需求和教学需要，我国众多高校相继提出层次化物联网实验教学平台的建设方案，从而帮助大学生和科研人员开展物联网方面的试验和项目开发原型的验证［3］。针对高校物联网相关专业如何在疫情期间有效开展实训教学的问题，采用浏览器/服务器（Browser/Server，B/S）架构、React技术栈、Java编程语言和MySQL数据库技术，设计并实现远程物联网实验系统。尤其是在类似新冠疫情期间无法在实验室现场进行试验时，远程物联网实验系统的开发将有助于物联网专业开展日常实训教学，对在校大学生及相关科研人员进行远程物联网项目开发与试验具有重要意义。

1 系统架构

远程物联网实验系统主要的业务逻辑是用户从选择物联网实验设备到物联网试验验证的过程。该系统采用B/S架构的前后端分离式模式，包括资源层、服务层、网关层、Web层和访问层，如图1所示。该系统在浏览器中运行，Web层发起数据请求，网关层根据请求路径进行分发，服务层进行逻辑处理后，与资源层实现数据的交互。

图1 系统架构图

1.1 B/S架构

B/S架构不用安装客户端程序或浏览器插件，采用B/S架构结合JavaScript、TypeScript、WWW、Ajax等技术，将系统功能实现的核心部分集中到服务器中，客户端采用Web浏览器来运行软件，从而实现浏览器与数据库的数据交互［4］。与之对应的是客户端/服务器架构（Client/Server，C/S），其通常采用两层结构，服务器负责数据管理，客户机负责完成与用户的交互。与C/S架构相比，B/S架构简化了系统的开发、维护及使用成本，是对C/S结构的一种变化和改进，是一种全新的软件系统构造技术［5］。B/S架构由于不用安装客户端，可同时控制多客户端进行访问及交互。

1.2 React技术栈

React是一个JavaScript UI库，其具有速度快、性能好、跨浏览器兼容性好、代码模块化重用性高、单向数据流等优点。React采用声明范式，能轻松地描述应用，采用对DOM树的模拟，能最大限度地减少与DOM的交互，与jQuery相比，基于diff算法的虚拟DOM技术能大幅度提升页面的渲染速度［6］。Redux是JavaScript的状态容器，采用数据仓库的管理模式，将数据存放在Store仓库中进行统一管理，方便数据的追踪、管理与维护。Axios采用Promise向后端发送请求，Axios支持Promise API接口，可实现自动拦截请求和数据。React-Router通过路由来实现页面的跳转，物联网实验系统涉及多个页面，采用React-Router设计的多级路由。React-Router用于实现路由的核心功能，Link组件体现a标签的功能，HashRouter在浏览器的url中包含井号，并采用hashchange来构建路由［7］。Ant-Design采用模块化解决方案，降低开发成本，在github社区的引用次数较多。webpack作为静态模块打包器，采用特定的依赖关系，将所有资源文件打包成一个或多个bundle，可充分利用浏览器的缓存功能［7］。采用React技术栈来开发物联网实验系统，采用Ant-Design能有效降低开发成本，使用webpack打包来提升系统的性能，通过Axios向服务器发起访问请求，实现数据的交互。

1.3 数据库技术

MySQL数据库技术是一种关系型数据库管理系统，具有体积小、速度快、开源、支持多种存储引擎和多线程等优点。MySQL数据库技术常用于互联网行业、应用系统等领域。MySQL数据库是与Java、Python、PHP等编程语言紧密结合的数据库系统。Java语言是一种面向对象的程序设计语言，具有简单、跨平台、分布式、高性能、多线程、移植性强等优点，常用于系统后端的逻辑开发［8］。物联网实验系统采用Java和MySQL来实现后端的逻辑和数据存储。

2 系统需求与总体设计

2.1 系统总体需求分析

众多高校提出多种物联网实验教学平台建设方案，其中包括物联网技术基础实验平台、研究实验平台、综合实验平台、应用示范平台［9］。目前，物联网实验平台是基于实验箱实物的，各具特点和优势，远程物联网实验系统要满足物联网专业对人才培养的需求［10］。

基于B/S的远程物联网实验系统的建设总目标是为了实现学生通过远程验证物联网试验。按照权限的不同将系统的用户分为三类。一是具有管理对应学校教学管理工作权限的管理员，即校管理员。二是具有管理院系教学管理工作权限的管理人员，即院系管理员。三是管理日常教学的任课教师和学生。校管理员是学校实验系统工作的总负责人，具有最高权限，负责全校的权限管理工作，包括对资源信息、用户信息、角色信息、部门信息的管理。院系管理员是当前院系实验教学的管理者，负责该院系的权限管理工作。远程物联网实验系统的需求见表1。

表1 远程物联网实验系统需求

2.2 系统管理模块

系统管理模块分为部门管理、角色管理、用户管理、资源管理这四个子模块。

2.2.1 部门管理。部门管理子模块用于对学校教学部门的管理。院系管理员根据学院教研室和班级情况来建立班级。系统支持模糊查询，查询当前用户权限下的部门信息。通过列表来展示多级展开的部门信息，可对父部门、部门编号、排序规则、部门简介等信息进行新增、修改和删除操作。其中，各级管理员在删除部门时可删除单个部门或含有下级部门的组织。在新建部门时，如果无父部门，则为顶级部门，如果选择父部门，则为当前父部门的子部门。

2.2.2 角色管理。角色管理子模块用于管理学校教学活动的各级角色。校级管理员可添加院系管理员角色，院系管理员可添加教研室主任角色、课程任课教师角色、学生角色，任课教师角色可添加学生课代表、指定助教，学生属于学生角色。

2.2.3 用户管理。用户管理子模块用于管理系统中的所有用户。通过关键词的模糊查询来匹配用户信息，查询结果包括序号、工号或学号、用户名、是否为管理员、是否可用、分配角色、创建时间、所属部门等。各级管理员在所属权限下可进行增加、修改、删除、查询等操作。各级管理员在创建单个用户时，要添加用户的学号或工号、用户名、密码、是否可用、所属部门、用户角色等，也可通过下载用户模板来批量导入多用户。多用户的添加流程如图2所示。

图2 批量用户添加流程

2.2.4 资源管理。为了区分角色、部门和用户，方便权限管理，该系统将界面、查询、增加、修改、删除等权限抽象为资源，通过资源管理实现对角色的权限控制。

2.3 用户登录模块

该模块用于实现用户的登录，并校验用户登录信息。管理员通过用户管理添加单个或批量用户，账号和密码采用初始化的方式分配给用户，用户账号初始化默认为学号或工号。账号或密码不存在或错误时要给出提示，密码包含数字、字母、字符等至少两种元素，位数不少于6位。用户如果选择记住密码，则下次打开系统将直接登录。登录状态保持1 d（24×60×60 s）未更新数据的，则要重新登录。登录成功则直接跳转到设备选型界面，登录失败则返回登录界面，并提示登录失败的原因。用户登录流程如图3所示。

图3 用户登录流程

2.4 实验平台选择模块

该模块用于已登录用户选择未被占用的实验平台。用户登录成功后，系统自动跳转到实验平台选择模块，如果实验平台未被占用，用户可选择实验平台，已有用户使用的实验平台，其他用户不能再选。系统通过实验平台的颜色来区分正在使用和未被使用的实验平台。用户点击某实验平台页面后，可跳转到模块配置页面。

2.5 实验配置模块

该模块可帮助用户配置实验平台，完成开机自检、开始设置、设置完成和关机等。用户点击开机自检，用于检查前端实验板卡及各模块的通电是否正常。点击开始设置按钮，可开启虚拟仪器的配置，用户处于设置状态时，不收集反馈数据。点击配置完成按钮后，页面不能操作，按钮是灰色。只有点击开始配置后，配置完成键才能操作，并将配置信息发送到前端硬件平台。点击关机按键来实现远程设备断电。

使用温湿度传感器、二氧化碳传感器、光照度传感器、PM2.5传感器、人体红外传感器、噪声传感器对数据进行采集，支持选择窄带物联网（NB-IoT）、远距离无线电（LoRa）、低功耗蓝牙（BLE）、WiFi、ZigBee、4G、GSM对试验数据进行传输。实验系统实时展示试验数据，通过STM32单片机来控制冷风机、新风机、照明灯、空气净化器等。系统监测电压、电流信息数据通过ZYNQ处理器后，经单独WiFi模块传输到云平台。

2.6 数据管理模块

数据管理模块用于管理用户的试验数据。用户通过选择班级、学生、试验名称、数据类型、开始时间、结束时间来查询试验数据。数据类型分为试验数据和监控数据。在监控数据窗口，教师角色打开当前试验人员的配置界面，可查看学生的试验配置情况。教师可通过监控来远程关闭下课后的学生实验设备。

2.7 数据库设计

根据物联网实验系统的功能要求，为方便对试验数据和用户数据的管理，对数据库的数据表进详细设计，包括系统登录人员角色与资源管理表、用户信息表、系统登录人员所在部门（专业、班级等）表、实验平台数据表、传感器表、检测指标类型表、试验数据通信方式表、试验项目表、试验数据表和监测数据表等。

3 系统设计结果

3.1 平台运行环境

该系统兼容Chrome、Mozilla、Safari浏览器，以Chrome浏览器的展示最佳效果，运行环境的分辨率为1 920 ppi×1 080 ppi。该系统部署在阿里云ECS服务器，平台运行环境见表2。

表2 平台运行环境

3.2 系统展示

物联网实验系统要按照完善统一的风格进行设计，在颜色搭配、字体大小、表单、模态框设计上要有统一的风格。

3.2.1 实验平台界面。在系统中输入用户名和密码后，点击登录，用户登录成功后，显示目前已有的实验平台，灰色为已占用的实验平台，其他学生不能再选该实验平台，深色为空闲的实验平台。系统实现的实验平台界面如图4所示。

图4 实验平台界面

3.2.2 实验配置界面。用户点击开始设置按钮后，通过配置不同的传感器和数据传输方式，将程序上传到STM32单片机中，点击设置完成后，系统将程序执行结果反馈给执行器。系统实现的实验配置界面如图5所示。

图5 试验配置界面

3.2.3 数据管理界面。学生的试数据和监控数据可通过系统来查看，方便学生和教师分析和定位问题。

3.3 系统性能测试

在Windows 10操作系统的Chrome浏览器中单独运行该系统，通过任务管理器来查看Chrome浏览器占用的资源，其中CPU占比为0.5%，内存使用量为183.6 MB。系统的性能测试结果如图6所示。

图6 系统性能测试结果图

4 结语

本研究对远程物联网实验系统的功能需求进行分析，并结合功能需求设计出远程物联网实验系统架构，采用软件项目开发中较为主流的开发工具来开发项目，采用Navicat Premium来创建数据库，采用B/S架构，并通过Java和React技术栈来实现远程物联网实验系统的功能模块，完成学生信息导入、设备选择、实验配置、数据管理等，解决学校学生进行远程物联网相关实验问题，且能长期保存实验数据。该系统通过调试运行稳定，达到预期目标，后续将会考虑添加更多功能，使系统更加成熟。