蔡萌++谷志峰

摘要：采用基于Ajax的前端開(kāi)發(fā)技術(shù)Extjs和后臺(tái)技術(shù)SSH框架設(shè)計(jì)了一個(gè)在線(xiàn)醫(yī)藥管理系統(tǒng)。以此系統(tǒng)為例介紹了ExtJS技術(shù)和SSH框架開(kāi)發(fā)Web項(xiàng)目時(shí)的框架之間的融合應(yīng)用，分析了整個(gè)系統(tǒng)的機(jī)構(gòu)。并在詳細(xì)分析設(shè)計(jì)中說(shuō)明了ExtJS各個(gè)組件，如：表格組件，工具欄組件，Window面板組件，樹(shù)形結(jié)構(gòu)組件，按鈕組件以及布局等在系統(tǒng)中的詳細(xì)應(yīng)用。ExtJS框架的引入提高了系統(tǒng)的可拓展性和用戶(hù)的體驗(yàn)以及使得程序的邏輯更加清晰。降低了程序的復(fù)雜度以及維護(hù)的難度。

關(guān)鍵詞：電子商務(wù)；藥物系統(tǒng)；SSH框架技術(shù)；ExtJS框架；MySQL數(shù)據(jù)庫(kù)

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）29-0003-02

醫(yī)藥管理系統(tǒng)是采用計(jì)算機(jī)技術(shù)與網(wǎng)絡(luò)技術(shù)所開(kāi)發(fā)的計(jì)算機(jī)應(yīng)用系統(tǒng)，它的使用可以使企業(yè)內(nèi)部實(shí)現(xiàn)信息共享，以及企業(yè)與用戶(hù)之間高效的交互，并能實(shí)現(xiàn)系統(tǒng)中的協(xié)同工作，大大提高企業(yè)中員工的工作效率，同時(shí)也為企業(yè)提供全方位的信息采集及處理，為企業(yè)提供全方位的信息化管理提供依據(jù)。而在現(xiàn)階段使用的管理信息系統(tǒng)超出了一個(gè)OA系統(tǒng)所能達(dá)到的程度，一個(gè)企業(yè)使用管理信息系統(tǒng)的程度是衡量企業(yè)現(xiàn)代化管理的標(biāo)準(zhǔn)，也是實(shí)現(xiàn)高效低能辦公的重要途徑。本文根據(jù)信息化系統(tǒng)化這個(gè)大環(huán)境，構(gòu)建一個(gè)適合一個(gè)醫(yī)藥企業(yè)業(yè)務(wù)結(jié)構(gòu)的管理系統(tǒng)。開(kāi)發(fā)平臺(tái)采用了三層架構(gòu)，運(yùn)用了MVC開(kāi)發(fā)模式，使用了MySQL數(shù)據(jù)庫(kù)，以及Struts2/Spring/Hibernate/ExtJS等技術(shù)框架。系統(tǒng)著重實(shí)現(xiàn)了對(duì)藥品的管理銷(xiāo)售及更新，以及訂單查詢(xún)及處理，還有用戶(hù)的統(tǒng)一分權(quán)限管理，實(shí)現(xiàn)了辦公的高效以及辦公的自動(dòng)化。

1 研究背景及研究?jī)?nèi)容

隨著網(wǎng)絡(luò)的發(fā)展，工業(yè)企業(yè)日益朝著精細(xì)化、標(biāo)準(zhǔn)化的方向邁進(jìn)，信息管理日益顯得重要。為了提高企業(yè)的核心競(jìng)爭(zhēng)力，實(shí)行企業(yè)信息化管理是必然的選擇。信息管理系統(tǒng)能更好地管理企業(yè)與客戶(hù)的各類(lèi)數(shù)據(jù)，并能對(duì)數(shù)據(jù)進(jìn)行集中的分析和共享，從而加強(qiáng)企業(yè)與客戶(hù)之間的溝通聯(lián)系，提高生產(chǎn)效率，最終提高企業(yè)的核心競(jìng)爭(zhēng)力。在此大背景下，國(guó)內(nèi)很多藥物企業(yè)開(kāi)始謀求轉(zhuǎn)型，確立“打造一流創(chuàng)新型生產(chǎn)基地”的發(fā)展目標(biāo)，并提出了信息化管理的要求。網(wǎng)上在線(xiàn)購(gòu)物正適合當(dāng)今社會(huì)的生活節(jié)奏，使客戶(hù)足不出戶(hù)就可以購(gòu)買(mǎi)到心儀的商品。然而大多數(shù)的網(wǎng)上在線(xiàn)系統(tǒng)，常面臨更新及美觀(guān)和維護(hù)等諸多問(wèn)題。所以開(kāi)發(fā)一個(gè)美觀(guān)高效方便的管理系統(tǒng)顯得尤為重要。

SSH為Struts2+ Spring +Hibernate組合框架，是當(dāng)今比較流行的框架。然而每個(gè)框架并不是完美的，業(yè)務(wù)邏輯框架Spring是一個(gè)輕量級(jí)控制反轉(zhuǎn)（IOC）和面向切面（AOP）的容器框架，使用基本的JavaBean代替EJB的強(qiáng)大功能。數(shù)據(jù)持久層框架Hibernate使程序員以非常簡(jiǎn)單的方式對(duì)數(shù)據(jù)庫(kù)進(jìn)行操作。表示層Struts2是實(shí)現(xiàn)MVC框架，雖然可以使邏輯變得清晰，但視圖的美觀(guān)并不能以簡(jiǎn)單的方式進(jìn)行調(diào)整布局操作，為了使用戶(hù)得到更好的體驗(yàn)，在表示層引用了ExtJS框架，ExtJS框架與Struts2的結(jié)合使用不但能快速高效的得到漂亮的效果，而且邏輯清晰，布局方便，功能強(qiáng)大。尤其是用戶(hù)常用到的ExtJS的表格組件，無(wú)論是對(duì)表格的分頁(yè)和編輯以及排序等功能的實(shí)現(xiàn)都相當(dāng)方便。“用最少的代碼做更多的事”，ExtJS實(shí)現(xiàn)的相當(dāng)輕松。因此對(duì)SSH的改進(jìn)是在表示層引用了ExtJS框架。

2 系統(tǒng)總體技術(shù)要求

2.1 系統(tǒng)架構(gòu)要求

1）系統(tǒng)采用B/S（瀏覽器/服務(wù)器）架構(gòu)模式。

2）開(kāi)發(fā)技術(shù)為JavaEE技術(shù)。

3）運(yùn)用MVC開(kāi)發(fā)模式，可以為一個(gè)模型在運(yùn)行期間同時(shí)建立和使用多個(gè)視圖，視圖和控制器可接插性，允許更換視圖和控制器對(duì)象，而且可以根據(jù)需求動(dòng)態(tài)無(wú)刷新打開(kāi)或關(guān)閉，運(yùn)行期間進(jìn)行對(duì)象的替換，模型可移植性等優(yōu)點(diǎn)。

4）使用體積小，速度快，成本低的MySQL數(shù)據(jù)庫(kù)。

5）使用Javascript、JAVA、HTML編程語(yǔ)言Ajax技術(shù)，Struts2、Spring、Hibernate、ExtJS框架，Json技術(shù)框架。

6）系統(tǒng)保證可擴(kuò)展性，未來(lái)能夠方便實(shí)現(xiàn)功能增強(qiáng)，以及健壯性。

7）系統(tǒng)預(yù)留有標(biāo)準(zhǔn)的接口（應(yīng)用接口、數(shù)據(jù)接口），實(shí)現(xiàn)與其他業(yè)務(wù)系統(tǒng)的應(yīng)用集成。

8）系統(tǒng)提供嚴(yán)格的用戶(hù)權(quán)限管理，根據(jù)不同的權(quán)限，每個(gè)用戶(hù)看到的功能菜單也不同。

9）系統(tǒng)提供良好的試圖組件以及豐富的界面皮膚，大幅度提高用戶(hù)的體驗(yàn)度。

2.2 硬件環(huán)境

運(yùn)行本軟件所要求的硬件設(shè)備的最小配置：CPU：3.0Hz；內(nèi)存：2G；硬盤(pán)：40G。

2.3 軟件環(huán)境

為運(yùn)行本軟件所需要的支持軟件（最低配置）：操作系統(tǒng)：Window 7/Window XP。

Web服務(wù)器： Tomcat 6.0，數(shù)據(jù)庫(kù)：MySQL 5.0，客戶(hù)端：Chrome 44.0.2403.89。

3 醫(yī)藥管理系統(tǒng)設(shè)計(jì)及實(shí)現(xiàn)

系統(tǒng)在開(kāi)發(fā)中所用到的ExtJS、Javascript、SSH框架、都是當(dāng)今成熟的先進(jìn)的流行的技術(shù)，因此在技術(shù)上可行。由于系統(tǒng)的規(guī)模小，因此在經(jīng)濟(jì)上可行。系統(tǒng)設(shè)計(jì)的功能模塊為：用戶(hù)管理、藥品管理、購(gòu)物車(chē)功能、訂單管理、及郵件管理等。

以管理員身份為例，通過(guò)部分具有代表性的功能展示、重點(diǎn)功能的實(shí)現(xiàn)詳解、演示系統(tǒng)實(shí)現(xiàn)增刪改功能，以及介紹所用到的組件、屬性，來(lái)全面的介紹系統(tǒng)的實(shí)現(xiàn)。管理員登陸成功后擁有用戶(hù)管理、藥品管理、訂單管理、郵箱管理四大模塊，下面分別詳細(xì)介紹。

3.1 用戶(hù)管理

此功能中按鈕的監(jiān)聽(tīng)，數(shù)據(jù)校驗(yàn)不通過(guò)時(shí)注冊(cè)按鈕無(wú)法點(diǎn)擊，通過(guò)Ext.form.FormPanel面板的monitorValid：true，屬性開(kāi)通監(jiān)聽(tīng)，在按鈕組件中添加屬性formBind：true來(lái)指定監(jiān)聽(tīng)的對(duì)象，從而實(shí)現(xiàn)數(shù)據(jù)不符合條件不能點(diǎn)擊注冊(cè)。添加時(shí)的數(shù)據(jù)校驗(yàn)，在此系統(tǒng)中所用到的Ext.form.TextField組件（文本框）時(shí)，均進(jìn)行數(shù)據(jù)的輸入驗(yàn)證。數(shù)據(jù)的輸入驗(yàn)證可通過(guò)組件自帶的屬性vtype（驗(yàn)證格式）進(jìn)行自動(dòng)校驗(yàn)，以vtypeText屬性中的定義提醒消息。也可通過(guò)maxLength、minLength屬性控制最大長(zhǎng)度及最小長(zhǎng)度，分別以minLengthText、maxLengthText定義不符合要求時(shí)的提示消息。還可以通過(guò)regex屬性定義正則表達(dá)式進(jìn)行驗(yàn)證，以regexText屬性定義不符合要求時(shí)的提示消息。以上是通過(guò)此功能介紹此系統(tǒng)的數(shù)據(jù)校驗(yàn)三種方法。

3.2藥品管理

管理員登陸成功后選擇藥品管理模塊中的藥品查詢(xún)功能，查詢(xún)用戶(hù)中介紹了表單的上面的工具欄，再次介紹表單的下面的工具欄，下面有五個(gè)按鈕，分別是：第一頁(yè)、上一頁(yè)、下一頁(yè)、最后一頁(yè)、頁(yè)面刷新。數(shù)據(jù)由Ext.grid.GridPanel組件顯示，顯示的數(shù)據(jù)起始索引以及每頁(yè)數(shù)目由Ext.grid.GridPanel組件中的bbar定義的Ext.PagingToolbar（分頁(yè)工具欄）中的store、pageSize屬性進(jìn)行配置。

用戶(hù)的修改功能是在用戶(hù)的查詢(xún)功能的基礎(chǔ)上完成的，除了具有查詢(xún)功能外，數(shù)據(jù)的顯示已不是Ext.grid.GridPanel組件，而是Ext.grid.EditorGridPanel組件（可編輯），商品的修改有兩種方式，一種通過(guò)表單的雙擊編輯點(diǎn)擊表單上邊的工具欄中的“保存”按鈕進(jìn)行修改，第二種選中整條數(shù)據(jù)后點(diǎn)擊“修改”按鈕，彈出Ext.Window面板布局的修改彈框，如圖所示。數(shù)據(jù)的輸入均進(jìn)行校驗(yàn)。

3.3 訂單管理

訂單的查詢(xún)運(yùn)用了兩次Ext.grid.GridPanel組件，顯示訂單數(shù)據(jù)集訂單詳情數(shù)據(jù)。同樣需要請(qǐng)求不同的action。訂單詳情的查詢(xún)依據(jù)訂單id，再次必須得到訂單id，id的得到通過(guò)Ext.grid.GridPanel組件的.getStore（）.getAt（0）方法得到選中的整個(gè)數(shù)據(jù)，通過(guò)get（）方法得到訂單id數(shù)據(jù)，get（）方法中的name值與自己定義的訂單邏輯結(jié)構(gòu)中的name值保持一致。訂單數(shù)據(jù)可以依據(jù)支付費(fèi)用排序，排序的實(shí)現(xiàn)是通過(guò)定義列模型Ext.grid.ColumnModel的sortable屬性實(shí)現(xiàn)。

3.4 郵件管理

實(shí)現(xiàn)郵箱信息的查看和修改。點(diǎn)擊管理員管理界面的單位用戶(hù)管理，進(jìn)入管理界面查看郵件設(shè)置信息：點(diǎn)擊已設(shè)郵箱查看發(fā)件E-mail地址和密碼，收件E-mail地址修改郵件設(shè)置：輸入發(fā)件E-mail地址和密碼，收件E-mail地址，點(diǎn)擊提交。

4 結(jié)論

通過(guò)對(duì)SSH框架的改進(jìn)使得程序的代碼邏輯更加清晰，ExtJS前端開(kāi)發(fā)的代碼量大大減少，而功能卻更加豐富，界面更加美觀(guān)。數(shù)據(jù)通過(guò)Ajax技術(shù)實(shí)現(xiàn)交互，實(shí)現(xiàn)界面無(wú)刷新的與后臺(tái)進(jìn)行數(shù)據(jù)交互界面動(dòng)態(tài)變化。頁(yè)面的布局通過(guò)引用組件，使得頁(yè)面布局邏輯更加直觀(guān)。Ajax技術(shù)訪(fǎng)問(wèn)action，通過(guò)Json技術(shù)框架的轉(zhuǎn)化，使得得到的數(shù)據(jù)格式簡(jiǎn)單更加易于讀寫(xiě)且清晰直觀(guān)。綜上所述，改進(jìn)后的架構(gòu)的優(yōu)點(diǎn)：耦合度低，植入性好，MVC模式結(jié)構(gòu)清晰，開(kāi)發(fā)者只需關(guān)注業(yè)務(wù)的實(shí)現(xiàn)等優(yōu)點(diǎn)。另外改進(jìn)后的SSH框架也解決的改進(jìn)之前如下缺點(diǎn)：數(shù)據(jù)前臺(tái)與后臺(tái)交互時(shí)，參數(shù)很多時(shí)action類(lèi)會(huì)變得很臃腫，而且界面的UI很不容易做到用戶(hù)體驗(yàn)的感知度；改進(jìn)后的SSH框架數(shù)據(jù)交互更加易于讀寫(xiě)，界面UI輕松地做到了美觀(guān)，有效的解決的SSH框架改進(jìn)前的缺點(diǎn)。

參考文獻(xiàn)：

[1] 覃國(guó)蓉. 基于B/S架構(gòu)的軟件項(xiàng)目實(shí)訓(xùn)[M]. 北京：電子工業(yè)出版社，2004：12-30.

[2] 李小玲. 管理信息系統(tǒng)開(kāi)發(fā)中C/S模式和B/S模式的比較[J]. 林區(qū)教學(xué)，2013（199）：83-84.

[3] 畢建信. 基于MVC設(shè)計(jì)模式的Web應(yīng)用研究與實(shí)現(xiàn)[D]. 武漢：武漢理工大學(xué)，2006：12-25.

[4] 楊志剛. MVC模式在辦公自動(dòng)化信息系統(tǒng)中的研究與應(yīng)用[D]. 太原：太原理工大學(xué)，2011：11-21.

[5] 劉淑珍， 王文帥， 齊法制. 基于MVC模式的研究所評(píng)審系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 核電子學(xué)與探測(cè)技術(shù)，2014， 34（1）：59-62.

[6] 王珊， 薩師煊. 數(shù)據(jù)庫(kù)系統(tǒng)概論[M]. 北京：高等教育出版社，2006：13-29.

[7] 蔡雷. 數(shù)據(jù)庫(kù)查詢(xún)語(yǔ)言SQL的語(yǔ)法分析及實(shí)現(xiàn)[D]. 天津：天津大學(xué)，2006：15-21.