楊鵬飛 郭鴻湧 趙繼軍

摘要：為了更高效地對(duì)社區(qū)的環(huán)境數(shù)據(jù)進(jìn)行管理和直觀的展示，提高社區(qū)管理系統(tǒng)的使用效率，該文以PM2.5、O2、SO2等社區(qū)的環(huán)境數(shù)據(jù)為對(duì)象，基于Spring，SpringMVC和Mybatis框架設(shè)計(jì)了社區(qū)環(huán)境數(shù)據(jù)可視化管理系統(tǒng)。前端以Bootstrap為框架，ECharts作為可視化組件實(shí)現(xiàn)系統(tǒng)的主要功能。結(jié)果表明，該數(shù)據(jù)可視化系統(tǒng)具有性能良好、數(shù)據(jù)展示直觀、代碼復(fù)用率高的特性。

關(guān)鍵詞：環(huán)境數(shù)據(jù);SSM框架;可視化;ECharts

中圖分類號(hào)：TP391 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）12-0099-03

1背景

隨著社會(huì)信息化的發(fā)展，信息化的管理深入到社會(huì)的各個(gè)方面，然而基礎(chǔ)信息設(shè)備采集的大量數(shù)據(jù)讓傳統(tǒng)的社區(qū)管理系統(tǒng)很難滿足高效的管理和直觀的展現(xiàn)。隨著國(guó)內(nèi)外可視化技術(shù)逐漸地成熟化，圖形圖表的形式能給用戶更加直觀的理解數(shù)據(jù)，數(shù)據(jù)信息得以高效呈現(xiàn)。本文以社區(qū)環(huán)境數(shù)據(jù)為可視化的對(duì)象，構(gòu)建一個(gè)管理高效、展示直觀的社區(qū)可視化系統(tǒng)。

2SSM框架介紹

SSM（Sping+SpingMVC+MyBatis）框架由Sping、MyBatis兩個(gè)開(kāi)源框架整合而成，SpingMVC是Spring中的一部分，其結(jié)構(gòu)圖如圖1所示。

2.1Spring

Spring框架是由于企業(yè)級(jí)應(yīng)用開(kāi)發(fā)的復(fù)雜性而創(chuàng)建的。早在2002年，Rod Johnson重新審視現(xiàn)有的J2EE技術(shù)標(biāo)準(zhǔn)，創(chuàng)立了輕量級(jí)框架Spring。之后Sping成為應(yīng)用最廣泛的Java EE框架之一，其核心思想是面向切面變成（AOP）和控制反轉(zhuǎn)（IoC），它并不依賴特殊的JavaEE規(guī)范，不需要特殊容器，也不提供某種功能。Sping將所有組件部署到其中并執(zhí)行、管理和維護(hù)這些組件，因此Spring是輕量級(jí)的容器。

2.2SpringMVC

MVC模式通過(guò)分離程序的數(shù)據(jù)部分，邏輯部分和顯示部分達(dá)到解除耦合。模型作為三個(gè)部件的核心，提供給多個(gè)視圖使用，它在數(shù)據(jù)發(fā)生變更時(shí)與視圖交互，且模型返回與數(shù)據(jù)的格式無(wú)關(guān)。視圖是可視化界面，由JSP、HTML、XML等組成，展示模型以及將用戶的輸入信息發(fā)送到控制器?？刂破髫?fù)責(zé)從視圖獲取數(shù)據(jù)，向模型發(fā)送數(shù)據(jù)，不同的數(shù)據(jù)交由不同的模型進(jìn)行處理，自身不處理任何數(shù)據(jù)，最后將數(shù)據(jù)返回給用戶。

SpringMVC是多款優(yōu)秀MVC中的一種，將模型層、控制層與視圖層分離，它具有代碼復(fù)用性高、配置方式直接等特點(diǎn)。只需花費(fèi)一小部分精力搭建框架，而把重點(diǎn)工作放在系統(tǒng)業(yè)務(wù)上，這樣能大大提升開(kāi)發(fā)效率。

2.3MyBatis

MyBatis是基于Java的持久層框架，它的前身是iBatis。它支持定制化SQL、存儲(chǔ)過(guò)程以及高級(jí)映射，允許用戶利用數(shù)據(jù)庫(kù)的復(fù)雜查詢和專有特性。其中的SQL Map組件使用XML配置文件將Java Bean映射成SQL語(yǔ)句，通過(guò)執(zhí)行SQL語(yǔ)句獲取Java Bean等對(duì)象，大大降低了數(shù)據(jù)庫(kù)訪問(wèn)代碼的冗余性，從而提高代碼的復(fù)用率。

3系統(tǒng)需求分析

系統(tǒng)可視化涉及的環(huán)境數(shù)據(jù)包括CO、NO2、PM2.5、SO2和O3數(shù)據(jù)信息。由于數(shù)據(jù)源的多樣性，系統(tǒng)需要支持多數(shù)據(jù)源信息的集成。其次，社區(qū)可視化系統(tǒng)需要考慮可擴(kuò)展性和跨平臺(tái)性，所以采用MVC軟件架構(gòu)模式，將系統(tǒng)業(yè)務(wù)邏輯、訪問(wèn)數(shù)據(jù)庫(kù)和可視化展示進(jìn)行分離。采用SSM框架降低耦合度，從而減少系統(tǒng)復(fù)雜度，提高系統(tǒng)整體的開(kāi)發(fā)效率。為了簡(jiǎn)化前端開(kāi)發(fā)工作，達(dá)到渲染效果更好，用戶與系統(tǒng)交互能力更強(qiáng)的效果，系統(tǒng)采用Bootstrap作為系統(tǒng)開(kāi)發(fā)的前端框架，該框架支持響應(yīng)式布局，讓系統(tǒng)更好配適手機(jī)、平板電腦和PC機(jī)。系統(tǒng)需要直觀呈現(xiàn)給用戶整體的環(huán)境數(shù)據(jù)，開(kāi)源的ECharts提供豐富的圖形圖表，將文本和數(shù)字信息轉(zhuǎn)化為更加直觀的信息，加快用戶對(duì)信息的理解和吸收能力。

4系統(tǒng)設(shè)計(jì)

4.1系統(tǒng)架構(gòu)

系統(tǒng)采用適用于用戶數(shù)量較多的B/S模式，MySQL數(shù)據(jù)庫(kù)存儲(chǔ)數(shù)據(jù)。系統(tǒng)整體框架結(jié)構(gòu)圖如圖2所示。

4.2功熊模塊

根據(jù)社區(qū)環(huán)境可視化系統(tǒng)的應(yīng)用的全方位需求分析，確定了系統(tǒng)的各個(gè)業(yè)務(wù)功能。該系統(tǒng)由用戶登錄，系統(tǒng)管理和環(huán)境數(shù)據(jù)的展示三個(gè)模塊，系統(tǒng)功能圖如圖3所示。

4.3數(shù)據(jù)庫(kù)設(shè)計(jì)

根據(jù)需求分析設(shè)計(jì)存儲(chǔ)用戶信息的數(shù)據(jù)表和環(huán)境數(shù)據(jù)CO、NO2、PM2.5、SO2和O3數(shù)據(jù)信息。系統(tǒng)涉及的主要表有用戶表、環(huán)境數(shù)據(jù)類型表，環(huán)境數(shù)據(jù)表，具體的數(shù)據(jù)庫(kù)表如圖4所示：

5系統(tǒng)關(guān)鍵功能實(shí)現(xiàn)

5.1數(shù)據(jù)源配適

數(shù)據(jù)源數(shù)據(jù)庫(kù)開(kāi)放請(qǐng)求數(shù)據(jù)的API，社區(qū)環(huán)境數(shù)據(jù)可視化系統(tǒng)利用帶有秘鑰的url發(fā)出連接請(qǐng)求。連接成功后，數(shù)據(jù)源返回Json格式的環(huán)境數(shù)據(jù)，存儲(chǔ)在本地MySQL數(shù)據(jù)庫(kù)中。返回的json數(shù)據(jù)格式如下：

5.2環(huán)境數(shù)據(jù)的可視化

在該系統(tǒng)中采用bootstrap作為前端框架，Ajax異步調(diào)用的方式，通過(guò)調(diào)用后臺(tái)的數(shù)據(jù)信息，將環(huán)境數(shù)據(jù)返回至前臺(tái)，利用Echarts組件將環(huán)境數(shù)據(jù)一圖形化形式展現(xiàn)在前臺(tái)頁(yè)面中。具體配置方式為：

1）在前端展示的jsp界面中通過(guò)標(biāo)簽方式直接引入構(gòu)建好的ECharts、iQuery、Bootstrap的jsp文件;

2）準(zhǔn)備一個(gè)寬高適中的DOM容器，通過(guò)init方法初始化ECharts。

3）通過(guò)setOption配置環(huán)境數(shù)據(jù)的異步加載。

4）默認(rèn)二維表配置方式為X坐標(biāo)軸類型為category，Y坐標(biāo)軸類型為value，對(duì)應(yīng)數(shù)據(jù)。Y坐標(biāo)軸名稱顯示位置為middle。

6系統(tǒng)測(cè)試

為了驗(yàn)證系統(tǒng)的功能，根據(jù)需求分析設(shè)計(jì)出以下測(cè)試用例。采用黑盒測(cè)試完成系統(tǒng)的功能性測(cè)試。

啟動(dòng)Tomcat服務(wù)器，顯示出登錄頁(yè)面如圖5所示：

輸入用戶名和密碼，成功跳轉(zhuǎn)到環(huán)境數(shù)據(jù)的操作界面。成功跳轉(zhuǎn)后的系統(tǒng)操作界面如圖6所示：

向數(shù)據(jù)源請(qǐng)求數(shù)據(jù)，并以圖表的形式展現(xiàn)在瀏覽器界面，以PM2.5為例，展示界面如圖7所示：

通過(guò)多次測(cè)試，該系統(tǒng)滿足社區(qū)用戶直觀、高效的查看社區(qū)的環(huán)境數(shù)據(jù)。

7結(jié)束語(yǔ)

系統(tǒng)整體由SSM框架構(gòu)建，數(shù)據(jù)庫(kù)采用MySQL，Bootstrap作為前端框架。SSM框架將系統(tǒng)分為數(shù)據(jù)持久層、業(yè)務(wù)邏輯層和表現(xiàn)層，整體系統(tǒng)的代碼復(fù)用性高，擴(kuò)展性能好。系統(tǒng)測(cè)試中著重測(cè)試系統(tǒng)請(qǐng)求數(shù)據(jù)源數(shù)據(jù)和社區(qū)環(huán)境數(shù)據(jù)的展示效果。在由Bootstrap作為框架，ECharts作為可視化組件的前端展示界面中，用戶能清楚、快速、直觀的查環(huán)境歷史數(shù)據(jù)和實(shí)時(shí)數(shù)據(jù)。綜上所述，本系統(tǒng)具有易于移植，界面直觀簡(jiǎn)潔，對(duì)用戶具有友好操作性。但是系統(tǒng)負(fù)荷由于開(kāi)發(fā)周期的限制還未考慮，后期還需進(jìn)行改進(jìn)。