基于ExtJS的業(yè)務欄目管理系統(tǒng)的設計與實現(xiàn)

(廣西師范大學圖書館，廣西 桂林 541004)

對于一個系統(tǒng)的眾多操作人員分散于不同部門的情況，如何保證這部分人員只能操作由系統(tǒng)管理員分配的某個業(yè)務欄目，是業(yè)務欄目系統(tǒng)在規(guī)劃設計時首先考慮的問題之一。鑒于此需求，本文設計并實現(xiàn)了基于ExtJS的業(yè)務欄目管理系統(tǒng)。借助此系統(tǒng)，系統(tǒng)管理員能以最小代價，通過Web界面，將某業(yè)務欄目動態(tài)分配給相應的某操作人員。之后，操作人員利用分配到的具體業(yè)務欄目(具體權限)來操作相關業(yè)務。實踐證明，該系統(tǒng)有效提高了管理員和操作人員的辦公效率，實現(xiàn)了操作人員和業(yè)務欄目的全面管理，并在一定程度上提升了館內的業(yè)務管理水平。

1 ExtJS簡介

ExtJS框架基于純 HTML/CSS+JS技術，用JSON/XML規(guī)范綁定數據源，以減輕服務器和網絡的負荷。ExtJS可輕松構造出功能強大、界面美觀的網頁和客戶端程序，為實現(xiàn)多個數據表聯(lián)動查詢、更新顯示、分頁顯示以及樹狀結構顯示等復雜界面提供了方便。

ExtJS支持JSON和XML兩種數據格式解析和交換，能快速綁定數據到相應組件并顯示視圖。相比XML，JSON是一種輕量級的數據交換格式，采用完全獨立于語言的文本格式。由于JSON是Javascript原生格式，這意味著在JavaScript中處理JSON數據不需要任何特殊的API或工具包。這些特性使JSON成為ExtJS異步交互應用的理想數據語言。下面以“業(yè)務欄目”為例來說明JSON數據格式，如前文所述，這里把“業(yè)務欄目”看做是“權限名稱”，其數據格式中包括“權限名稱”和“權限編碼”等信息，JSON的名稱/值對的表示方式為:{“title”:“書 香 十 月 活 動”，“ident”:“XueHuiHuoDong”}，其中title字段值是顯示給操作人員的業(yè)務名稱，ident字段值是能讓系統(tǒng)處理的鏈接名稱，其對應 XueHuiHuoDong.js源代碼文件。

2 業(yè)務欄目管理的基本思想

一個系統(tǒng)權限控制的最小單位是按鈕或鏈接，所有的權限都可以分解為能否訪問一個按鈕或鏈接的集合，本文基于Web的“業(yè)務欄目”管理系統(tǒng)的思想是:動態(tài)管理“業(yè)務欄目”鏈接信息，即操作人員能否看到該鏈接信息。鑒于此，依據圖書館各業(yè)務部門的具體業(yè)務需求規(guī)劃了用戶的訪問控制模型，并在此基礎上實現(xiàn)了對操作人員動態(tài)分配不同的業(yè)務鏈接的功能，最后使操作人員能通過分配到的鏈接來對信息資源進行相應操作。

3 系統(tǒng)功能設計

本文建立了適合圖書館自身業(yè)務需要的業(yè)務欄目管理系統(tǒng)，把分散的業(yè)務，如“讀者園地”“新聞報道”“書香十月”“學會活動”等欄目通過一個系統(tǒng)平臺全部集成起來，使業(yè)務操作能在Web上運行，并實現(xiàn)業(yè)務在各個操作人員間的動態(tài)分配。本系統(tǒng)使用人員分為操作人員、管理員兩大類，在功能上分為3個功能模塊:1)業(yè)務欄目管理模塊，主要對系統(tǒng)中所涉及的業(yè)務欄目基本信息進行集成統(tǒng)一管理，如增加、刪除、修改欄目的名稱、類別等信息。2)操作人員權限管理模塊，主要對使用該系統(tǒng)的操作人員分配相關的業(yè)務欄目信息，使操作人員擁有或不擁有該業(yè)務欄目的操作權限。3)操作業(yè)務內容模塊:該模塊提供了操作人員所能操作的業(yè)務功能界面，通過此界面，操作人員可完成具體的業(yè)務操作。

在本系統(tǒng)中，操作人員只能對“操作業(yè)務內容模塊”進行操作，而管理員可以對“業(yè)務欄目管理模塊”“操作人員權限管理模塊”和“操作業(yè)務內容模塊”進行全盤管理和操作。

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

本系統(tǒng)在專業(yè)的PHP框架Zend Framework平臺上開發(fā)，系統(tǒng)用到的業(yè)務欄目、工作人員等項目數據采用Mysql數據庫裝載，系統(tǒng)的界面設計采用了ExtJS功能強大的UI組件，如Tree組件和Grid組件等。在具體實現(xiàn)過程中，系統(tǒng)采用了ExtJS的MVC模式來進行研發(fā)，并充分利用了ExtJS組件的華麗界面和快速布局特性，這三者的結合在一定程度上簡化了業(yè)務欄目管理系統(tǒng)的設計與實現(xiàn)。在人機交互方面，采用了當前流行的頁面異步刷新技術(Ajax技術)，提升了用戶的使用體驗;在機機交互方面，采用組件所要求的JSON格式數據來實現(xiàn)ExtJS程序與后臺PHP程序的數據交互，減輕了帶寬的負載、服務器的壓力等。

4.1 業(yè)務欄目管理

由于要對操作人員分配相關業(yè)務欄目，首先就要依業(yè)務需求分類建立“業(yè)務欄目”名稱初始信息，即待分配的權限信息，這些信息可以經系統(tǒng)進行動態(tài)添加、修改等操作，如在本系統(tǒng)中為“書香十月”欄目添加子欄目“書香十月名師推薦”，如圖2所示?？紤]到這些“業(yè)務欄目”名稱要在ExtJS中的Tree組件顯示，為此，在利用程序界面添加數據的時候，既要考慮到遵循Tree組件需要的數據格式，又要考慮到在Mysql數據庫中建立相應的數據表結構，兩者之間的關聯(lián)部分就是JSON數據格式，以下列出了在Tree組件中顯示的與“業(yè)務欄目”相關的部分JSON數據:

于是，圖1中的新增權限界面上的4個字段，既對應于JSON中各字段同時又對應Mysql表格中相應字段。此外，圖中“書香十月”下拉列中還可以選擇不同的項來實現(xiàn)不同父結點(父欄目)的選擇，最后，系統(tǒng)還能編輯和刪除該欄目所擁有子欄目的“權限名稱”和“權限編碼”等信息，此“權限編碼”即對應機器能處理的鏈接信息，如“編輯”和“刪除”列。當這些初始信息被錄入系統(tǒng)后就形成了“業(yè)務欄目”數據集合，即構筑了對操作人員分配相應“業(yè)務欄目”的基礎，如圖2所示。

圖1 新增權限(業(yè)務欄目)界面

圖2 新增的“書香十月名師推薦”欄目

4.2 操作人員權限管理

由于系統(tǒng)的操作人員是以各業(yè)務部門的工作人員為基礎的，所以單位內各業(yè)務部門的全體工作人員都有可能是該系統(tǒng)的操作人員，他們或瀏覽系統(tǒng)發(fā)布的針對內部人員的通知，或利用該系統(tǒng)進行相關業(yè)務操作。圖3中列出了廣西師范大學圖書館雁山分館工作人員的信息，包括該部門的在崗人員數(21名)，權限，密碼，工作照片等信息，同樣，可以通過這個界面修改這些信息。這里最重要的是針對某用戶的權限管理，即分配系統(tǒng)中的哪些業(yè)務欄目給相應用戶。這里通過給工作人員朱文濤分配“書香十月征文”欄目為例，來展示業(yè)務欄目的動態(tài)分配過程。如圖4所示，通過點擊圖中某行的“擁有權限”列復選框來選上或去選即可實現(xiàn)動態(tài)分配與該行相對應的業(yè)務欄目(針對操作人員)和鏈接信息(針對機器)。整個業(yè)務欄目管理(權限管理)的實現(xiàn)過程都是基于Grid表格組件操作，同時采用了頁面無刷新的 Ajax 技術。

圖3 雁山分館工作人員界面

圖4 權限(業(yè)務欄目)分配界面

4.3 操作業(yè)務內容

經過業(yè)務欄目的動態(tài)分配后，也就在表中形成了按業(yè)務欄目分類的數據，接下來就是實現(xiàn)在Tree組件中顯示相應的“業(yè)務欄目”名稱信息，以及在Tree組件中“業(yè)務欄目”名稱被點擊后能顯示出具體可操作的業(yè)務內容界面，該操作過程結合了ExtJS中Tree組件和Tab組件的代碼實現(xiàn)。在本系統(tǒng)中，當操作人員登錄系統(tǒng)后，系統(tǒng)就會顯示管理員分配給他的“業(yè)務欄目”集，如圖5所示，在圖的左邊顯示了他能操作的全部業(yè)務欄目。通過點擊相應“業(yè)務欄目”，系統(tǒng)就會在圖的右邊顯示相應的業(yè)務內容界面，如圖5中顯示的“書香十月征文”業(yè)務操作界面。在這個操作界面里，操作人員可進行編輯、刪除、查詢、查看和審閱等有關讀者提交文章的相關操作。至此，基于“業(yè)務欄目”名稱和鏈接思想設計出的系統(tǒng)很好地得到了實現(xiàn)。

圖5 “業(yè)務欄目”名稱及具體業(yè)務操作界面

4.4 ExtJS組件及PHP代碼

在整個系統(tǒng)的界面設計過程中，主要采用了ExtJS中強大的Tree樹組件和Grid表格組件，其中Tree組件主要用來顯示樹狀的業(yè)務欄目名稱，Grid組件用來實現(xiàn)業(yè)務欄目的動態(tài)分配和業(yè)務操作內容，兩個組件都很好地實現(xiàn)了Ajax方式的系統(tǒng)交互。由于本系統(tǒng)采用ExtJS自帶的Ajax方式與后臺PHP語言進行交互，通過這種異步方式實現(xiàn)無刷新操作，顯著提升了用戶的使用體驗。為此，后臺PHP語言除了從數據庫取出已分配好的業(yè)務欄目數據外，還要把這些數據格式化成適合組件能顯示的JSON格式數據。

把表中數據轉化成適合Tree組件顯示的PHP代碼:

把表中數據轉化成適合Grid組件顯示的PHP代碼:

5 結語

業(yè)務欄目管理是信息系統(tǒng)的重要組成部分，所采用的技術和策略對系統(tǒng)的設計和實現(xiàn)影響很大。本文提出的基于ExtJS的業(yè)務欄目管理系統(tǒng)借助了業(yè)務欄目鏈接思想，且是在多個實際工程基礎上提煉出來的，在實際系統(tǒng)中運行效果良好，對類似的基于Web的系統(tǒng)業(yè)務管理功能的開發(fā)具有一定的參考價值。

[1]ASLESON R，SCHUTTA N T.Foundations of AJAX[M].USA:Apress，2006:31—263.

[2]暴志剛，胡艷軍，顧新建.基于Web的系統(tǒng)權限管理實現(xiàn)方法[J].計算機工程，2006(1):169—170，182.

[3]VASWANI V.Zend framework:A beginner＇s guide[M].USA:McGraw－Hill，2010:332—342.

[4] PADILLA A.Beginning Zend Framework [M].USA:Springer，2009:253—259.

[5]GRONER L.Ext JS 4 First Look[M].England:Packt Publishing Ltd，2011:280—304.

[6]ASHWORTH S，DUNCAN＇S.A.Ext JS 4 Web Application Development[M].England:Packt Publishing Ltd，2012:265—312.

[7]ASLESON R，SCHUTTA N T.Foundations of AJAX[M].USA:Apress，2006:39—74.

[8]WAGE J H，VESTERINEN K.Doctrine ORM for PHP[M].SENSIOLABS，2009:115—155.