基于SSM框架的社区环境数据可视化系统

杨鹏飞 郭鸿湧 赵继军

摘要：为了更高效地对社区的环境数据进行管理和直观的展示，提高社区管理系统的使用效率，该文以PM2.5、O2、SO2等社区的环境数据为对象，基于Spring，SpringMVC和Mybatis框架设计了社区环境数据可视化管理系统。前端以Bootstrap为框架，ECharts作为可视化组件实现系统的主要功能。结果表明，该数据可视化系统具有性能良好、数据展示直观、代码复用率高的特性。

关键词：环境数据;SSM框架;可视化;ECharts

中图分类号：TP391 文献标识码：A

文章编号：1009-3044（2020）12-0099-03

1背景

随着社会信息化的发展，信息化的管理深入到社会的各个方面，然而基础信息设备采集的大量数据让传统的社区管理系统很难满足高效的管理和直观的展现。随着国内外可视化技术逐渐地成熟化，图形图表的形式能给用户更加直观的理解数据，数据信息得以高效呈现。本文以社区环境数据为可视化的对象，构建一个管理高效、展示直观的社区可视化系统。

2SSM框架介绍

SSM（Sping+SpingMVC+MyBatis）框架由Sping、MyBatis两个开源框架整合而成，SpingMVC是Spring中的一部分，其结构图如图1所示。

2.1Spring

Spring框架是由于企业级应用开发的复杂性而创建的。早在2002年，Rod Johnson重新审视现有的J2EE技术标准，创立了轻量级框架Spring。之后Sping成为应用最广泛的Java EE框架之一，其核心思想是面向切面变成（AOP）和控制反转（IoC），它并不依赖特殊的JavaEE规范，不需要特殊容器，也不提供某种功能。Sping将所有组件部署到其中并执行、管理和维护这些组件，因此Spring是轻量级的容器。

2.2SpringMVC

MVC模式通过分离程序的数据部分，逻辑部分和显示部分达到解除耦合。模型作为三个部件的核心，提供给多个视图使用，它在数据发生变更时与视图交互，且模型返回与数据的格式无关。视图是可视化界面，由JSP、HTML、XML等组成，展示模型以及将用户的输入信息发送到控制器。控制器负责从视图获取数据，向模型发送数据，不同的数据交由不同的模型进行处理，自身不处理任何数据，最后将数据返回给用户。

SpringMVC是多款优秀MVC中的一种，将模型层、控制层与视图层分离，它具有代码复用性高、配置方式直接等特点。只需花费一小部分精力搭建框架，而把重点工作放在系统业务上，这样能大大提升开发效率。

2.3MyBatis

MyBatis是基于Java的持久层框架，它的前身是iBatis。它支持定制化SQL、存储过程以及高级映射，允许用户利用数据库的复杂查询和专有特性。其中的SQL Map组件使用XML配置文件将Java Bean映射成SQL语句，通过执行SQL语句获取Java Bean等对象，大大降低了数据库访问代码的冗余性，从而提高代码的复用率。

3系统需求分析

系统可视化涉及的环境数据包括CO、NO2、PM2.5、SO2和O3数据信息。由于数据源的多样性，系统需要支持多数据源信息的集成。其次，社区可视化系统需要考虑可扩展性和跨平台性，所以采用MVC软件架构模式，将系统业务逻辑、访问数据库和可视化展示进行分离。采用SSM框架降低耦合度，从而减少系统复杂度，提高系统整体的开发效率。为了简化前端开发工作，达到渲染效果更好，用户与系统交互能力更强的效果，系统采用Bootstrap作为系统开发的前端框架，该框架支持响应式布局，让系统更好配适手机、平板电脑和PC机。系统需要直观呈现给用户整体的环境数据，开源的ECharts提供丰富的图形图表，将文本和数字信息转化为更加直观的信息，加快用户对信息的理解和吸收能力。

4系统设计

4.1系统架构

系统采用适用于用户数量较多的B/S模式，MySQL数据库存储数据。系统整体框架结构图如图2所示。

4.2功熊模块

根据社区环境可视化系统的应用的全方位需求分析，确定了系统的各个业务功能。该系统由用户登录，系统管理和环境数据的展示三个模块，系统功能图如图3所示。

4.3数据库设计

根据需求分析设计存储用户信息的数据表和环境数据CO、NO2、PM2.5、SO2和O3数据信息。系统涉及的主要表有用户表、环境数据类型表，环境数据表，具体的数据库表如图4所示：

5系统关键功能实现

5.1数据源配适

数据源数据库开放请求数据的API，社区环境数据可视化系统利用带有秘钥的url发出连接请求。连接成功后，数据源返回Json格式的环境数据，存储在本地MySQL数据库中。返回的json数据格式如下：

5.2环境数据的可视化

在该系统中采用bootstrap作为前端框架，Ajax异步调用的方式，通过调用后台的数据信息，将环境数据返回至前台，利用Echarts组件将环境数据一图形化形式展现在前台页面中。具体配置方式为：

1）在前端展示的jsp界面中通过标签方式直接引入构建好的ECharts、iQuery、Bootstrap的jsp文件;

2）准备一个宽高适中的DOM容器，通过init方法初始化ECharts。

3）通過setOption配置环境数据的异步加载。

4）默认二维表配置方式为X坐标轴类型为category，Y坐标轴类型为value，对应数据。Y坐标轴名称显示位置为middle。

6系统测试

为了验证系统的功能，根据需求分析设计出以下测试用例。采用黑盒测试完成系统的功能性测试。

启动Tomcat服务器，显示出登录页面如图5所示：

输入用户名和密码，成功跳转到环境数据的操作界面。成功跳转后的系统操作界面如图6所示：

向数据源请求数据，并以图表的形式展现在浏览器界面，以PM2.5为例，展示界面如图7所示：

通过多次测试，该系统满足社区用户直观、高效的查看社区的环境数据。

7结束语

系统整体由SSM框架构建，数据库采用MySQL，Bootstrap作为前端框架。SSM框架将系统分为数据持久层、业务逻辑层和表现层，整体系统的代码复用性高，扩展性能好。系统测试中着重测试系统请求数据源数据和社区环境数据的展示效果。在由Bootstrap作为框架，ECharts作为可视化组件的前端展示界面中，用户能清楚、快速、直观的查环境历史数据和实时数据。综上所述，本系统具有易于移植，界面直观简洁，对用户具有友好操作性。但是系统负荷由于开发周期的限制还未考虑，后期还需进行改进。