高校實驗室資源信息管理系統的設計與研究

吳偉娜 于北瑜 孫會強 周會會

（廣東海洋大學數學與計算機學院 廣東省湛江市 524088）

1 引言

隨著高校培養人才對實踐動手能力和創新能力的不斷提高[1-2]，理工科和文科的很多課程都在不斷增設課程的實驗項目或者實驗課程，實驗室成為高校教師和學生越來越重要的教學活動場所，很多高校也不斷加大對實驗室建設的財力投入，硬件設施得到了很大的改善。實驗室在提高高校教師的科研能力方面，以及提高學生的實踐動手能力和創新開發能力等方面具有重要作用，是重要的科研與學習空間、實驗教學與人才培養基地。然而，有些高校的實驗室管理比較分散，從而造成一定的資源浪費[3-4]，大多數實驗室基本上都是有課的時候學生才可以進入實驗室，尤其是辦學層次比較低的一些高校，實驗室的規模與管理水平、使用效果反映了高校的辦學水平。因此，為了充分利用實驗室資源，提高資源利用率及其管理效率，各高校對實驗室資源管理提出了越來越高的要求，實驗室資源管理也因而成為當前高校實驗室工作的重要任務之一，各高校也在不斷投入財力提高管理效率[5-9]。本文針對廣東海洋大學計算機實驗室的管理開發設計了一個信息管理平臺，用于平時的教學活動安排和實驗室資源占用情況查詢，強化實驗室對師生的服務功能，從而使得實驗室資源的利用達到最大化。

2 實驗室資源信息管理系統

系統的用戶分為資源管理和資源查詢與申請需求，前者為管理員，系統的權限大，對后者的基本情況進行核實，對實驗室資源的配置情況及其使用情況、預約情況進行統一運籌和管理，可以在系統發布一些實驗室申請使用的公告，也可以對各種信息增添刪除或者修改等操作。后者為師生用戶，除了可以修改設置個人的密碼等信息之外，主要有實驗室資源占用情況（上課、待定）的查詢以及實驗室資源的預約申請，查看公告等。

3 實驗室資源信息管理系統的設計

開發設計實驗室管理系統的主要目的是發揮教育信息技術在教學資源管理中的作用，方便老師和學生在日常教學活動中對實驗室的使用進行線上查詢和預約。

圖1 是本系統的登陸界面，登陸用戶名為administrator 和u123456 或u654321 兩種類型（123456 和654321 分別表示教工號和學號）。系統根據登陸賬號的特點將自動判斷和識別用戶類型，從而區分登陸用戶具有管理權限還是使用權限。系統建立了基于MVVM 設計模式的數據庫，包含實驗室占用、待定、空閑情況以及配置信息、用戶信息情況等信息。

3.1 實驗室資源信息使用情況查詢

圖1：系統的登陸界面

圖2：系統信息展示

圖3：資源信息的可視化結果

系統為登陸用戶提供了實驗室查詢功能，登陸時依據登陸查賬識別登陸賬號的身份類別以后迅速提供相應的查詢功能，方便用戶快速找到可用的實驗室及其所屬的區域或教學實驗樓。信息展示頁面如圖2所示。

3.2 實驗室空閑資源的預約申請

為了提高實驗室資源的利用率和高效管理，本資源管理系統為用戶建立了空閑實驗室在線預約申請的功能。

申請時，用戶首先登錄系統查詢實驗室的配置情況以及在自己欲申請的時間段是否處于空閑狀態或待定狀態，如果不是空閑或待定狀態的實驗室則不能進入預約界面，同時系統會優先推薦空閑狀態的實驗室。預約時，選中自己想要的實驗室，并且填寫申請使用的理由、具體的時間段、申請人的聯系信息及其所在的學院和班級等信息。

圖4：MVVM 示意圖

圖5：雙向綁定的代碼

3.3 實驗室資源的可視化瀏覽

為了方便老師和學生更快的申請到自己需要的實驗室，系統增添了各樓宇實驗室占用情況的可視化模塊，有的占用率高有的占用率低，申請預約的用戶可以首先選擇占用率低的區域找是否有符合自己配置要求的實驗室，然后申請，從而提高用戶申請預約的效率。實驗室資源的可視化結果如圖3所示。

3.4 實驗室資源系統的統籌管理

系統的統籌管理只屬于管理員，普通用戶只有使用權而沒有管理權，從而確保系統的安全性。

本系統是根據登陸時的賬戶自動識別用戶類型從而確定對應的權限，如果識別到管理員登陸，則界面上可對實驗室資源的占用情況、預約情況和空閑情況以及其他用戶信息進行查詢和添加、修改、刪除等操作，如果遇到某種緊急情況須要使用某個實驗室，但是該實驗室又已經被預約的情況下，管理員可刪除該預約同時向申請人發送相關信息，提醒申請人重新進行預約，最終達到管理實驗室資源系統的目的。

4 管理系統的核心技術

本文的資源管理系統采用MVVM(Model-View-ViewModel)設計模式的vue.js 進行開發，可以大大地減少對DOM(Document Object Model)的操作，框架替我們做了大部分的工作，從而專注于數據驅動的方式進行開發，提升可讀性以及可復用性。MVVM 設計模式的ViewModel 可以理解為數據處理層，View 層發生變化的時候會直接影響到ViewModel 層的變化，同時，ViewModel 層得到的變化也會明顯影響到View 層的效果[10]，這個變化關系稱之為雙向綁定，如圖4所示。

其中，系統的View 層主要是用于呈現給用戶，用戶在這里進行交互。View 中應盡量減少邏輯，只存在簡單的條件，避免耦合過多的邏輯，從而導致系統后期維護困難。其獨立于Model 層的變化與改變。通常細分下來就是HTML+CSS 層。ViewModel 是控制層，是View 層與Model 層的橋梁，Model 層或View 層發生的更改需要ViewModel 來通訊，這一部分的操作具體由vue.js 實現MVVM 雙向綁定。Model 層負責主要的業務邏輯。

系統在進行數據錄入的時候，信息會同步錄入到form 變量，方便進行后期的數據處理，我們主要通過vue.js 的v-model實現數據的雙向綁定，具體的實現使用了Observer 中的Object.definePrototype()函數實現監聽數據，當數據變化時就通知訂閱者并執行綁定的更新函數，從而達到更新View 的目的。雙向綁定功能的代碼如圖5所示。

而系統的數據可視化采用了由vue.js 封裝的vue-schart 的圖表組件進行，使得采集到的數據在可視化時不繁瑣、邏輯不復雜。

核心技術采用MVVM 設計模式的意義在于：

（1）提升開發體驗，View 與邏輯層的分離大大提高開發效率。

（2）方便測試，測試ViewModel 的代碼即可驗證功能邏輯的正確與否。

（3）MVVM 模式搭配虛擬DOM 技術極大地減少了直接的DOM 操作。通過Diff 算法節省了操作DOM 所帶來的開銷。

5 結束語

本文基于MVVM 設計模式的vue.js 開發了實驗室資源管理系統，解決了實驗室開放管理中的查詢、預約申請等操作過程的復雜問題，充分體現了教育信息現代化在教學與科研中的作用，使得高校能夠充分利用實驗室資源，提高資源利用率及其管理效率，為實驗室資源的高效利用與管理奠定了便利基礎。