基于extjs的業(yè)務(wù)欄目管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

1、<p>　　基于ExtJS的業(yè)務(wù)欄目管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)</p><p>　　[摘要]通過分析傳統(tǒng)Web開發(fā)的不足，針對(duì)當(dāng)前業(yè)務(wù)欄目管理需求，本文提出了基于ExtJS的業(yè)務(wù)欄目管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)，實(shí)踐證明，借助ExtJS組件和Ajax技術(shù)，系統(tǒng)高效地實(shí)現(xiàn)了業(yè)務(wù)欄目的動(dòng)態(tài)管理，并在一定程度上提升了館內(nèi)的業(yè)務(wù)管理水平。 </p><p>　　[關(guān)鍵詞]業(yè)務(wù)欄目管理系統(tǒng)； ExtJS

2、； JSON； Ajax </p><p>　　[中圖分類號(hào)]G250.72[文獻(xiàn)標(biāo)志碼]B[文章編號(hào)]1005-6041（2013）03-0024-04 </p><p>　　對(duì)于一個(gè)系統(tǒng)的眾多操作人員分散于不同部門的情況，如何保證這部分人員只能操作由系統(tǒng)管理員分配的某個(gè)業(yè)務(wù)欄目，是業(yè)務(wù)欄目系統(tǒng)在規(guī)劃設(shè)計(jì)時(shí)首先考慮的問題之一。鑒于此需求，本文設(shè)計(jì)并實(shí)現(xiàn)了基于ExtJS的業(yè)務(wù)欄目管理系統(tǒng)。

3、借助此系統(tǒng)，系統(tǒng)管理員能以最小代價(jià)，通過Web界面，將某業(yè)務(wù)欄目動(dòng)態(tài)分配給相應(yīng)的某操作人員。之后，操作人員利用分配到的具體業(yè)務(wù)欄目（具體權(quán)限）來(lái)操作相關(guān)業(yè)務(wù)。實(shí)踐證明，該系統(tǒng)有效提高了管理員和操作人員的辦公效率，實(shí)現(xiàn)了操作人員和業(yè)務(wù)欄目的全面管理，并在一定程度上提升了館內(nèi)的業(yè)務(wù)管理水平。 </p><p><b>　　1ExtJS簡(jiǎn)介 </b></p><p>　　E

4、xtJS框架基于純HTML/CSS + JS技術(shù)，用JSON/XML規(guī)范綁定數(shù)據(jù)源，以減輕服務(wù)器和網(wǎng)絡(luò)的負(fù)荷。ExtJS可輕松構(gòu)造出功能強(qiáng)大、界面美觀的網(wǎng)頁(yè)和客戶端程序，為實(shí)現(xiàn)多個(gè)數(shù)據(jù)表聯(lián)動(dòng)查詢、更新顯示、分頁(yè)顯示以及樹狀結(jié)構(gòu)顯示等復(fù)雜界面提供了方便。 </p><p>　　ExtJS支持JSON 和XML兩種數(shù)據(jù)格式解析和交換，能快速綁定數(shù)據(jù)到相應(yīng)組件并顯示視圖。相比XML，JSON是一種輕量級(jí)的數(shù)據(jù)交換格式，

5、采用完全獨(dú)立于語(yǔ)言的文本格式。由于JSON是Javascript原生格式，這意味著在JavaScript中處理JSON數(shù)據(jù)不需要任何特殊的API 或工具包。這些特性使JSON成為ExtJS異步交互應(yīng)用的理想數(shù)據(jù)語(yǔ)言[1]。下面以“業(yè)務(wù)欄目”為例來(lái)說明JSON 數(shù)據(jù)格式，如前文所述，這里把“業(yè)務(wù)欄目”看做是“權(quán)限名稱”，其數(shù)據(jù)格式中包括“權(quán)限名稱”和“權(quán)限編碼”等信息，JSON的名稱/值對(duì)的表示方式為： {“title”：“書香十月活動(dòng)”

6、，“ident”：“XueHuiHuoDong”}，其中title字段值是顯示給操作人員的業(yè)務(wù)名稱，ident字段值是能讓系統(tǒng)處理的鏈接名稱，其對(duì)應(yīng) XueHuiHuoDong.js源代碼文件。 </p><p>　　2業(yè)務(wù)欄目管理的基本思想 </p><p>　　一個(gè)系統(tǒng)權(quán)限控制的最小單位是按鈕或鏈接，所有的權(quán)限都可以分解為能否訪問一個(gè)按鈕或鏈接的集合，本文基于Web的“業(yè)務(wù)欄目”管理系

7、統(tǒng)的思想是：動(dòng)態(tài)管理“業(yè)務(wù)欄目”鏈接信息，即操作人員能否看到該鏈接信息。鑒于此，依據(jù)圖書館各業(yè)務(wù)部門的具體業(yè)務(wù)需求規(guī)劃了用戶的訪問控制模型[2]，并在此基礎(chǔ)上實(shí)現(xiàn)了對(duì)操作人員動(dòng)態(tài)分配不同的業(yè)務(wù)鏈接的功能，最后使操作人員能通過分配到的鏈接來(lái)對(duì)信息資源進(jìn)行相應(yīng)操作。 </p><p><b>　　3系統(tǒng)功能設(shè)計(jì) </b></p><p>　　本文建立了適合圖書館自身業(yè)務(wù)需

8、要的業(yè)務(wù)欄目管理系統(tǒng)，把分散的業(yè)務(wù)，如“讀者園地”“新聞報(bào)道”“書香十月”“學(xué)會(huì)活動(dòng)”等欄目通過一個(gè)系統(tǒng)平臺(tái)全部集成起來(lái)，使業(yè)務(wù)操作能在Web上運(yùn)行，并實(shí)現(xiàn)業(yè)務(wù)在各個(gè)操作人員間的動(dòng)態(tài)分配。本系統(tǒng)使用人員分為操作人員、管理員兩大類，在功能上分為3個(gè)功能模塊：1）業(yè)務(wù)欄目管理模塊，主要對(duì)系統(tǒng)中所涉及的業(yè)務(wù)欄目基本信息進(jìn)行集成統(tǒng)一管理，如增加、刪除、修改欄目的名稱、類別等信息。2）操作人員權(quán)限管理模塊，主要對(duì)使用該系統(tǒng)的操作人員分配相關(guān)的業(yè)務(wù)

9、欄目信息，使操作人員擁有或不擁有該業(yè)務(wù)欄目的操作權(quán)限。3）操作業(yè)務(wù)內(nèi)容模塊：該模塊提供了操作人員所能操作的業(yè)務(wù)功能界面，通過此界面，操作人員可完成具體的業(yè)務(wù)操作。 </p><p>　　在本系統(tǒng)中，操作人員只能對(duì)“操作業(yè)務(wù)內(nèi)容模塊”進(jìn)行操作，而管理員可以對(duì)“業(yè)務(wù)欄目管理模塊”“操作人員權(quán)限管理模塊”和“操作業(yè)務(wù)內(nèi)容模塊”進(jìn)行全盤管理和操作。 </p><p><b>　　4系統(tǒng)實(shí)

10、現(xiàn) </b></p><p>　　本系統(tǒng)在專業(yè)的PHP框架Zend Framework平臺(tái)上開發(fā)[3，4]，系統(tǒng)用到的業(yè)務(wù)欄目、工作人員等項(xiàng)目數(shù)據(jù)采用Mysql數(shù)據(jù)庫(kù)裝載，系統(tǒng)的界面設(shè)計(jì)采用了ExtJS功能強(qiáng)大的UI組件，如Tree組件和 </p><p>　　Grid組件等[5， 6]。在具體實(shí)現(xiàn)過程中，系統(tǒng)采用了ExtJS的MVC模式來(lái)進(jìn)行研發(fā)，并充分利用了ExtJS組件的

11、華麗界面和快速布局特性，這三者的結(jié)合在一定程度上簡(jiǎn)化了業(yè)務(wù)欄目管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)。在人機(jī)交互方面，采用了當(dāng)前流行的頁(yè)面異步刷新技術(shù)（Ajax技術(shù)），提升了用戶的使用體驗(yàn)；在機(jī)機(jī)交互方面，采用組件所要求的JSON格式數(shù)據(jù)來(lái)實(shí)現(xiàn)ExtJS程序與后臺(tái)PHP程序的數(shù)據(jù)交互，減輕了帶寬的負(fù)載、服務(wù)器的壓力等。 </p><p>　　4.1 業(yè)務(wù)欄目管理 </p><p>　　由于要對(duì)操作人員分配相

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

13、出了在Tree組件中顯示的與“業(yè)務(wù)欄目”相關(guān)的部分JSON數(shù)據(jù)： </p><p>　　于是，圖1中的新增權(quán)限界面上的4個(gè)字段，既對(duì)應(yīng)于JSON中各字段同時(shí)又對(duì)應(yīng)Mysql表格中相應(yīng)字段。此外，圖中“書香十月”下拉列中還可以選擇不同的項(xiàng)來(lái)實(shí)現(xiàn)不同父結(jié)點(diǎn)（父欄目）的選擇，最后，系統(tǒng)還能編輯和刪除該欄目所擁有子欄目的“權(quán)限名稱”和“權(quán)限編碼”等信息，此“權(quán)限編碼”即對(duì)應(yīng)機(jī)器能處理的鏈接信息，如“編輯”和“刪除” &l

14、t;/p><p>　　列。當(dāng)這些初始信息被錄入系統(tǒng)后就形成了“業(yè)務(wù) 　　4.2 操作人員權(quán)限管理 </p><p>　　由于系統(tǒng)的操作人員是以各業(yè)務(wù)部門的工作人員為基礎(chǔ)的，所以單位內(nèi)各業(yè)務(wù)部門的全體工作人員都有可能是該系統(tǒng)的操作人員，他們或?yàn)g覽系統(tǒng)發(fā)布的針對(duì)內(nèi)部人員的通知，或利用該系統(tǒng)進(jìn)行相關(guān)業(yè)務(wù)操作。圖3中列出了廣西師范大學(xué)圖書館雁山分館工作人員的信息，包括該部門的在崗人員數(shù)（21名），權(quán)

15、限，密碼，工作照片等信息，同樣，可以通過這個(gè)界面修改這些信息。這里最重要的是針對(duì)某用戶的權(quán)限管理，即分配系統(tǒng)中的哪些業(yè)務(wù)欄目給相應(yīng)用戶。這里通過給工作人員朱文濤分配“書香十月征文”欄目為例，來(lái)展示業(yè)務(wù)欄目的動(dòng)態(tài)分配過程。如圖4所示，通過點(diǎn)擊圖中某行的“擁有權(quán)限”列復(fù)選框來(lái)選上或去選即可實(shí)現(xiàn)動(dòng)態(tài)分配與該行相對(duì)應(yīng)的業(yè)務(wù)欄目（針對(duì)操作人員）和鏈接信息（針對(duì)機(jī)器）。整個(gè)業(yè)務(wù)欄目管理（權(quán)限管理）的實(shí)現(xiàn)過程都是基于Grid表格組件操作，同時(shí)采用了頁(yè)

16、面無(wú)刷新的Ajax技術(shù)[7]。 </p><p>　　4.3 操作業(yè)務(wù)內(nèi)容 </p><p>　　經(jīng)過業(yè)務(wù)欄目的動(dòng)態(tài)分配后，也就在表中形成了按業(yè)務(wù)欄目分類的數(shù)據(jù)，接下來(lái)就是實(shí)現(xiàn)在Tree組件中顯示相應(yīng)的“業(yè)務(wù)欄目”名稱信息，以及在Tree組件中“業(yè)務(wù)欄目”名稱被點(diǎn)擊后能顯示出具體可操作的業(yè)務(wù)內(nèi)容界面，該操作過程結(jié)合了ExtJS中Tree組件和Tab組件的代碼實(shí)現(xiàn)[6]。在本系統(tǒng)中，當(dāng)操作人

17、員登錄系統(tǒng)后，系統(tǒng)就會(huì)顯示管理員分配給他的“業(yè)務(wù)欄目”集，如圖5所示，在圖的左邊顯示了他能操作的全部業(yè)務(wù)欄目。通過點(diǎn)擊相應(yīng)“業(yè)務(wù)欄目”，系統(tǒng)就會(huì)在圖的右邊顯示相應(yīng)的業(yè)務(wù)內(nèi)容界面，如圖5中顯示的“書香十月征文”業(yè)務(wù)操作界面。在這個(gè)操作界面里，操作人員可進(jìn)行編輯、刪除、查詢、查看和審閱等有關(guān)讀者提交文章的相關(guān)操作。至此，基于“業(yè)務(wù)欄目”名稱和鏈接思想設(shè)計(jì)出的系統(tǒng)很好地得到了實(shí)現(xiàn)。 </p><p>　　4.4ExtJ

18、S組件及PHP代碼 </p><p>　　在整個(gè)系統(tǒng)的界面設(shè)計(jì)過程中，主要采用了ExtJS中強(qiáng)大的Tree樹組件和Grid表格組件，其中Tree組件主要用來(lái)顯示樹狀的業(yè)務(wù)欄目名稱，Grid組件用來(lái)實(shí)現(xiàn)業(yè)務(wù)欄目的動(dòng)態(tài)分配和業(yè)務(wù)操作內(nèi)容，兩個(gè)組件都很好地實(shí)現(xiàn)了Ajax方式的系統(tǒng)交互。由于本系統(tǒng)采用ExtJS自帶的Ajax方式與后臺(tái)PHP語(yǔ)言進(jìn)行交互[4]，通過這種異步方式實(shí)現(xiàn)無(wú)刷新操作，顯著提升了用戶的使用體驗(yàn)。為此

19、，后臺(tái)PHP語(yǔ)言除了從數(shù)據(jù)庫(kù)取出已分配好的業(yè)務(wù)欄目數(shù)據(jù)外，還要把這些數(shù)據(jù)格式化成適合組件能顯示的JSON格式數(shù)據(jù)。 </p><p>　　把表中數(shù)據(jù)轉(zhuǎn)化成適合Tree組件顯示的PHP代碼： </p><p><b>　　5結(jié)語(yǔ) </b></p><p>　　業(yè)務(wù)欄目管理是信息系統(tǒng)的重要組成部分，所采用的技術(shù)和策略對(duì)系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)影響很大。本文

20、提出的基于ExtJS的業(yè)務(wù)欄目管理系統(tǒng)借助了業(yè)務(wù)欄目鏈接思想，且是在多個(gè)實(shí)際工程基礎(chǔ)上提煉出來(lái)的，在實(shí)際系統(tǒng)中運(yùn)行效果良好，對(duì)類似的基于Web的系統(tǒng)業(yè)務(wù)管理功能的開發(fā)具有一定的參考價(jià)值。 </p><p><b>　　[參考文獻(xiàn)] </b></p><p>　　[1] ASLESON R，SCHUTTA N T. Foundations of AJAX [M]. US

21、A：Apress， 2006：31—263. </p><p>　　[2] 暴志剛，胡艷軍，顧新建.基于Web的系統(tǒng)權(quán)限管理實(shí)現(xiàn)方法 [J].計(jì)算機(jī)工程，2006（1）：169—170，182. </p><p>　　[3] VASWANI V. Zend framework： A beginner's guide [M]. USA： McGraw-Hill， 2010：332—3

22、42. </p><p>　　[4] PADILLA A. Beginning Zend Framework [M]. USA： Springer， 2009：253—259. </p><p>　　[5] GRONER L. Ext JS 4 First Look [M]. England： Packt Publishing Ltd， 2011：280—304. </p>

23、<p>　　[6] ASHWORTH S，DUNCAN'S. A. Ext JS 4 Web Application Development [M]. England：Packt Publishing Ltd， 2012： 265—312. </p><p>　　[7] ASLESON R，SCHUTTA N T. Foundations of AJAX [M]. USA： Apress，200