苗潔

摘要：根據(jù)實驗室信息管理的特點，通過使用Jquery前臺開發(fā)技術(shù)EasyUI與Spring MVC框架進(jìn)行整合設(shè)計一個實驗室信息管理平臺，并且以實驗室管理平臺的權(quán)限管理系統(tǒng)為切入點，對系統(tǒng)運用的EasyUI技術(shù)和Spring MVC框架進(jìn)行分析，在系統(tǒng)分析設(shè)計中展示EasyUI多級動態(tài)樹結(jié)構(gòu)如何在權(quán)限管理系統(tǒng)中應(yīng)用，并且實現(xiàn)Ajax異步技術(shù)動態(tài)加載樹節(jié)點的功能，同時提高了權(quán)限系統(tǒng)的靈活性。

關(guān)鍵詞：EasyUI；Spring MVC；權(quán)限管理；動態(tài)加載樹

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2015）15-0053-03

隨著質(zhì)譜實驗室管理內(nèi)容的信息化、智能化推進(jìn)，將產(chǎn)生極大的信息量，然而對這些信息進(jìn)行有效的分析與管理，無論是從信息的數(shù)量還是類別上，都將是十分困難的。因此根據(jù)實驗室需求設(shè)計出來的質(zhì)譜實驗室信息管理平臺將滿足不斷增加的服務(wù)以及管理需求。質(zhì)譜實驗室信息管理平臺中的設(shè)計重點就是系統(tǒng)權(quán)限管理，系統(tǒng)權(quán)限管理主要涉及質(zhì)譜實驗室信息管理平臺所有功能模塊，對用戶權(quán)限、角色、級別、部門進(jìn)行動態(tài)管理。因此，權(quán)限管理系統(tǒng)已成為質(zhì)譜實驗室信息管理平臺中不可或缺的環(huán)節(jié)以及重要組成部分。

對于傳統(tǒng)的HTML而言，要自己實現(xiàn)動態(tài)樹形菜單，編程人員將編寫大量的JavaScript特別是對于基于Ajax異步加載的樹的實現(xiàn)，不但涉及Ajax數(shù)據(jù)加載及處理技術(shù)，還需要考慮跨瀏覽器支持等，處理起來特別麻煩，這對于編程人員而言無疑是十分困難的。EasyUI中提供了現(xiàn)存的樹組件，通過這些組件可以在B/S應(yīng)用中快速開發(fā)出包含樹結(jié)構(gòu)信息的應(yīng)用。本文主要結(jié)合EasyUI樹的優(yōu)點，并通過后臺Spring MVC架構(gòu)設(shè)計實現(xiàn)了全動態(tài)的權(quán)限管理。

1 系統(tǒng)關(guān)鍵技術(shù)

1.1 EasyUI框架

jQuery EasyUI是基于JQuery開發(fā)的一組插件集合，它在對Ajax接口做了相關(guān)優(yōu)化的同時，也為Web開發(fā)提供了accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等UI組件。它是一種輕量級的跨瀏覽器的JavaScript框架，對于開發(fā)者而言，不需要寫過多的JavaScript代碼，甚至你可以不懂CSS樣式，只需要使用一些簡單的HTML標(biāo)簽就可以輕松的開發(fā)出布局合理、功能強(qiáng)大、清晰漂亮的頁面。開發(fā)者使用EasyUI后只需要專注于后臺代碼的實現(xiàn)，而無需擔(dān)心前臺頁面。EasyUI有以下特點：

① EasyUI相對于ExtJS等框架而言，體積更小，操作更為簡單，開發(fā)人員更容易掌握[4]。

② Jquery EasyUI框架支持HTML5。隨著web開發(fā)的迅猛發(fā)展，HTML5會慢慢融入到廣大的web應(yīng)用中，該框架能對HTM15很好的支持使得其在日漸激烈的競爭中不至于被淘汰[1]。

③ 跨瀏覽器的Ajax解決方式，支持的瀏覽器包括IE6.0以上，F(xiàn)ixfox，360瀏覽器、Opera9.0以上等。

1.2 Spring MVC框架

Spring MVC框架是一款屬于SpringFrameWork的后續(xù)產(chǎn)品，已經(jīng)融合在Spring Web Flow里面。Spring 框架提供了構(gòu)建 Web 應(yīng)用程序的全功能 MVC 模塊。Spring的MVC模塊非常強(qiáng)大，絕不遜色于其他專業(yè)的Web框架，如Struts、WebWork。Spring的web框架是一個請求驅(qū)動的web框架，核心是基于分發(fā)器（DispatchServlet）設(shè)計的[2] 。Spring MVC框架為模型視圖控制器之間提供了一個非常清晰的劃分各部分耦合性極低[6]，Web服務(wù)器使用DispatchServlet將不同的請求通過HandlerMapping映射到其相應(yīng)的控制器（Controller），控制器接收到request和response參數(shù)返回到ModelAndView實例。Spring MVC的結(jié)構(gòu)圖如圖1所示。

1.2.1前端控制器（DispatcherServlet）

前端控制器是第一個響應(yīng)請求的地方，它利用一個HandlerMapping確定由哪個控制器來處理請求。它根據(jù)用戶的請求將其轉(zhuǎn)發(fā)給特定的控制器。然后由該控制器負(fù)責(zé)處理具體的請求并返回模型和視圖對象，分發(fā)器再對模型和視圖進(jìn)行解析[3]。其中HandlerMapping的實現(xiàn)有多種類型，提供了一種比較靈活的方式如何把請求映射成URL地址。

1.2.2 控制器（Controller）

控制器。是Spring MVC框架的最核心的部分，它是處理瀏覽器請求與服務(wù)器終端之間的媒介，承擔(dān)著Web業(yè)務(wù)邏輯處理的組件，其再調(diào)用具體的業(yè)務(wù)Service完成相應(yīng)的邏輯請求?？刂破魍ㄟ^瀏覽器的輸入請求將相應(yīng)結(jié)果轉(zhuǎn)化成數(shù)據(jù)模型，從而進(jìn)一步由視圖展示給用戶。

Spring的控制器是對Controller接口的實現(xiàn)，該接口僅僅定義了ModelAndView handlerRequest（request，response）方法，返回一個ModelAndView實例，其中ModelAndVie實例由視圖名稱和模型Map組成。

1.2.3 模型和視圖（ModelAndView）

控制器會返回與請求相關(guān)的模型和視圖，并傳遞給前端控制器，分發(fā)器接收到模型和視圖后，將解析分離模型和視圖，并將模型加載到視圖上渲染給客戶端。

1.2.4 視圖和視圖解析器（View And ViewResolver）

Spring MVC用于處理視圖最重要的兩個接口是ViewResolver和View。ViewResolver的主要作用是把一個邏輯上的視圖名稱解析為一個真正的視圖，SpringMVC中用于把View對象呈現(xiàn)給客戶端的是View對象本身，而ViewResolver只是把邏輯視圖名稱解析為對象的View對象。View接口的主要作用是用于處理視圖，然后返回給客戶端。

2 權(quán)限系統(tǒng)的算法分析與設(shè)計

2.1系統(tǒng)結(jié)構(gòu)

權(quán)限管理系統(tǒng)分為用戶、角色、等級、權(quán)限、功能模塊、部門管理6個模塊。其中，用戶功能模塊實現(xiàn)了對整個實驗室信息管理平臺進(jìn)行動態(tài)的管理，且可以對用戶動態(tài)分配不同的角色，可以控制用戶的操作；角色功能模塊實現(xiàn)了對實驗室管理平臺資源的動態(tài)管理，且可以為不同的角色動態(tài)分配資源；等級功能模塊完成了對用戶操作的動態(tài)分配與管理，不同級別的用戶擁有不同的操作級別；權(quán)限功能模塊是對多級功能模塊的最終孩子節(jié)點的動態(tài)管理，也就是對用戶最終需要操作的模塊動態(tài)管理；功能模塊的管理是以EasyUI頁面的樹型結(jié)構(gòu)控件為基礎(chǔ)來實現(xiàn)對整個質(zhì)譜實驗室信息管理平臺所需的多級功能模塊的動態(tài)管理； 部門管理模塊是對各個部門權(quán)限、角色、等級的統(tǒng)一管理，相當(dāng)于用戶的組管理。權(quán)限功能結(jié)構(gòu)圖如圖2所示。

2.2系統(tǒng)設(shè)計與實現(xiàn)

2.2.1異步實現(xiàn)多級部門EasyUI動態(tài)樹

在Web程序開發(fā)過程中，我們經(jīng)常會遇到菜單功能、部門列表的樹形顯示與操作，EasyUI樹形UI組件為我們實現(xiàn)異步樹提供了基礎(chǔ)，默認(rèn)情況下EasyUI樹形組件的默認(rèn)顯示是文件夾和文件數(shù)節(jié)點，但是樹形圖標(biāo)和文本顯示的內(nèi)容不需要自定義代碼，它們是基于動態(tài)可變的。因此圖標(biāo)配置顯示不僅僅限于文件系統(tǒng)，權(quán)限系統(tǒng)也同樣使用。權(quán)限系統(tǒng)通過EasyUI框架和Spring MVC框架來實現(xiàn)實驗室管理信息平臺的部門與模塊管理。為說明動態(tài)樹應(yīng)用，下面以部門管理為例進(jìn)行說明。

EasyUI通過使用Ajax （Asynchronous Javascript And XML）技術(shù)將回調(diào)函數(shù)傳回來的Json （JavaScript Object Notation）格式的數(shù)據(jù)進(jìn)行加載和渲染形成動態(tài)異步樹，常見的樹形Json對象格式形式[5]為[{"id"：1， "text"："Folder1"，"iconCls"："icon-save"，”attributes”：{}，"checked"：true，

"state"：”open”，"children"：[{"text"："File1"，"checked"：true}]}]，其中id對樹節(jié)點進(jìn)行標(biāo)記，text用于顯示樹節(jié)點名稱，iconCls顯示樹形節(jié)點的圖標(biāo)，attributes被添加到節(jié)點的自定義屬性，checked表示樹形節(jié)點對否被選中，state表示節(jié)點的狀態(tài)，children表示該節(jié)點下的子節(jié)點。根據(jù)樹形結(jié)構(gòu)的特點，建立樹形模型，在數(shù)據(jù)庫中的設(shè)計如表1所示。

在service業(yè)務(wù)層中通過控制層中傳過來的pid進(jìn)行遞歸調(diào)用，直至加載完所有的部門及子部門信息，然后轉(zhuǎn)成Json格式回傳給EasyUI樹形組件加載顯示到頁面上。

2.2.2角色、部門、權(quán)限、用戶多級關(guān)聯(lián)模塊EasyUI動態(tài)樹設(shè)計

用戶權(quán)限工程模塊同樣是基于EasyUI樹形組件為主實現(xiàn)的。由于權(quán)限系統(tǒng)的設(shè)計為不同的用戶設(shè)置不同的權(quán)限，即不同的用戶根據(jù)自己所分配的權(quán)限登錄系統(tǒng)后動態(tài)加載顯示不同的樹節(jié)點。但是運用EasyUI樹型組件為部門設(shè)計的是動態(tài)加載整棵樹節(jié)點，不能完成對指定樹的節(jié)點進(jìn)行選擇。因此在設(shè)計權(quán)限系統(tǒng)時對用戶、角色、權(quán)限實行了多對多的關(guān)聯(lián)。

3 結(jié)論

本文通過使用EasyUI框架和Spring MVC框架的整合實現(xiàn)了用戶根據(jù)需求對多級功能模塊的自定義添加管理，同時也實現(xiàn)了功能模塊動態(tài)添加，這大大提高了權(quán)限管理系統(tǒng)的靈活性。EasyUI是一種輕量級的跨瀏覽器的框架，與其他框架相比更為輕量與靈活，對頁面的負(fù)載較?。煌瑫r該框架采用Json格式數(shù)據(jù)傳輸，提高了數(shù)據(jù)傳輸?shù)男省?/p>

參考文獻(xiàn)：

[1] 熊慧敏. 基于SSH+EasyUI的信用卡資金監(jiān)管系統(tǒng)的設(shè)計與實現(xiàn)[D].廈門：廈門大學(xué)，2014.

[2] 廖福保. 擴(kuò)展Spring MVC 模塊的Web應(yīng)用[J]. 實驗室研究與探索， 2012（10）：70-73.

[3] 薛峰，梁鋒，徐書勛，等. 基于Spring MVC構(gòu)架中的Web研究與應(yīng)用[J]. 合肥工業(yè)大學(xué)學(xué)報：自然科學(xué)版， 2012，3（3）：337-340.

[4] 曾原. 基于EasyUI的高職院?？蒲泄芾硐到y(tǒng)的設(shè)計與開發(fā)[D].. 吉林大學(xué)，2014.

[5] 李祁，李瑛，陳青華. 基于AJAX的動態(tài)樹狀菜單的設(shè)計及實現(xiàn)[J]. 電子設(shè)計工程2011（19）：52-54.

[6] 劉晶. 基于Spring MVC+OpenJPA框架的Web應(yīng)用開發(fā)[J]. 電腦知識與技術(shù)，2011（27）：6656-6660.