基于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.

[责任编辑：李书培]