基于ExtJS的氣象資料管理系統設計

宋云飛+郭彩蓮+趙冰燕

【摘 要】闡述了氣象資料管理系統的設計與實現，介紹了系統開發過程。基于ExtJs框架對本系統進行開發，實現頁面展示，通過MVC的設計模式來減少代碼的復雜度，達到高聚合低耦合的效果，從而提高系統的可維護性。

【關鍵詞】ExtJS；MVC；氣象資料管理系統

0 前言

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

1 ExtJS簡介

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

1.1 ExtJS的特點

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

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

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

1.2 ExtJS基本功能

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

2 MVC架構模式

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

2.1 模型（Model）

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

2.2 視圖（View）

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

2.3 控制器（Controller）

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

3 氣象資料管理系統設計

3.1 系統開發工具的選取

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

3.2 系統整體結構設計

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

3.3 系統中使用的ExtJS相關組件

設計系統時，首先要把握系統框架結構，本系統采用ExtJS4.2.1中的border布局 ，使用時需要將ExtJS包引入到工程項目中。本系統使用的基本組件如表1：

表1 基本組件

3.4 系統前臺頁面展示設計

頁面的最上面部分為系統的標題區域，中間分為三個區域。

中間的區域為數據展示區，可以通過選取時間和站號進行資料的查詢。最右側為摘要數據顯示區，可以顯示相關的統計信息，如：臺站數、最高溫度、最低溫度等。而頁面的最下方為系統的版權信息。

4 結語

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

【參考文獻】

[1]陳浩.基于ExtJS技術的酒店管理系統設計與實現[J].內蒙古電大學刊，2013（4）：13-15.

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

[3]張軍鋒，汪健雄，賈新茹.基于ExtJS框架的數據維護系統設計與實現[J].鐵路計算機應用，2010（01）：27-30.

[4]宋轉玲，劉海行，代亮等.基于ExtJS開發的海洋科學數據共享服務平臺[J].研究報告，2010（02）：4-9.

[5]衛軍，夏慧軍，孟臘春. ExtJS Web應用程序開發指南（第2版）[M].北京：機械工業出版社，2011.

[6]馬青青，于洪濤，雷娟娟.基于ExtJS的網管系統設計與實現[J]. 電子設計工程，2016（5）：62-65.

[責任編輯：李書培]