基于ExtJS的氣象資料管理系統(tǒng)設(shè)計

宋云飛+郭彩蓮+趙冰燕

【摘 要】闡述了氣象資料管理系統(tǒng)的設(shè)計與實現(xiàn)，介紹了系統(tǒng)開發(fā)過程?；贓xtJs框架對本系統(tǒng)進行開發(fā)，實現(xiàn)頁面展示，通過MVC的設(shè)計模式來減少代碼的復(fù)雜度，達到高聚合低耦合的效果，從而提高系統(tǒng)的可維護性。

【關(guān)鍵詞】ExtJS；MVC；氣象資料管理系統(tǒng)

0 前言

隨著信息技術(shù)的發(fā)展，氣象資料逐漸數(shù)據(jù)化，因此對這些數(shù)據(jù)的管理顯得越來越重要了。氣象數(shù)據(jù)的友好展示對于數(shù)據(jù)使用者來說尤為重要。ExtJS是一個用JavaScript語言編寫的用于瀏覽器UI開發(fā)的Ajax框架，具有良好的用戶體驗。本資料管理系統(tǒng)主要基于ExtJS進行設(shè)計。

1 ExtJS簡介

ExtJS是用JavaScript、CSS和HTML等技術(shù)實現(xiàn)的主要用于創(chuàng)建用戶界面，且與后臺技術(shù)無關(guān)的前端Ajax框架，還被用來開發(fā)RIA（富客戶端）的web應(yīng)用。而ExtJS的前身是YUI（Yahoo User Interface），它是一個使用JavaScript編寫的工具和控件庫。

1.1 ExtJS的特點

首先，ExtJS對多種瀏覽器兼容性很好，可以兼容IE、Google Chrome、360、FireFox等瀏覽器。

其次，ExtJS具有豐富的組件、控件庫，如容器、面板、表格、數(shù)等，用戶可以直接調(diào)用。

最后，框架提供了控件的可擴展機制，可在繼承父類的基礎(chǔ)上，創(chuàng)建新的類構(gòu)造器，增加新的屬性、方法，從而構(gòu)造新的控件。

1.2 ExtJS基本功能

ExtJS的主要功能包括：對標準信息提示框的擴展、對標準表單組件的擴展、支持版面及各種布局方式、提供了大量的工具類和工具方法、提供了增強的時間機制、提供美觀使用的各種組件。

2 MVC架構(gòu)模式

本系統(tǒng)采用MVC的架構(gòu)模式。MVC， 是模型（model）-視圖（view）-控制器（controller）的縮寫，一種軟件設(shè)計典范，用于組織代碼用一種業(yè)務(wù)邏輯和數(shù)據(jù)顯示分離的方法，這個方法的假設(shè)前提是如果業(yè)務(wù)邏輯被聚集到一個部件里面，而且界面和用戶圍繞數(shù)據(jù)的交互能被改進和個性化定制而不需要重新編寫業(yè)務(wù)邏輯MVC被獨特的發(fā)展起來用于映射傳統(tǒng)的輸入、處理和輸出功能在一個邏輯的圖形化用戶界面的結(jié)構(gòu)中。 MVC設(shè)計模提高了ExtJS的代碼編寫的獨立性和代碼修改的方便性。

2.1 模型（Model）

用于封裝業(yè)務(wù)邏輯。業(yè)務(wù)邏輯的處理過程對于其它層來說屬于暗箱操作，模型接受視圖請求的數(shù)據(jù)，并返回最終的結(jié)果給控制器，最后提交相應(yīng)的視圖進行顯示。模型的設(shè)計可以說是MVC的核心。

2.2 視圖（View）

視圖屬于展示層，主要實現(xiàn)與用戶交互的界面。對于老式的WEB應(yīng)用程序來說，它指的就是html的各個元素組成的界面。在新的WEB應(yīng)用程序中，又增加了許多腳本語言，如Javascript等。

2.3 控制器（Controller）

控制器用于邏輯處理、控制實體數(shù)據(jù)在視圖上展示、調(diào)用模型處理業(yè)務(wù)請求。當web用戶單擊web頁面中的提交按鈕來發(fā)送HTML表單時，控制器接收請求并調(diào)用相應(yīng)的模型組件去處理請求，然后調(diào)用相應(yīng)的視圖來顯示模型返回的數(shù)據(jù)。

3 氣象資料管理系統(tǒng)設(shè)計

3.1 系統(tǒng)開發(fā)工具的選取

本系統(tǒng)的開發(fā)工具使用MyEclipse，MyEclipse的功能非常強大，支持也十分廣泛，尤其是對各種開源產(chǎn)品的支持十分不錯。MyEclipse目前支持Java、AJAX、JSP、Struts、Spring、Hibernate、JDBC數(shù)據(jù)庫鏈接工具等多項功能。

3.2 系統(tǒng)整體結(jié)構(gòu)設(shè)計

本系統(tǒng)前臺用ExtJS編寫，采用MVC框架，而后臺程序使用Java語言。Application入口加載控制器，控制器加載視圖作為系統(tǒng)頁面展示，從store中獲取數(shù)據(jù)在前臺頁面顯示。在這里視圖展示和數(shù)據(jù)獲取是分離的，這樣系統(tǒng)會有較高的可維護性。前臺的數(shù)據(jù)通過后臺的sql連接程序進行獲取，這樣也避免了頻繁連接數(shù)據(jù)庫而造成的系統(tǒng)安全隱患。下圖為本系統(tǒng)設(shè)計的結(jié)構(gòu)圖：

3.3 系統(tǒng)中使用的ExtJS相關(guān)組件

設(shè)計系統(tǒng)時，首先要把握系統(tǒng)框架結(jié)構(gòu)，本系統(tǒng)采用ExtJS4.2.1中的border布局 ，使用時需要將ExtJS包引入到工程項目中。本系統(tǒng)使用的基本組件如表1：

表1 基本組件

3.4 系統(tǒng)前臺頁面展示設(shè)計

頁面的最上面部分為系統(tǒng)的標題區(qū)域，中間分為三個區(qū)域。

中間的區(qū)域為數(shù)據(jù)展示區(qū)，可以通過選取時間和站號進行資料的查詢。最右側(cè)為摘要數(shù)據(jù)顯示區(qū)，可以顯示相關(guān)的統(tǒng)計信息，如：臺站數(shù)、最高溫度、最低溫度等。而頁面的最下方為系統(tǒng)的版權(quán)信息。

4 結(jié)語

設(shè)計本系統(tǒng)主要是為了氣象資料的管理，方便資料的統(tǒng)一展示和使用。結(jié)合使用三層架構(gòu)模式，使用ExtJS進行視圖展示和數(shù)據(jù)調(diào)用。由于本系統(tǒng)的功能還不夠完善，因此還需要繼續(xù)改進。本文中所使用的AJAX框架ExtJS已開始在Web項目中得到推廣，相信會在以后的開發(fā)中有著很好的前景。

【參考文獻】

[1]陳浩.基于ExtJS技術(shù)的酒店管理系統(tǒng)設(shè)計與實現(xiàn)[J].內(nèi)蒙古電大學刊，2013（4）：13-15.

[2]任偉，林曉東.基于Spring框架和ExtJS的藥品庫房管理系統(tǒng)實現(xiàn)[J].計算機工程與設(shè)計，2009（18）：4312-4314.

[3]張軍鋒，汪健雄，賈新茹.基于ExtJS框架的數(shù)據(jù)維護系統(tǒng)設(shè)計與實現(xiàn)[J].鐵路計算機應(yīng)用，2010（01）：27-30.

[4]宋轉(zhuǎn)玲，劉海行，代亮等.基于ExtJS開發(fā)的海洋科學數(shù)據(jù)共享服務(wù)平臺[J].研究報告，2010（02）：4-9.

[5]衛(wèi)軍，夏慧軍，孟臘春. ExtJS Web應(yīng)用程序開發(fā)指南（第2版）[M].北京：機械工業(yè)出版社，2011.

[6]馬青青，于洪濤，雷娟娟.基于ExtJS的網(wǎng)管系統(tǒng)設(shè)計與實現(xiàn)[J]. 電子設(shè)計工程，2016（5）：62-65.

[責任編輯：李書培]