基于ExtJS的業務欄目管理系統的設計與實現

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

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

1 ExtJS簡介

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

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

2 業務欄目管理的基本思想

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

3 系統功能設計

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

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

4 系統實現

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

4.1 業務欄目管理

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

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

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

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

4.2 操作人員權限管理

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

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

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

4.3 操作業務內容

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

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

4.4 ExtJS組件及PHP代碼

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

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

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

5 結語

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

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

[2]暴志剛，胡艷軍，顧新建.基于Web的系統權限管理實現方法[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.