喻 晗,劉 威
(武漢大學 物理科學與技術學院,湖北 武漢 430072)
實驗室管理系統的設計與實現
喻 晗,劉 威
(武漢大學 物理科學與技術學院,湖北 武漢 430072)
根據目前實驗室資源需要合理分配與利用的需求,設計與實現了一種穩定方便的多平臺實驗室管理系統。該系統采用Spring mvc作為服務端核心框架,利用MongoDB存儲購物實驗室的資源信息與人員信息,Web端頁面采用AngularJS將所有信息展現出來。同時為了滿足便攜式的需求,加入Android客戶端方便參與實驗室管理。最后,通過實際應用證明了此系統的可行性與實用價值。
Spring mvc;AngularJS;MongoDB;Android;實驗室管理
隨著高等教育對學生的科研和實踐能力的要求不斷提高,作為大學教育中理論和實踐聯系的紐帶,高校實驗室得到越來越多的重視。 然而,目前高校實驗室的管理仍然存在著資源利用不合理,管理起來不方便等問題[1]。搭建一個智能化的實驗室管理系統對于一個高校實驗室顯得至關重要[2]。
文中主要基于Java語言設計一套集實驗室信息展示、資源預約、實驗指導和實驗留言等一系列功能的實驗室管理方案,并且同時支持Web端和Android客戶端操作,滿足多平臺的使用。
1.1MVC框架
MVC模式(Model-View-Controller)是一種經典的軟件架構模式。它主要通過分離模型(Model)、視圖(View)及控制器(Controller)在應用程序中的角色從而將業務邏輯從界面中解耦[3]。其中,模型負責封裝應用程序數據。視圖僅僅負責與用戶交互,展示模型數據,不包含任何業務邏輯。控制器作為前兩者的聯系紐帶,主要負責接收用戶的請求,通過調用后臺服務來完成相應的業務邏輯,可能還會返回一些數據在視圖層展示[4]。
1.2 AngularJS框架
AngularJS是 Google設計和開發的開源前端JavaScript框架,旨在克服HTML在構建應用上的不足[5],通過使用特殊的標簽來配合它完成了一系列兼容性良好并且可擴展的服務,包括數據綁定、DOM操作、MVC設計模式和模塊加載等[6]。
1.3 MongoDB數據庫
MongoDB(來自于英文單詞“Humongous”,中文含義為“龐大”)是介于RDBMS和NoSQL之間的“集合型”數據庫,支持的數據結構松散自由,可以存儲較復雜的數據類型[7],可應用于各種規模的企業的應用程序[8]。
1.4 Android 平臺
Android是一種基于Linux的自由及開放源代碼的操作系統,主要使用于移動設備[9]。Android最大的優勢之一就是其開放性,吸引著大量的開發者,同時Android平臺提供了十分寬泛、自由的開發環境。豐富的軟件應用使得Android系統在移動端擁有相當大的市場占有率[10]。
系統總體框架:系統主要分為3個部分,分別是服務器、數據庫和客戶端 (包括Web客戶端和Android客戶端)。客戶端向服務器發出HTTP請求,服務器調用業務邏輯從數據庫中取出數據,然后根據不同請求做出相應的響應。系統整體框架如圖1所示。

圖1 系統框架圖
整個系統是基于用戶請求的框架。如圖2所示,當用戶通過Web瀏覽器輸入網址發出請求時,前端控制器通過正確路由,委托請求給相應的處理器。處理器會從數據庫中調用業務對象,從而獲得數據模型,然后將數據與視圖一并返回前端控制器。此時前端控制器將數據和視圖交于AngularJS綁定,綁定之后獲得的頁面就呈現給用戶。這就是一個完整的Web客戶端與服務器的交互過程[11]。
當Android客戶端向服務器發出請求時,類似與圖2流程,只是Android客戶端請求的是服務器提供的API(Application Programming Interface,應用程序編程接口),服務器將數據從數據庫中取出,不用將數據與視圖綁定,直接將數據作為響應交給Android客戶端,Android客戶端再將數據呈現在手機界面上。

圖2 Web客戶端與服務器交互流程
系統的具體實現也可以從3個部分實現,下面分別講述3個部分的實現的關鍵點。
3.1 服務器的實現
服務器的核心框架選用Spring MVC框架,因此它的關鍵點就在與Spring MVC框架的配置[12]。
3.1.1 DispatcherServlet配置
Spring MVC框架中的DispatcherServlet是一個Java Servlet,可以將用戶的HTTP請求委派到對應的處理程序,實現的具體配置如下:

3.1.2 ViewResolver配置
ViewResolver即視圖解析器。針對Web客戶端的請求,它會將邏輯視圖ModelAndView解析成真正的視圖View對象。


上述代碼表示將使用JSP視圖,且JSP存放路徑為 “/WEB_INF/jsp”。在控制器中使用代碼段return “viewname”,會在ViewResolver的作用下將viewname.jsp視圖作為響應返還給用戶。
3.1.3 響應Web客戶端請求
@Controller注解表示將此類標注成控制器類,再配合@RequestMapping注解對請求進一步分流,通過ViewResolver解析之后返回給請求端。如下代碼實現對 “/home”訪問路徑的請求返回home.jsp頁面。

3.1.4 響應Android客戶端請求
服務端想要提供API接口給Android客戶端時,可以使用@ResponseBody注解使得響應直接返回JSON或者其他數據格式,如下代碼實現將數據庫中取出的實驗室儀器數據直接作為響應數據。

3.2 數據庫實現
MongoDB支持復雜的數據類型,比如JSON格式。MongoDB可以很方便的將JSON數據插入數據庫,具體的實現代碼如下:

以上代碼可以將包含商品信息staff.json文件插入laboratory數據庫中的staffs集合中。
同時,想要從MongoDB中讀取數據也很簡單。mongo-java-driver.jar包提供了相應的API函數[13]:
MongoCollection.find(eq("name",staffname))
上述代碼實現了查找姓名是staffname的人員信息,并將查找結果以JSON形式返回。
3.3 Web 客戶端實現
Web客戶端主要采用AngularJS來實現雙向綁定,簡單來說,就是從界面的操作能實時反映到數據,數據的變更能實時展現到界面[14]。下面代碼就是實現將數據庫中取出的數據與頁面p標簽元素綁定:
<p ng-bind=”instruction”></p>
在p標簽所在的controller內進行模型與界面的雙向綁定
$scope.instruction=dataFromMongoDB;
除此之外,AngularJS還可以很輕松的實現JSONArray的遍歷,將遍歷結果顯示在頁面上,具體實現代碼如下

上述代碼實現了將instruments遍歷,顯示出每個儀器的名稱和預覽照片。
3.4 Android 客戶端實現

Android與服務器通信主要采用Google研發的Volley[15]網絡通信框架。上述代碼獲得的RequestQueue是一個請求隊列對象,可以緩存多個HTTP請求,然后按照一定的算法并發的發出請求。接下來創建一個JsonObject Request向服務器提出一個請求。

上述代碼表示以GET方式向指定服務器url發出請求,其中listener和errorListener分別可以監聽請求成功和請求失敗的響應。
接下來將此請求添加到請求隊列中,然后調用start()方法執行該請求。

然后將從服務器獲得的JSON數據解析之后顯示在Android客戶端的界面上,從而達到實驗室資源信息的展示。
同時Volley還提供了ImageRequest請求[16],將圖片響應請求按上述流程加入隊列然后start即可實現圖片的網絡加載。
另外,將Request.method改成POST即可實現客戶端POST請求,重寫getParams()方法可以在POST請求中添加請求參數。
系統的Android客戶端[17-18]的主要應用界面如圖3所示,圖中分別展示了信息展示、資源預約、實驗指導和實驗留言4個場景(分別對應于圖中左上、右上、左下和右下)。

圖3 Android客戶端界面
文中通過對目前實驗室管理系統的分析,結合現有的框架知識,設計和實現了一種智能化多平臺的實驗室管理系統。系統框架分離業務邏輯和界面顯示,降低耦合度,便于系統的后期維護和功能擴展。存儲數據采用高性能數據庫,易于存儲大量的實驗數據。同時為了適應移動互聯網的趨勢,增加手機移動端。并且通過具體使用展示了此系統的實用價值。今后將進一步關注整個系統的運行效率,優化系統性能,提高用戶體驗,增加系統的安全性。
[1]周勇,李榮華,陳華,等.信息技術環境下地方高校實驗室管理研究[J].時代教育,2016(1):35.
[2]李艷華.提高遠程實驗教學質量的探索[J].高校實驗室工作研究,2013(2):102-103.
[3]Gupta P,Bari P,Govil M C.Spring Web MVC Framework for rapid open source J2EE application development:a case study[J].Interface,2010,2(6):1684-1689.
[4]薛峰,梁鋒,徐書勛,等.基于Spring MVC框架的Web研究與應用[J].合肥工業大學學報:自然科學版,2012,35(3):337-340.
[5]董英茹.簡談 AngularJS在下一代 Web開發中的應用[J].軟件工程師,2015(5):30-31.
[6]Green B,Seshadri S.AngularJS [M].O'Reilly Media,Inc.,2013.
[7]LiuY, WangY,JinY.Research onthe improvement of MongoDB Auto-Sharding in cloud environment[C]//Computer Science&Education(ICCSE),2012 7th International Con-ference on. IEEE,2012:851-854.
[8]謝華成,馬學文.MongoDB數據庫下文件型數據存儲研究[J].軟件,2015,36(11):12-14.
[9]卓煒.基于Android操作系統的軟件開發及應用的探討[J].電子技術與軟件工程,2013(23):104-104.
[10]劉仙艷.移動終端開放平臺—Android[J].信息通信技術,2011,4:40-50.
[11]舒禮蓮.基于 SpringMVC的 Web應用開發[J].計算機與現代化,2013(11):167-168.
[12]Cosmina I.Spring MVC[M].Pivotal Certified Spring Web Application Developer Exam.Apress,2015: 53-150.
[13]Vohra D.Using a Java Client with MongoDB[M]// Pro Mon-goDB Development.Apress,2015:1-37.
[14]Chaniotis I K,Kyriakou K I D,Tselikas N D. Proximity:A Real-Time,Location Aware Social Web Application Builtwith Node.js and AngularJS[M]//Mobile Web Information Systems. Springer Berlin Heidelberg,2013:292-295.
[15]孟遠.Android網絡通信框架Volley的解析和比較[J].軟件,2014(12):66-68.
[16]Shulin Y, Jieping H. Research and implementation ofWeb Servicesin Android network communication framework Volley[C]// Service Systems and Service Management(ICSSSM),2014 11th International Conference on.IEEE,2014:1-3.
[17]宋玉琴,姬引飛,段俊瑞,等.基于Android和ZigBee的智能家居系統設計[J].西安工程大學學報,2015(4):442-446.
[18]毛德明,張軒雄.基于ZigBee與Android技術的智能網關設計[J].電子科技,2016(10):118-121.
Design and implementation of laboratory management system
YU Han,LIU Wei
(School of Physics and Technology,Wuhan University,Wuhan 430072,China)
According to the actual needs of distributing and using the resources in laboratory more reasonably,a robust and convenient multi-platform laboratory management system was designed and implemented.This system uses Spring mvc as the core framework in the server-side,and stores information of resources and staffs in the MongoDB database,then shows the data in the web client via AngularJS.Meanwhile,in order to meet the needs of portable,Android client can also participate in laboratory management easily.Finally,The practical application proved the feasibility and value in use of this system.
Spring mvc;AngularJS;MongoDB;Android;laboratory management
TN919
:A
:1674-6236(2017)01-0001-05
2016-04-19稿件編號:201604191
國家自然科學基金(81272443);國家自然科學國家重點項目(51132001)
喻 晗(1992—),男,湖北武漢人,碩士研究生。研究方向:計算機軟件。