吳偉娜 于北瑜 孫會強(qiáng) 周會會
(廣東海洋大學(xué)數(shù)學(xué)與計算機(jī)學(xué)院 廣東省湛江市 524088)
隨著高校培養(yǎng)人才對實踐動手能力和創(chuàng)新能力的不斷提高[1-2],理工科和文科的很多課程都在不斷增設(shè)課程的實驗項目或者實驗課程,實驗室成為高校教師和學(xué)生越來越重要的教學(xué)活動場所,很多高校也不斷加大對實驗室建設(shè)的財力投入,硬件設(shè)施得到了很大的改善。實驗室在提高高校教師的科研能力方面,以及提高學(xué)生的實踐動手能力和創(chuàng)新開發(fā)能力等方面具有重要作用,是重要的科研與學(xué)習(xí)空間、實驗教學(xué)與人才培養(yǎng)基地。然而,有些高校的實驗室管理比較分散,從而造成一定的資源浪費[3-4],大多數(shù)實驗室基本上都是有課的時候?qū)W生才可以進(jìn)入實驗室,尤其是辦學(xué)層次比較低的一些高校,實驗室的規(guī)模與管理水平、使用效果反映了高校的辦學(xué)水平。因此,為了充分利用實驗室資源,提高資源利用率及其管理效率,各高校對實驗室資源管理提出了越來越高的要求,實驗室資源管理也因而成為當(dāng)前高校實驗室工作的重要任務(wù)之一,各高校也在不斷投入財力提高管理效率[5-9]。本文針對廣東海洋大學(xué)計算機(jī)實驗室的管理開發(fā)設(shè)計了一個信息管理平臺,用于平時的教學(xué)活動安排和實驗室資源占用情況查詢,強(qiáng)化實驗室對師生的服務(wù)功能,從而使得實驗室資源的利用達(dá)到最大化。
系統(tǒng)的用戶分為資源管理和資源查詢與申請需求,前者為管理員,系統(tǒng)的權(quán)限大,對后者的基本情況進(jìn)行核實,對實驗室資源的配置情況及其使用情況、預(yù)約情況進(jìn)行統(tǒng)一運籌和管理,可以在系統(tǒng)發(fā)布一些實驗室申請使用的公告,也可以對各種信息增添刪除或者修改等操作。后者為師生用戶,除了可以修改設(shè)置個人的密碼等信息之外,主要有實驗室資源占用情況(上課、待定)的查詢以及實驗室資源的預(yù)約申請,查看公告等。
開發(fā)設(shè)計實驗室管理系統(tǒng)的主要目的是發(fā)揮教育信息技術(shù)在教學(xué)資源管理中的作用,方便老師和學(xué)生在日常教學(xué)活動中對實驗室的使用進(jìn)行線上查詢和預(yù)約。
圖1 是本系統(tǒng)的登陸界面,登陸用戶名為administrator 和u123456 或u654321 兩種類型(123456 和654321 分別表示教工號和學(xué)號)。系統(tǒng)根據(jù)登陸賬號的特點將自動判斷和識別用戶類型,從而區(qū)分登陸用戶具有管理權(quán)限還是使用權(quán)限。系統(tǒng)建立了基于MVVM 設(shè)計模式的數(shù)據(jù)庫,包含實驗室占用、待定、空閑情況以及配置信息、用戶信息情況等信息。
圖1:系統(tǒng)的登陸界面
圖2:系統(tǒng)信息展示
圖3:資源信息的可視化結(jié)果
系統(tǒng)為登陸用戶提供了實驗室查詢功能,登陸時依據(jù)登陸查賬識別登陸賬號的身份類別以后迅速提供相應(yīng)的查詢功能,方便用戶快速找到可用的實驗室及其所屬的區(qū)域或教學(xué)實驗樓。信息展示頁面如圖2所示。
為了提高實驗室資源的利用率和高效管理,本資源管理系統(tǒng)為用戶建立了空閑實驗室在線預(yù)約申請的功能。
申請時,用戶首先登錄系統(tǒng)查詢實驗室的配置情況以及在自己欲申請的時間段是否處于空閑狀態(tài)或待定狀態(tài),如果不是空閑或待定狀態(tài)的實驗室則不能進(jìn)入預(yù)約界面,同時系統(tǒng)會優(yōu)先推薦空閑狀態(tài)的實驗室。預(yù)約時,選中自己想要的實驗室,并且填寫申請使用的理由、具體的時間段、申請人的聯(lián)系信息及其所在的學(xué)院和班級等信息。
圖4:MVVM 示意圖
圖5:雙向綁定的代碼
為了方便老師和學(xué)生更快的申請到自己需要的實驗室,系統(tǒng)增添了各樓宇實驗室占用情況的可視化模塊,有的占用率高有的占用率低,申請預(yù)約的用戶可以首先選擇占用率低的區(qū)域找是否有符合自己配置要求的實驗室,然后申請,從而提高用戶申請預(yù)約的效率。實驗室資源的可視化結(jié)果如圖3所示。
系統(tǒng)的統(tǒng)籌管理只屬于管理員,普通用戶只有使用權(quán)而沒有管理權(quán),從而確保系統(tǒng)的安全性。
本系統(tǒng)是根據(jù)登陸時的賬戶自動識別用戶類型從而確定對應(yīng)的權(quán)限,如果識別到管理員登陸,則界面上可對實驗室資源的占用情況、預(yù)約情況和空閑情況以及其他用戶信息進(jìn)行查詢和添加、修改、刪除等操作,如果遇到某種緊急情況須要使用某個實驗室,但是該實驗室又已經(jīng)被預(yù)約的情況下,管理員可刪除該預(yù)約同時向申請人發(fā)送相關(guān)信息,提醒申請人重新進(jìn)行預(yù)約,最終達(dá)到管理實驗室資源系統(tǒng)的目的。
本文的資源管理系統(tǒng)采用MVVM(Model-View-ViewModel)設(shè)計模式的vue.js 進(jìn)行開發(fā),可以大大地減少對DOM(Document Object Model)的操作,框架替我們做了大部分的工作,從而專注于數(shù)據(jù)驅(qū)動的方式進(jìn)行開發(fā),提升可讀性以及可復(fù)用性。MVVM 設(shè)計模式的ViewModel 可以理解為數(shù)據(jù)處理層,View 層發(fā)生變化的時候會直接影響到ViewModel 層的變化,同時,ViewModel 層得到的變化也會明顯影響到View 層的效果[10],這個變化關(guān)系稱之為雙向綁定,如圖4所示。
其中,系統(tǒng)的View 層主要是用于呈現(xiàn)給用戶,用戶在這里進(jìn)行交互。View 中應(yīng)盡量減少邏輯,只存在簡單的條件,避免耦合過多的邏輯,從而導(dǎo)致系統(tǒng)后期維護(hù)困難。其獨立于Model 層的變化與改變。通常細(xì)分下來就是HTML+CSS 層。ViewModel 是控制層,是View 層與Model 層的橋梁,Model 層或View 層發(fā)生的更改需要ViewModel 來通訊,這一部分的操作具體由vue.js 實現(xiàn)MVVM 雙向綁定。Model 層負(fù)責(zé)主要的業(yè)務(wù)邏輯。
系統(tǒng)在進(jìn)行數(shù)據(jù)錄入的時候,信息會同步錄入到form 變量,方便進(jìn)行后期的數(shù)據(jù)處理,我們主要通過vue.js 的v-model實現(xiàn)數(shù)據(jù)的雙向綁定,具體的實現(xiàn)使用了Observer 中的Object.definePrototype()函數(shù)實現(xiàn)監(jiān)聽數(shù)據(jù),當(dāng)數(shù)據(jù)變化時就通知訂閱者并執(zhí)行綁定的更新函數(shù),從而達(dá)到更新View 的目的。雙向綁定功能的代碼如圖5所示。
而系統(tǒng)的數(shù)據(jù)可視化采用了由vue.js 封裝的vue-schart 的圖表組件進(jìn)行,使得采集到的數(shù)據(jù)在可視化時不繁瑣、邏輯不復(fù)雜。
核心技術(shù)采用MVVM 設(shè)計模式的意義在于:
(1)提升開發(fā)體驗,View 與邏輯層的分離大大提高開發(fā)效率。
(2)方便測試,測試ViewModel 的代碼即可驗證功能邏輯的正確與否。
(3)MVVM 模式搭配虛擬DOM 技術(shù)極大地減少了直接的DOM 操作。通過Diff 算法節(jié)省了操作DOM 所帶來的開銷。
本文基于MVVM 設(shè)計模式的vue.js 開發(fā)了實驗室資源管理系統(tǒng),解決了實驗室開放管理中的查詢、預(yù)約申請等操作過程的復(fù)雜問題,充分體現(xiàn)了教育信息現(xiàn)代化在教學(xué)與科研中的作用,使得高校能夠充分利用實驗室資源,提高資源利用率及其管理效率,為實驗室資源的高效利用與管理奠定了便利基礎(chǔ)。