喻 晗，劉 威

（武漢大學 物理科學與技術(shù)學院，湖北 武漢 430072）

實驗室管理系統(tǒng)的設(shè)計與實現(xiàn)

喻 晗，劉 威

（武漢大學 物理科學與技術(shù)學院，湖北 武漢 430072）

根據(jù)目前實驗室資源需要合理分配與利用的需求，設(shè)計與實現(xiàn)了一種穩(wěn)定方便的多平臺實驗室管理系統(tǒng)。該系統(tǒng)采用Spring mvc作為服務(wù)端核心框架，利用MongoDB存儲購物實驗室的資源信息與人員信息，Web端頁面采用AngularJS將所有信息展現(xiàn)出來。同時為了滿足便攜式的需求，加入Android客戶端方便參與實驗室管理。最后，通過實際應(yīng)用證明了此系統(tǒng)的可行性與實用價值。

Spring mvc；AngularJS；MongoDB；Android；實驗室管理

隨著高等教育對學生的科研和實踐能力的要求不斷提高，作為大學教育中理論和實踐聯(lián)系的紐帶，高校實驗室得到越來越多的重視。 然而，目前高校實驗室的管理仍然存在著資源利用不合理，管理起來不方便等問題[1]。搭建一個智能化的實驗室管理系統(tǒng)對于一個高校實驗室顯得至關(guān)重要[2]。

文中主要基于Java語言設(shè)計一套集實驗室信息展示、資源預(yù)約、實驗指導(dǎo)和實驗留言等一系列功能的實驗室管理方案，并且同時支持Web端和Android客戶端操作，滿足多平臺的使用。

1 相關(guān)技術(shù)簡介

1.1MVC框架

MVC模式（Model-View-Controller）是一種經(jīng)典的軟件架構(gòu)模式。它主要通過分離模型（Model）、視圖（View）及控制器（Controller）在應(yīng)用程序中的角色從而將業(yè)務(wù)邏輯從界面中解耦[3]。其中，模型負責封裝應(yīng)用程序數(shù)據(jù)。視圖僅僅負責與用戶交互，展示模型數(shù)據(jù)，不包含任何業(yè)務(wù)邏輯。控制器作為前兩者的聯(lián)系紐帶，主要負責接收用戶的請求，通過調(diào)用后臺服務(wù)來完成相應(yīng)的業(yè)務(wù)邏輯，可能還會返回一些數(shù)據(jù)在視圖層展示[4]。

1.2 AngularJS框架

AngularJS是 Google設(shè)計和開發(fā)的開源前端JavaScript框架，旨在克服HTML在構(gòu)建應(yīng)用上的不足[5]，通過使用特殊的標簽來配合它完成了一系列兼容性良好并且可擴展的服務(wù)，包括數(shù)據(jù)綁定、DOM操作、MVC設(shè)計模式和模塊加載等[6]。

1.3 MongoDB數(shù)據(jù)庫

MongoDB（來自于英文單詞“Humongous”，中文含義為“龐大”）是介于RDBMS和NoSQL之間的“集合型”數(shù)據(jù)庫，支持的數(shù)據(jù)結(jié)構(gòu)松散自由，可以存儲較復(fù)雜的數(shù)據(jù)類型[7]，可應(yīng)用于各種規(guī)模的企業(yè)的應(yīng)用程序[8]。

1.4 Android 平臺

Android是一種基于Linux的自由及開放源代碼的操作系統(tǒng)，主要使用于移動設(shè)備[9]。Android最大的優(yōu)勢之一就是其開放性，吸引著大量的開發(fā)者，同時Android平臺提供了十分寬泛、自由的開發(fā)環(huán)境。豐富的軟件應(yīng)用使得Android系統(tǒng)在移動端擁有相當大的市場占有率[10]。

2 系統(tǒng)設(shè)計

系統(tǒng)總體框架：系統(tǒng)主要分為3個部分，分別是服務(wù)器、數(shù)據(jù)庫和客戶端 （包括Web客戶端和Android客戶端）?？蛻舳讼蚍?wù)器發(fā)出HTTP請求，服務(wù)器調(diào)用業(yè)務(wù)邏輯從數(shù)據(jù)庫中取出數(shù)據(jù)，然后根據(jù)不同請求做出相應(yīng)的響應(yīng)。系統(tǒng)整體框架如圖1所示。

圖1 系統(tǒng)框架圖

整個系統(tǒng)是基于用戶請求的框架。如圖2所示，當用戶通過Web瀏覽器輸入網(wǎng)址發(fā)出請求時，前端控制器通過正確路由，委托請求給相應(yīng)的處理器。處理器會從數(shù)據(jù)庫中調(diào)用業(yè)務(wù)對象，從而獲得數(shù)據(jù)模型，然后將數(shù)據(jù)與視圖一并返回前端控制器。此時前端控制器將數(shù)據(jù)和視圖交于AngularJS綁定，綁定之后獲得的頁面就呈現(xiàn)給用戶。這就是一個完整的Web客戶端與服務(wù)器的交互過程[11]。

當Android客戶端向服務(wù)器發(fā)出請求時，類似與圖2流程，只是Android客戶端請求的是服務(wù)器提供的API（Application Programming Interface，應(yīng)用程序編程接口），服務(wù)器將數(shù)據(jù)從數(shù)據(jù)庫中取出，不用將數(shù)據(jù)與視圖綁定，直接將數(shù)據(jù)作為響應(yīng)交給Android客戶端，Android客戶端再將數(shù)據(jù)呈現(xiàn)在手機界面上。

圖2 Web客戶端與服務(wù)器交互流程

3 系統(tǒng)實現(xiàn)

系統(tǒng)的具體實現(xiàn)也可以從3個部分實現(xiàn)，下面分別講述3個部分的實現(xiàn)的關(guān)鍵點。

3.1 服務(wù)器的實現(xiàn)

服務(wù)器的核心框架選用Spring MVC框架，因此它的關(guān)鍵點就在與Spring MVC框架的配置[12]。

3.1.1 DispatcherServlet配置

Spring MVC框架中的DispatcherServlet是一個Java Servlet，可以將用戶的HTTP請求委派到對應(yīng)的處理程序，實現(xiàn)的具體配置如下：

3.1.2 ViewResolver配置

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

上述代碼表示將使用JSP視圖，且JSP存放路徑為 “/WEB_INF/jsp”。在控制器中使用代碼段return “viewname”，會在ViewResolver的作用下將viewname.jsp視圖作為響應(yīng)返還給用戶。

3.1.3 響應(yīng)Web客戶端請求

@Controller注解表示將此類標注成控制器類，再配合@RequestMapping注解對請求進一步分流，通過ViewResolver解析之后返回給請求端。如下代碼實現(xiàn)對 “/home”訪問路徑的請求返回home.jsp頁面。

3.1.4 響應(yīng)Android客戶端請求

服務(wù)端想要提供API接口給Android客戶端時，可以使用@ResponseBody注解使得響應(yīng)直接返回JSON或者其他數(shù)據(jù)格式，如下代碼實現(xiàn)將數(shù)據(jù)庫中取出的實驗室儀器數(shù)據(jù)直接作為響應(yīng)數(shù)據(jù)。

3.2 數(shù)據(jù)庫實現(xiàn)

MongoDB支持復(fù)雜的數(shù)據(jù)類型，比如JSON格式。MongoDB可以很方便的將JSON數(shù)據(jù)插入數(shù)據(jù)庫，具體的實現(xiàn)代碼如下：

以上代碼可以將包含商品信息staff.json文件插入laboratory數(shù)據(jù)庫中的staffs集合中。

同時，想要從MongoDB中讀取數(shù)據(jù)也很簡單。mongo-java-driver.jar包提供了相應(yīng)的API函數(shù)[13]：

MongoCollection.find（eq（"name"，staffname））

上述代碼實現(xiàn)了查找姓名是staffname的人員信息，并將查找結(jié)果以JSON形式返回。

3.3 Web 客戶端實現(xiàn)

Web客戶端主要采用AngularJS來實現(xiàn)雙向綁定，簡單來說，就是從界面的操作能實時反映到數(shù)據(jù)，數(shù)據(jù)的變更能實時展現(xiàn)到界面[14]。下面代碼就是實現(xiàn)將數(shù)據(jù)庫中取出的數(shù)據(jù)與頁面p標簽元素綁定：

＜p ng-bind=”instruction”＞＜/p＞

在p標簽所在的controller內(nèi)進行模型與界面的雙向綁定

$scope.instruction=dataFromMongoDB；

除此之外，AngularJS還可以很輕松的實現(xiàn)JSONArray的遍歷，將遍歷結(jié)果顯示在頁面上，具體實現(xiàn)代碼如下

上述代碼實現(xiàn)了將instruments遍歷，顯示出每個儀器的名稱和預(yù)覽照片。

3.4 Android 客戶端實現(xiàn)

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

上述代碼表示以GET方式向指定服務(wù)器url發(fā)出請求，其中l(wèi)istener和errorListener分別可以監(jiān)聽請求成功和請求失敗的響應(yīng)。

接下來將此請求添加到請求隊列中，然后調(diào)用start（）方法執(zhí)行該請求。

然后將從服務(wù)器獲得的JSON數(shù)據(jù)解析之后顯示在Android客戶端的界面上，從而達到實驗室資源信息的展示。

同時Volley還提供了ImageRequest請求[16]，將圖片響應(yīng)請求按上述流程加入隊列然后start即可實現(xiàn)圖片的網(wǎng)絡(luò)加載。

另外，將Request.method改成POST即可實現(xiàn)客戶端POST請求，重寫getParams（）方法可以在POST請求中添加請求參數(shù)。

4 系統(tǒng)應(yīng)用展示

系統(tǒng)的Android客戶端[17-18]的主要應(yīng)用界面如圖3所示，圖中分別展示了信息展示、資源預(yù)約、實驗指導(dǎo)和實驗留言4個場景（分別對應(yīng)于圖中左上、右上、左下和右下）。

圖3 Android客戶端界面

5 結(jié)束語

文中通過對目前實驗室管理系統(tǒng)的分析，結(jié)合現(xiàn)有的框架知識，設(shè)計和實現(xiàn)了一種智能化多平臺的實驗室管理系統(tǒng)。系統(tǒng)框架分離業(yè)務(wù)邏輯和界面顯示，降低耦合度，便于系統(tǒng)的后期維護和功能擴展。存儲數(shù)據(jù)采用高性能數(shù)據(jù)庫，易于存儲大量的實驗數(shù)據(jù)。同時為了適應(yīng)移動互聯(lián)網(wǎng)的趨勢，增加手機移動端。并且通過具體使用展示了此系統(tǒng)的實用價值。今后將進一步關(guān)注整個系統(tǒng)的運行效率，優(yōu)化系統(tǒng)性能，提高用戶體驗，增加系統(tǒng)的安全性。

[1]周勇，李榮華，陳華，等.信息技術(shù)環(huán)境下地方高校實驗室管理研究[J].時代教育，2016（1）:35.

[2]李艷華．提高遠程實驗教學質(zhì)量的探索[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研究與應(yīng)用[J].合肥工業(yè)大學學報:自然科學版，2012，35（3）:337-340.

[5]董英茹.簡談 AngularJS在下一代 Web開發(fā)中的應(yīng)用[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數(shù)據(jù)庫下文件型數(shù)據(jù)存儲研究[J].軟件，2015，36（11）:12-14.

[9]卓煒.基于Android操作系統(tǒng)的軟件開發(fā)及應(yīng)用的探討[J].電子技術(shù)與軟件工程，2013（23）:104-104.

[10]劉仙艷.移動終端開放平臺—Android[J].信息通信技術(shù)，2011，4:40-50.

[11]舒禮蓮.基于 SpringMVC的 Web應(yīng)用開發(fā)[J].計算機與現(xiàn)代化，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網(wǎng)絡(luò)通信框架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的智能家居系統(tǒng)設(shè)計[J].西安工程大學學報，2015（4）：442-446.

[18]毛德明，張軒雄.基于ZigBee與Android技術(shù)的智能網(wǎng)關(guān)設(shè)計[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—)，男，湖北武漢人，碩士研究生。研究方向：計算機軟件。