宋云飛+郭彩蓮+趙冰燕

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

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

0 前言

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

1 ExtJS簡介

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

1.1 ExtJS的特點(diǎn)

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

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

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

1.2 ExtJS基本功能

ExtJS的主要功能包括：對(duì)標(biāo)準(zhǔn)信息提示框的擴(kuò)展、對(duì)標(biāo)準(zhǔn)表單組件的擴(kuò)展、支持版面及各種布局方式、提供了大量的工具類和工具方法、提供了增強(qiáng)的時(shí)間機(jī)制、提供美觀使用的各種組件。

2 MVC架構(gòu)模式

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

2.1 模型（Model）

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

2.2 視圖（View）

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

2.3 控制器（Controller）

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

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

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

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

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

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

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

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

表1 基本組件

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

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

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

4 結(jié)語

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

【參考文獻(xiàn)】

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

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

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

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

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

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

[責(zé)任編輯：李書培]