基于B/S的遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

馬青松 劉擁軍 韓冬瑞 趙毅飛

(河南職業(yè)技術(shù)學(xué)院，河南 鄭州 450000)

0 引言

物聯(lián)網(wǎng)行業(yè)擁有廣闊的發(fā)展前景，但急需高素質(zhì)、高技能的物聯(lián)網(wǎng)專業(yè)人才。人才的培養(yǎng)要由物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)作為支撐［1］，進(jìn)行物聯(lián)網(wǎng)試驗(yàn)，有利于物聯(lián)網(wǎng)相關(guān)專業(yè)學(xué)生理解物聯(lián)網(wǎng)信息采集、數(shù)據(jù)傳輸和執(zhí)行反饋的過程［2］。

為滿足新興產(chǎn)業(yè)的發(fā)展需求和教學(xué)需要，我國眾多高校相繼提出層次化物聯(lián)網(wǎng)實(shí)驗(yàn)教學(xué)平臺的建設(shè)方案，從而幫助大學(xué)生和科研人員開展物聯(lián)網(wǎng)方面的試驗(yàn)和項(xiàng)目開發(fā)原型的驗(yàn)證［3］。針對高校物聯(lián)網(wǎng)相關(guān)專業(yè)如何在疫情期間有效開展實(shí)訓(xùn)教學(xué)的問題，采用瀏覽器/服務(wù)器（Browser/Server，B/S）架構(gòu)、React技術(shù)棧、Java編程語言和MySQL數(shù)據(jù)庫技術(shù)，設(shè)計(jì)并實(shí)現(xiàn)遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)。尤其是在類似新冠疫情期間無法在實(shí)驗(yàn)室現(xiàn)場進(jìn)行試驗(yàn)時(shí)，遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)的開發(fā)將有助于物聯(lián)網(wǎng)專業(yè)開展日常實(shí)訓(xùn)教學(xué)，對在校大學(xué)生及相關(guān)科研人員進(jìn)行遠(yuǎn)程物聯(lián)網(wǎng)項(xiàng)目開發(fā)與試驗(yàn)具有重要意義。

1 系統(tǒng)架構(gòu)

遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)主要的業(yè)務(wù)邏輯是用戶從選擇物聯(lián)網(wǎng)實(shí)驗(yàn)設(shè)備到物聯(lián)網(wǎng)試驗(yàn)驗(yàn)證的過程。該系統(tǒng)采用B/S架構(gòu)的前后端分離式模式，包括資源層、服務(wù)層、網(wǎng)關(guān)層、Web層和訪問層，如圖1所示。該系統(tǒng)在瀏覽器中運(yùn)行，Web層發(fā)起數(shù)據(jù)請求，網(wǎng)關(guān)層根據(jù)請求路徑進(jìn)行分發(fā)，服務(wù)層進(jìn)行邏輯處理后，與資源層實(shí)現(xiàn)數(shù)據(jù)的交互。

圖1 系統(tǒng)架構(gòu)圖

1.1 B/S架構(gòu)

B/S架構(gòu)不用安裝客戶端程序或?yàn)g覽器插件，采用B/S架構(gòu)結(jié)合JavaScript、TypeScript、WWW、Ajax等技術(shù)，將系統(tǒng)功能實(shí)現(xiàn)的核心部分集中到服務(wù)器中，客戶端采用Web瀏覽器來運(yùn)行軟件，從而實(shí)現(xiàn)瀏覽器與數(shù)據(jù)庫的數(shù)據(jù)交互［4］。與之對應(yīng)的是客戶端/服務(wù)器架構(gòu)（Client/Server，C/S），其通常采用兩層結(jié)構(gòu)，服務(wù)器負(fù)責(zé)數(shù)據(jù)管理，客戶機(jī)負(fù)責(zé)完成與用戶的交互。與C/S架構(gòu)相比，B/S架構(gòu)簡化了系統(tǒng)的開發(fā)、維護(hù)及使用成本，是對C/S結(jié)構(gòu)的一種變化和改進(jìn)，是一種全新的軟件系統(tǒng)構(gòu)造技術(shù)［5］。B/S架構(gòu)由于不用安裝客戶端，可同時(shí)控制多客戶端進(jìn)行訪問及交互。

1.2 React技術(shù)棧

React是一個(gè)JavaScript UI庫，其具有速度快、性能好、跨瀏覽器兼容性好、代碼模塊化重用性高、單向數(shù)據(jù)流等優(yōu)點(diǎn)。React采用聲明范式，能輕松地描述應(yīng)用，采用對DOM樹的模擬，能最大限度地減少與DOM的交互，與jQuery相比，基于diff算法的虛擬DOM技術(shù)能大幅度提升頁面的渲染速度［6］。Redux是JavaScript的狀態(tài)容器，采用數(shù)據(jù)倉庫的管理模式，將數(shù)據(jù)存放在Store倉庫中進(jìn)行統(tǒng)一管理，方便數(shù)據(jù)的追蹤、管理與維護(hù)。Axios采用Promise向后端發(fā)送請求，Axios支持Promise API接口，可實(shí)現(xiàn)自動攔截請求和數(shù)據(jù)。React-Router通過路由來實(shí)現(xiàn)頁面的跳轉(zhuǎn)，物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)涉及多個(gè)頁面，采用React-Router設(shè)計(jì)的多級路由。React-Router用于實(shí)現(xiàn)路由的核心功能，Link組件體現(xiàn)a標(biāo)簽的功能，HashRouter在瀏覽器的url中包含井號，并采用hashchange來構(gòu)建路由［7］。Ant-Design采用模塊化解決方案，降低開發(fā)成本，在github社區(qū)的引用次數(shù)較多。webpack作為靜態(tài)模塊打包器，采用特定的依賴關(guān)系，將所有資源文件打包成一個(gè)或多個(gè)bundle，可充分利用瀏覽器的緩存功能［7］。采用React技術(shù)棧來開發(fā)物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)，采用Ant-Design能有效降低開發(fā)成本，使用webpack打包來提升系統(tǒng)的性能，通過Axios向服務(wù)器發(fā)起訪問請求，實(shí)現(xiàn)數(shù)據(jù)的交互。

1.3 數(shù)據(jù)庫技術(shù)

MySQL數(shù)據(jù)庫技術(shù)是一種關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，具有體積小、速度快、開源、支持多種存儲引擎和多線程等優(yōu)點(diǎn)。MySQL數(shù)據(jù)庫技術(shù)常用于互聯(lián)網(wǎng)行業(yè)、應(yīng)用系統(tǒng)等領(lǐng)域。MySQL數(shù)據(jù)庫是與Java、Python、PHP等編程語言緊密結(jié)合的數(shù)據(jù)庫系統(tǒng)。Java語言是一種面向?qū)ο蟮某绦蛟O(shè)計(jì)語言，具有簡單、跨平臺、分布式、高性能、多線程、移植性強(qiáng)等優(yōu)點(diǎn)，常用于系統(tǒng)后端的邏輯開發(fā)［8］。物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)采用Java和MySQL來實(shí)現(xiàn)后端的邏輯和數(shù)據(jù)存儲。

2 系統(tǒng)需求與總體設(shè)計(jì)

2.1 系統(tǒng)總體需求分析

眾多高校提出多種物聯(lián)網(wǎng)實(shí)驗(yàn)教學(xué)平臺建設(shè)方案，其中包括物聯(lián)網(wǎng)技術(shù)基礎(chǔ)實(shí)驗(yàn)平臺、研究實(shí)驗(yàn)平臺、綜合實(shí)驗(yàn)平臺、應(yīng)用示范平臺［9］。目前，物聯(lián)網(wǎng)實(shí)驗(yàn)平臺是基于實(shí)驗(yàn)箱實(shí)物的，各具特點(diǎn)和優(yōu)勢，遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)要滿足物聯(lián)網(wǎng)專業(yè)對人才培養(yǎng)的需求［10］。

基于B/S的遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)的建設(shè)總目標(biāo)是為了實(shí)現(xiàn)學(xué)生通過遠(yuǎn)程驗(yàn)證物聯(lián)網(wǎng)試驗(yàn)。按照權(quán)限的不同將系統(tǒng)的用戶分為三類。一是具有管理對應(yīng)學(xué)校教學(xué)管理工作權(quán)限的管理員，即校管理員。二是具有管理院系教學(xué)管理工作權(quán)限的管理人員，即院系管理員。三是管理日常教學(xué)的任課教師和學(xué)生。校管理員是學(xué)校實(shí)驗(yàn)系統(tǒng)工作的總負(fù)責(zé)人，具有最高權(quán)限，負(fù)責(zé)全校的權(quán)限管理工作，包括對資源信息、用戶信息、角色信息、部門信息的管理。院系管理員是當(dāng)前院系實(shí)驗(yàn)教學(xué)的管理者，負(fù)責(zé)該院系的權(quán)限管理工作。遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)的需求見表1。

表1 遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)需求

2.2 系統(tǒng)管理模塊

系統(tǒng)管理模塊分為部門管理、角色管理、用戶管理、資源管理這四個(gè)子模塊。

2.2.1 部門管理。部門管理子模塊用于對學(xué)校教學(xué)部門的管理。院系管理員根據(jù)學(xué)院教研室和班級情況來建立班級。系統(tǒng)支持模糊查詢，查詢當(dāng)前用戶權(quán)限下的部門信息。通過列表來展示多級展開的部門信息，可對父部門、部門編號、排序規(guī)則、部門簡介等信息進(jìn)行新增、修改和刪除操作。其中，各級管理員在刪除部門時(shí)可刪除單個(gè)部門或含有下級部門的組織。在新建部門時(shí)，如果無父部門，則為頂級部門，如果選擇父部門，則為當(dāng)前父部門的子部門。

2.2.2 角色管理。角色管理子模塊用于管理學(xué)校教學(xué)活動的各級角色。校級管理員可添加院系管理員角色，院系管理員可添加教研室主任角色、課程任課教師角色、學(xué)生角色，任課教師角色可添加學(xué)生課代表、指定助教，學(xué)生屬于學(xué)生角色。

2.2.3 用戶管理。用戶管理子模塊用于管理系統(tǒng)中的所有用戶。通過關(guān)鍵詞的模糊查詢來匹配用戶信息，查詢結(jié)果包括序號、工號或?qū)W號、用戶名、是否為管理員、是否可用、分配角色、創(chuàng)建時(shí)間、所屬部門等。各級管理員在所屬權(quán)限下可進(jìn)行增加、修改、刪除、查詢等操作。各級管理員在創(chuàng)建單個(gè)用戶時(shí)，要添加用戶的學(xué)號或工號、用戶名、密碼、是否可用、所屬部門、用戶角色等，也可通過下載用戶模板來批量導(dǎo)入多用戶。多用戶的添加流程如圖2所示。

圖2 批量用戶添加流程

2.2.4 資源管理。為了區(qū)分角色、部門和用戶，方便權(quán)限管理，該系統(tǒng)將界面、查詢、增加、修改、刪除等權(quán)限抽象為資源，通過資源管理實(shí)現(xiàn)對角色的權(quán)限控制。

2.3 用戶登錄模塊

該模塊用于實(shí)現(xiàn)用戶的登錄，并校驗(yàn)用戶登錄信息。管理員通過用戶管理添加單個(gè)或批量用戶，賬號和密碼采用初始化的方式分配給用戶，用戶賬號初始化默認(rèn)為學(xué)號或工號。賬號或密碼不存在或錯(cuò)誤時(shí)要給出提示，密碼包含數(shù)字、字母、字符等至少兩種元素，位數(shù)不少于6位。用戶如果選擇記住密碼，則下次打開系統(tǒng)將直接登錄。登錄狀態(tài)保持1 d（24×60×60 s）未更新數(shù)據(jù)的，則要重新登錄。登錄成功則直接跳轉(zhuǎn)到設(shè)備選型界面，登錄失敗則返回登錄界面，并提示登錄失敗的原因。用戶登錄流程如圖3所示。

圖3 用戶登錄流程

2.4 實(shí)驗(yàn)平臺選擇模塊

該模塊用于已登錄用戶選擇未被占用的實(shí)驗(yàn)平臺。用戶登錄成功后，系統(tǒng)自動跳轉(zhuǎn)到實(shí)驗(yàn)平臺選擇模塊，如果實(shí)驗(yàn)平臺未被占用，用戶可選擇實(shí)驗(yàn)平臺，已有用戶使用的實(shí)驗(yàn)平臺，其他用戶不能再選。系統(tǒng)通過實(shí)驗(yàn)平臺的顏色來區(qū)分正在使用和未被使用的實(shí)驗(yàn)平臺。用戶點(diǎn)擊某實(shí)驗(yàn)平臺頁面后，可跳轉(zhuǎn)到模塊配置頁面。

2.5 實(shí)驗(yàn)配置模塊

該模塊可幫助用戶配置實(shí)驗(yàn)平臺，完成開機(jī)自檢、開始設(shè)置、設(shè)置完成和關(guān)機(jī)等。用戶點(diǎn)擊開機(jī)自檢，用于檢查前端實(shí)驗(yàn)板卡及各模塊的通電是否正常。點(diǎn)擊開始設(shè)置按鈕，可開啟虛擬儀器的配置，用戶處于設(shè)置狀態(tài)時(shí)，不收集反饋數(shù)據(jù)。點(diǎn)擊配置完成按鈕后，頁面不能操作，按鈕是灰色。只有點(diǎn)擊開始配置后，配置完成鍵才能操作，并將配置信息發(fā)送到前端硬件平臺。點(diǎn)擊關(guān)機(jī)按鍵來實(shí)現(xiàn)遠(yuǎn)程設(shè)備斷電。

使用溫濕度傳感器、二氧化碳傳感器、光照度傳感器、PM2.5傳感器、人體紅外傳感器、噪聲傳感器對數(shù)據(jù)進(jìn)行采集，支持選擇窄帶物聯(lián)網(wǎng)（NB-IoT）、遠(yuǎn)距離無線電（LoRa）、低功耗藍(lán)牙（BLE）、WiFi、ZigBee、4G、GSM對試驗(yàn)數(shù)據(jù)進(jìn)行傳輸。實(shí)驗(yàn)系統(tǒng)實(shí)時(shí)展示試驗(yàn)數(shù)據(jù)，通過STM32單片機(jī)來控制冷風(fēng)機(jī)、新風(fēng)機(jī)、照明燈、空氣凈化器等。系統(tǒng)監(jiān)測電壓、電流信息數(shù)據(jù)通過ZYNQ處理器后，經(jīng)單獨(dú)WiFi模塊傳輸?shù)皆破脚_。

2.6 數(shù)據(jù)管理模塊

數(shù)據(jù)管理模塊用于管理用戶的試驗(yàn)數(shù)據(jù)。用戶通過選擇班級、學(xué)生、試驗(yàn)名稱、數(shù)據(jù)類型、開始時(shí)間、結(jié)束時(shí)間來查詢試驗(yàn)數(shù)據(jù)。數(shù)據(jù)類型分為試驗(yàn)數(shù)據(jù)和監(jiān)控?cái)?shù)據(jù)。在監(jiān)控?cái)?shù)據(jù)窗口，教師角色打開當(dāng)前試驗(yàn)人員的配置界面，可查看學(xué)生的試驗(yàn)配置情況。教師可通過監(jiān)控來遠(yuǎn)程關(guān)閉下課后的學(xué)生實(shí)驗(yàn)設(shè)備。

2.7 數(shù)據(jù)庫設(shè)計(jì)

根據(jù)物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)的功能要求，為方便對試驗(yàn)數(shù)據(jù)和用戶數(shù)據(jù)的管理，對數(shù)據(jù)庫的數(shù)據(jù)表進(jìn)詳細(xì)設(shè)計(jì)，包括系統(tǒng)登錄人員角色與資源管理表、用戶信息表、系統(tǒng)登錄人員所在部門（專業(yè)、班級等）表、實(shí)驗(yàn)平臺數(shù)據(jù)表、傳感器表、檢測指標(biāo)類型表、試驗(yàn)數(shù)據(jù)通信方式表、試驗(yàn)項(xiàng)目表、試驗(yàn)數(shù)據(jù)表和監(jiān)測數(shù)據(jù)表等。

3 系統(tǒng)設(shè)計(jì)結(jié)果

3.1 平臺運(yùn)行環(huán)境

該系統(tǒng)兼容Chrome、Mozilla、Safari瀏覽器，以Chrome瀏覽器的展示最佳效果，運(yùn)行環(huán)境的分辨率為1 920 ppi×1 080 ppi。該系統(tǒng)部署在阿里云ECS服務(wù)器，平臺運(yùn)行環(huán)境見表2。

表2 平臺運(yùn)行環(huán)境

3.2 系統(tǒng)展示

物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)要按照完善統(tǒng)一的風(fēng)格進(jìn)行設(shè)計(jì)，在顏色搭配、字體大小、表單、模態(tài)框設(shè)計(jì)上要有統(tǒng)一的風(fēng)格。

3.2.1 實(shí)驗(yàn)平臺界面。在系統(tǒng)中輸入用戶名和密碼后，點(diǎn)擊登錄，用戶登錄成功后，顯示目前已有的實(shí)驗(yàn)平臺，灰色為已占用的實(shí)驗(yàn)平臺，其他學(xué)生不能再選該實(shí)驗(yàn)平臺，深色為空閑的實(shí)驗(yàn)平臺。系統(tǒng)實(shí)現(xiàn)的實(shí)驗(yàn)平臺界面如圖4所示。

圖4 實(shí)驗(yàn)平臺界面

3.2.2 實(shí)驗(yàn)配置界面。用戶點(diǎn)擊開始設(shè)置按鈕后，通過配置不同的傳感器和數(shù)據(jù)傳輸方式，將程序上傳到STM32單片機(jī)中，點(diǎn)擊設(shè)置完成后，系統(tǒng)將程序執(zhí)行結(jié)果反饋給執(zhí)行器。系統(tǒng)實(shí)現(xiàn)的實(shí)驗(yàn)配置界面如圖5所示。

圖5 試驗(yàn)配置界面

3.2.3 數(shù)據(jù)管理界面。學(xué)生的試數(shù)據(jù)和監(jiān)控?cái)?shù)據(jù)可通過系統(tǒng)來查看，方便學(xué)生和教師分析和定位問題。

3.3 系統(tǒng)性能測試

在Windows 10操作系統(tǒng)的Chrome瀏覽器中單獨(dú)運(yùn)行該系統(tǒng)，通過任務(wù)管理器來查看Chrome瀏覽器占用的資源，其中CPU占比為0.5%，內(nèi)存使用量為183.6 MB。系統(tǒng)的性能測試結(jié)果如圖6所示。

圖6 系統(tǒng)性能測試結(jié)果圖

4 結(jié)語

本研究對遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)的功能需求進(jìn)行分析，并結(jié)合功能需求設(shè)計(jì)出遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)架構(gòu)，采用軟件項(xiàng)目開發(fā)中較為主流的開發(fā)工具來開發(fā)項(xiàng)目，采用Navicat Premium來創(chuàng)建數(shù)據(jù)庫，采用B/S架構(gòu)，并通過Java和React技術(shù)棧來實(shí)現(xiàn)遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)的功能模塊，完成學(xué)生信息導(dǎo)入、設(shè)備選擇、實(shí)驗(yàn)配置、數(shù)據(jù)管理等，解決學(xué)校學(xué)生進(jìn)行遠(yuǎn)程物聯(lián)網(wǎng)相關(guān)實(shí)驗(yàn)問題，且能長期保存實(shí)驗(yàn)數(shù)據(jù)。該系統(tǒng)通過調(diào)試運(yùn)行穩(wěn)定，達(dá)到預(yù)期目標(biāo)，后續(xù)將會考慮添加更多功能，使系統(tǒng)更加成熟。