基于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)專(zhuān)業(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)專(zhuān)業(yè)學(xué)生理解物聯(lián)網(wǎng)信息采集、數(shù)據(jù)傳輸和執(zhí)行反饋的過(guò)程［2］。

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

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

遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)主要的業(yè)務(wù)邏輯是用戶(hù)從選擇物聯(lián)網(wǎng)實(shí)驗(yàn)設(shè)備到物聯(lián)網(wǎng)試驗(yàn)驗(yàn)證的過(guò)程。該系統(tǒng)采用B/S架構(gòu)的前后端分離式模式，包括資源層、服務(wù)層、網(wǎng)關(guān)層、Web層和訪(fǎng)問(wèn)層，如圖1所示。該系統(tǒng)在瀏覽器中運(yùn)行，Web層發(fā)起數(shù)據(jù)請(qǐng)求，網(wǎng)關(guān)層根據(jù)請(qǐng)求路徑進(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)不用安裝客戶(hù)端程序或?yàn)g覽器插件，采用B/S架構(gòu)結(jié)合JavaScript、TypeScript、WWW、Ajax等技術(shù)，將系統(tǒng)功能實(shí)現(xiàn)的核心部分集中到服務(wù)器中，客戶(hù)端采用Web瀏覽器來(lái)運(yùn)行軟件，從而實(shí)現(xiàn)瀏覽器與數(shù)據(jù)庫(kù)的數(shù)據(jù)交互［4］。與之對(duì)應(yīng)的是客戶(hù)端/服務(wù)器架構(gòu)（Client/Server，C/S），其通常采用兩層結(jié)構(gòu)，服務(wù)器負(fù)責(zé)數(shù)據(jù)管理，客戶(hù)機(jī)負(fù)責(zé)完成與用戶(hù)的交互。與C/S架構(gòu)相比，B/S架構(gòu)簡(jiǎn)化了系統(tǒng)的開(kāi)發(fā)、維護(hù)及使用成本，是對(duì)C/S結(jié)構(gòu)的一種變化和改進(jìn)，是一種全新的軟件系統(tǒng)構(gòu)造技術(shù)［5］。B/S架構(gòu)由于不用安裝客戶(hù)端，可同時(shí)控制多客戶(hù)端進(jìn)行訪(fǎng)問(wèn)及交互。

1.2 React技術(shù)棧

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

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

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

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

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

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

基于B/S的遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)的建設(shè)總目標(biāo)是為了實(shí)現(xiàn)學(xué)生通過(guò)遠(yuǎn)程驗(yàn)證物聯(lián)網(wǎng)試驗(yàn)。按照權(quán)限的不同將系統(tǒng)的用戶(hù)分為三類(lèi)。一是具有管理對(duì)應(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)限管理工作，包括對(duì)資源信息、用戶(hù)信息、角色信息、部門(mén)信息的管理。院系管理員是當(dāng)前院系實(shí)驗(yàn)教學(xué)的管理者，負(fù)責(zé)該院系的權(quán)限管理工作。遠(yuǎn)程物聯(lián)網(wǎng)實(shí)驗(yàn)系統(tǒng)的需求見(jiàn)表1。

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

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

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

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

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

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

圖2 批量用戶(hù)添加流程

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

2.3 用戶(hù)登錄模塊

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

圖3 用戶(hù)登錄流程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.2.2 實(shí)驗(yàn)配置界面。用戶(hù)點(diǎn)擊開(kāi)始設(shè)置按鈕后，通過(guò)配置不同的傳感器和數(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ù)可通過(guò)系統(tǒng)來(lái)查看，方便學(xué)生和教師分析和定位問(wèn)題。

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

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

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

4 結(jié)語(yǔ)

本研究對(duì)遠(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)目開(kāi)發(fā)中較為主流的開(kāi)發(fā)工具來(lái)開(kāi)發(fā)項(xiàng)目，采用Navicat Premium來(lái)創(chuàng)建數(shù)據(jù)庫(kù)，采用B/S架構(gòu)，并通過(guò)Java和React技術(shù)棧來(lái)實(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)問(wèn)題，且能長(zhǎng)期保存實(shí)驗(yàn)數(shù)據(jù)。該系統(tǒng)通過(guò)調(diào)試運(yùn)行穩(wěn)定，達(dá)到預(yù)期目標(biāo)，后續(xù)將會(huì)考慮添加更多功能，使系統(tǒng)更加成熟。