基于移動互聯網技術的實驗室資產管理系統＊

鄭俊虹，汪香君，張俊鉉

(深圳技術大學大數據與互聯網學院，廣東 深圳 518118)

0 引言

我校作為應用型大學，致力于培養具有國際視野、工匠精神和創新創業能力的高水平工程師、設計師等高素質應用型人才。學校配有教學實驗室、科研實驗室、實訓室等，實驗室設備種類繁多、數量龐大。師生在日常的教學實踐過程中，經常需要從實驗室借用設備。

實驗室資產管理是一項復雜的系統工程，本校資產管理部門注重數據的錄入、存儲和審核，忽視了設備的動態管理。師生使用系統的過程中，經常會遇到以下問題：①學生做項目需要借用實訓室設備，首先需要查看哪些設備處于空閑狀態及設備的存放位置，然后向設備負責人申請借用設備，設備負責人審核通過后，系統應更新資產的使用人和位置信息，但是當前系統沒有賦予學生使用系統的權限，只有實驗室的資產負責人有權限；②學生和老師在使用設備時，設備發生故障，當前系統沒有設備報修模塊，不能及時報修，也無法追蹤設備的維修狀態。

針對學校資產管理系統的工作流程和實際管理流程不相符合的情況，本文以學院動態管理使用場景為切入點，對系統進行二次開發。該系統的設計包括系統管理Web平臺和微信小程序移動端兩個部分。

1 系統設計

實驗室資產管理系統的設計，既要考慮管理的邊界，又必須注重效率。小程序的接入提高了系統運轉的實時性，使得學生、教師和資產管理者有更出色的體驗[2]。系統管理Web 平臺主要提供給實驗室管理人員使用，對不同權限的用戶顯示相對應的設備資產、借用單、維修單等；小程序移動端應用允許師生查詢設備狀態、借用設備、報修故障以及負責人審批使用。資產管理系統基本功能框架如圖1所示。

圖1 資產管理系統基本功能框架

1.1 系統管理后臺

系統管理后臺通過對以上基本功能整合分析，從邏輯上分為兩大塊，系統管理和設備管理。

1.1.1 系統管理

系統管理任務是對系統進行日常管理和必要的維護[3]，該模塊由系統管理員進行操作，主要圍繞用戶管理、權限管理、教室管理、數據備份等功能。

實驗室資產的申請、報修和審批等業務需要不同的角色才能完成。因此可以將用戶分為普通用戶、實驗室負責人、系統管理員三個角色實體[3]。

⑴普通用戶

普通用戶是主要的用戶群體，可以對資產進行查詢、借用和報修等操作。

⑵實驗室負責人

基于領導對實驗室管理職責的劃分，每個實驗室都有負責老師負責管理審批。包括設備借用審批、維修保養和報廢檢查等。實驗室負責人不僅擁有以上權限，同時擁有普通用戶的權限。

⑶系統管理員

系統管理員主要負責用戶管理、權限管理和教室管理等基本數據的維護和備份。

用戶管理包括添加、更新、刪除用戶，并根據用戶的角色，設置對應權限。

教室管理主要包括實驗室的添加、更新和刪除，該模塊由系統管理員進行操作。

數據備份是系統中非常重要的一部分，只有定期對數據進行備份，才能防止系統出現操作失誤或系統故障而導致數據丟失。

1.1.2 設備管理

學院的設備包括教學設備、科研儀器、辦公設備和耗材等。設備的基本信息包括設備編號、名稱、型號、使用狀態、單價、類別、所屬實驗室等。實驗室負責人主要負責對設備進行管理操作，包括添加設備信息，更新設備狀態等。普通用戶日常工作中相關的業務包括查詢設備、借用設備、報修設備等，相對應的實驗室負責人需要對設備借用單進行審批，對維修登記進行更新。

1.2 微信小程序移動端

微信小程序主要應用在手機等移動終端上，移動端界面的設計應該遵循簡潔清晰性原則。用戶界面應給人愉悅的用戶體驗，因此，界面展現的內容需要具備清晰的信息流程，傳遞的信息不要太多。微信小程序移動端的設計主要提供給普通用戶和實驗室負責人使用。

微信小程序移動端的設計僅支持設備實時查詢、借用、報修和審批功能，主要是為了提高動態管理的效率。整個系統從邏輯上分為四個模塊：資產查詢、借用設備、故障報修、審批查詢。審批查詢模塊根據用戶角色，顯示不同的內容。對于普通用戶，該模塊展示用戶個人提交的借用和報修審批表；對于實驗室負責人，除了展示個人申請審批表信息，還額外展示須由負責人審批的表單。

2 系統實現

整個系統是基于前后端分離架構模式設計實現的，后端服務基于Spring Boot 框架設計實現，持久層框架使用MyBatis Plus，數據庫使用mysql8.0 版本；Web 前端基于Vue 框架設計實現，使用的組件庫是element-ui；微信小程序主要參考微信官方文檔進行開發。

2.1 系統管理Web平臺

2.1.1 用戶登錄登出實現

用戶的登錄登出使用Shiro 安全框架來做整體系統訪問控制，采用JwtToken 做安全認證。Shiro 是Apache 旗下一個開源框架，它將軟件系統的安全認證相關功能抽取出來，實現用戶身份認證，權限授權、加密、會話管理等功能，組成了一個通用的安全認證框架[1]。Shiro 框架主要由以下幾個部分組成：①Subject主體，該主體可以是系統用戶，也可以是外部的應用程序，更確切的說是一個session，在Shrio認證體系中，Subject 為Shiro 框架中完成外部程序認證、授權的抽象；②SecurityManager 即安全管理器，用來對所有的Subject 的認證和鑒權進行管理；③Realm 用來實現自定義的認證鑒權規則。具體認證流程為：程序構建一個終端用戶認證信息實例，調用Subject 登錄方法；然后Shiro 的DefaultFilter 為身份驗證、授權提供統一入口；SecurityManager 接收到信息后，委托內置的Authenticator 實 例ModularRealmAuthenticator 在認證過程中會對設置的一個或多個Realm 實例進行適配；最后判斷Realm 是否支持提交的Subject 進行認證。Shiro框架的認證流程圖可參考圖2。

圖2 Shiro框架認證流程圖

上述的認證方式是基于session 的，由于客戶端無法保存session，所以無法做到無狀態登錄。本系統引入JWT（Json Web Token）進行認證。JWT 是為了在網絡應用環境間傳遞聲明而執行的一種基于JSON 的開放標準[4]。JWT 本質上是一個令牌，可以存儲在客戶端的localstore 或者cookie 中。對于已經登錄過的用戶，可以采用如圖3所示的認證方式。

圖3 JWT認證流程圖

2.1.2 頁面設計

該系統中資產信息、用戶信息、實驗室信息、借用單、維修單等使用了相似的功能和頁面邏輯。

頁面的設計是用來展示后端的數據的，后端定義的接口將數據以list結構返回。因此前端選用el-table組件作為基礎組件，使用el-table-column 標簽來聲明表格中列的屬性，el-table 組件根據綁定的list 組件來動態渲染表格。當項目中查詢接口增多時，就需要編寫重復性的代碼展示不同的表格。基于該情況，使用Vue組件化的思想，設計了公共表組件，提高了代碼的可重用性[5]。Common-table 組件包含column-props、fetch-data 等屬性對數據拉取和數據列進行展示。在組件初始化時會通過fetch-data 方法查詢數據，利用v-for 指令根據column-props 來構造el-column。使用了該組件的頁面如圖4所示。

圖4 資產信息界面

2.2 微信小程序移動端

程序運行依賴的環境就是宿主環境，微信客戶端則是小程序的宿主環境。小程序借助宿主環境提供的能力，實現對應的功能。微信小程序前端使用微信小程序原生組件來布局，使用組件庫進行優化，使用微信小程序原生API來調用宿主環境提供的功能。

小程序中的通信主體是渲染層和邏輯層，其中WXML模板和WXSS樣式工作在渲染層，Javascript腳本工作在邏輯層。小程序的通信邏輯分為兩個部分。①邏輯層和騰訊云服務器之間的通信：邏輯層發送數據請求，經微信客戶端轉發給騰訊云端服務器，服務器對請求進行響應，再將響應數據經微信客戶端轉發給邏輯層。②渲染層和邏輯層之間的通信：邏輯層的數據通過微信客戶端轉發給渲染層呈現。

鑒于移動端界面的設計應該遵循簡潔清晰性原則，小程序的首頁展示了小程序的主要功能模塊資產查詢、借用設備、故障報修、審批查詢。

資產查詢：可以根據設備編號、設備名稱、設備狀態、設備價格、所屬實驗室等進行查詢。

借用設備：填寫設備編號后，會自動填充名稱、類型、資產狀態、所屬實驗室、資產負責人、借用人等信息，當前用戶僅需填寫存放位置和借用說明，提交審核。

故障報修：填寫設備編號，故障描述，報修人等信息，提交審核。

審批查詢：對于普通用戶，審批界面會顯示借用、報修查詢標簽頁用于展示當前用戶提起的借用、報修記錄；對于實驗室負責人，會額外展示兩個借用、報修審核頁。

小程序主頁和資產借用頁效果圖如圖5所示。

圖5 小程序主頁和資產借用頁效果圖

3 結束語

本文在原有系統上增加了資產借用、故障報修和表單審批等功能模塊，將基于Web 的系統管理后臺和微信小程序移動端相結合，設計和實現了實驗室資產動態管理的功能。該系統通過技術手段不僅提高了資產管理人員的工作效率，也讓師生有了更好的使用體驗。隨著學校的不斷發展，系統還需要增加相應的功能模塊以滿足新增需求。從技術上，可以在SpringBoot基礎上引入SpringCloud微服務架構，更好的解決系統性能高并發和功能復雜度的問題[6]。