喻 晗，劉 威

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

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

喻 晗，劉 威

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

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

Spring mvc；AngularJS；MongoDB；Android；實(shí)驗(yàn)室管理

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

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

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

1.1MVC框架

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

1.2 AngularJS框架

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

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

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

1.4 Android 平臺(tái)

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

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

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

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

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

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

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

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

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

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

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

3.1.1 DispatcherServlet配置

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

3.1.2 ViewResolver配置

ViewResolver即視圖解析器。針對(duì)Web客戶端的請(qǐng)求，它會(huì)將邏輯視圖ModelAndView解析成真正的視圖View對(duì)象。

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

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

@Controller注解表示將此類標(biāo)注成控制器類，再配合@RequestMapping注解對(duì)請(qǐng)求進(jìn)一步分流，通過(guò)ViewResolver解析之后返回給請(qǐng)求端。如下代碼實(shí)現(xiàn)對(duì) “/home”訪問(wèn)路徑的請(qǐng)求返回home.jsp頁(yè)面。

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

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

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

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

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

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

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

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

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

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

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

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

$scope.instruction=dataFromMongoDB；

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

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

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

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

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

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

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

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

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

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

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

圖3 Android客戶端界面

5 結(jié)束語(yǔ)

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

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

[2]李艷華．提高遠(yuǎn)程實(shí)驗(yàn)教學(xué)質(zhì)量的探索[J]．高校實(shí)驗(yàn)室工作研究，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]薛峰，梁鋒，徐書(shū)勛，等.基于Spring MVC框架的Web研究與應(yīng)用[J].合肥工業(yè)大學(xué)學(xué)報(bào):自然科學(xué)版，2012，35（3）:337-340.

[5]董英茹.簡(jiǎn)談 AngularJS在下一代 Web開(kāi)發(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]謝華成，馬學(xué)文.MongoDB數(shù)據(jù)庫(kù)下文件型數(shù)據(jù)存儲(chǔ)研究[J].軟件，2015，36（11）:12-14.

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

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

[11]舒禮蓮.基于 SpringMVC的 Web應(yīng)用開(kāi)發(fā)[J].計(jì)算機(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]孟遠(yuǎn).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ì)[J].西安工程大學(xué)學(xué)報(bào)，2015（4）：442-446.

[18]毛德明，張軒雄.基于ZigBee與Android技術(shù)的智能網(wǎng)關(guān)設(shè)計(jì)[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稿件編號(hào)：201604191

國(guó)家自然科學(xué)基金（81272443）；國(guó)家自然科學(xué)國(guó)家重點(diǎn)項(xiàng)目（51132001）

喻 晗(1992—)，男，湖北武漢人，碩士研究生。研究方向：計(jì)算機(jī)軟件。