收稿日期：2019-03-07修回日期：2019-04-03
基金项目：基金项目：四川省科技厅计划项目（2016GZ0140，2018GZ0177）
作者简介：李凌（1971-），男，四川遂宁人，副教授，主要研究方向：软件技术与旅游信息化；李小锐（1979-），男，四川安岳人，编辑，
硕士研究生，主要研究方向：软件技术与出版信息化。
一种基于MVC 的Web 页面可视化组装框架设计应用
李
凌1，李小锐2，周相兵1，冯
铂2
（1．四川旅游学院信息与工程学院成都610100；2．科学出版社成都有限责任公司技术部成都
610063）
摘
要：针对目前数据可视化应用的需要，
文章设计一种基于MVC 的Web 可视化页面组装框架，主要在MVC 框架支持下，结合JavaScript 和AJAX 技术来实现来自JSON 或REST 的数据可视化，并实现页面静态化为HTML 呈现。因此，从分析这些支持技术、页面组装框架、关键代码和案例四个方面来具体地分析该框架的设计、实现和应用，从而为数据可视化开发者提出一种快速Web 页面组装框架和方法。关键词：数据可视化；MVC ；Web 页面组装框架中图分类号：TP311.52
文献标识码：A
Design and Application of Webpage Visualization Composition Framework
Based on MVC
LI ling 1,LI Xiao-rui 2,ZHOU Xiang-bing 1,FENG Bo 2
(1.School of information and Engineering,Sichuan Tourism University,Chengdu 610100,China;2.Ministry of Technology,Science press Chengdu Company with limited liability,Chengdu 610063,China)
Abstract ：In this paper,according to application requirements of data visualization,a Webpage visualization composition framework based on MVC is designed,which combines JavaScript and AJAX technique in the Web browser.With their aims to perform JSON data sets and achieve data visualization,and the results of the data visualization is static handled with HTML.Therefore,the support technologies,composition framework,key codes and application samples of the data visualization is respectively described and analyzed in order to help developers to provide a fast Webpage composition framework and application methods.
Key words:Data visualization;MVC;Web visualization composition framework
随着大数据在各行各业广泛应用，使基于数据的页面可视化信息比传统页面的直接展现更具有价值性和实用性，但同时也给基于数据的可视化带来了多样性、复杂性和交互性等困难[1-3]；这种基于Web 可视化模式通常是按照不同用户需求将不同计算结果进行实时可视化，但由于数据通常是高维的且数据结构是复杂的等因素[4]，导致不易从中挖掘到满足不同终端的需求信息及其生成满足个性化需求的
Web 页面；另外，由于Web 浏览器本身特征，需要频繁地刷新页面，才能有效处理来自服务端的信息。因此，数据可视化已成为近年来研究前沿且得到应用广泛[5-7]。如文献[8]
在星系坐标下采用标签信息实现高维数据降维，然后以降维来挖掘到前端可视化信息，实现页面可视
化，文献[9]在云-端融合运行平台中实现了Web 页面
可视化重构，实现终端页面可视化，满足应用环境需求。而本文设计应用了一种基于MVC （Model View
Controller ）的Web 可视化页面组装框架（简写为MVCVF ），实现页面动态组装，即在MVC 模式中通过JavaScript 和AJAX （Asynchronous JavaScript And XML ）
技术来操作浏览器内核实现可视化实时刷新页面，并通过DOM （Document Object Model ）实现对JSON
（JavaScript Object Notation ）或REST （Representational State Transfer ）数据更新渲染，
用不同的Session(ID)来区分不同终端用户的Web 页面可视化需求，然后加载CSS （Cascading Style Sheets ）实现前端静态化页面（HTML ）按需呈现。
电脑与信息技术2019年6月
1主要技术概述
所提出的Web页面可视化组装框架（MVCVF）主要涉及技术包括MVC、JavaScript、JQuery库、AJAX、DOM、JSON、CSS和浏览器内核技术。
MVC：是一种以模型、视图与控制器结合的UI （User Interface）设计框架，其中，Model用于处理服务器返回的JSON/REST数据；视图用于渲染页面，实现数据可视化HTML呈现；控制器处理不同URL（Uni-form Resource Locator）的渲染视图、实例化模型、加载并初始化等控制器（Struts中Action），且能够与Spring、Ext JS、Dojo.JS等很好融合。
JavaScript（JS）：是一种基于前端应用的轻量级语言，可直接插入到HTML中，得到了大多数浏览器内核支持。
JQuery库：是一种JS语言扩展库，可以大大简化JS编程，减少代码量，已成JS应用的主导库；或根据前端开发要求，自定义扩展jQuery库，目前已成为编历DOM主要操作语言。在应用时，
首先采用<script type="text/javascript"src="jquery. js"></script>调用JQuery，
然后采用如下格式使用JQuery：
jQuery.命名空间.自定义对象名=function(){
//编写前端页面代码
};
AJAX：是由已有的XHTML、DOM、CSS、JS和XML HttpRequest等前端技术整合的一种前端处理技术，用于将Web页面转换化为具有交互式的Ajax程序，即通过JS来实现XMLHttpRequest对象与服务器间通信后页面异步处理。
<script language="javascript"type="text/javascript">
var异步对象名=new XMLHttpRequest();
open()//用于建立到服务器的新请求。
Send()//用于向服务器发送请求。
abort()//当完成后交互后用于退出当前请求。
readyState//用于提供当前HTML的就绪状态，共有0、1、2、3、4五种状态。
//0表示请求未建立，即没有调用open()；
//1表示请求已建立，但未发送信息，没有开始调用open()；
//2表示请求已发送，调用open()；
//3表示请求在处理中；
//4表示页面响应已完成。
responseText//用于服务器返回的请求响应文本。
</script>
DOM：用于处理与平台和语言无关的基于XML文档内容、结构和样式API（Application Programming In terface），实现对页面内容更新操作，或直接用于访问XML文档（标签）的各个部分；并且在处理过程中，文档用树状结构（tree）来进行内容遍历处理，其中XML 语法的每个组成部分都被表示为树状的一个节点，然后通过DOM抽象接口调用CSS完成页面内容生成；在具体应用时可以使用JQuery中的jQuery data()来处理DOM文档。
JSON：基于纯文本的数据格式且的数据格式非常简单，是目前处理服务器数据的上佳方法，即可用于传输一个简单的String、Number、Boolean等，也可以传输一个数组，或者一个复杂的Object对象通过JS传输到传页面供DOM处理。
CSS：用于表示Web页面样式的标记系统，能用于表示XML文档，表示HTML文档呈现样式，并有效实现页面显示与内容的分离。同时，可以用JavaScript代码来处理CSS，并把CSS代码解析成抽象语法树结构，形成不同风格和内容显示的Web页面。当在HTML页面中使用时，只需把Stylesheets放在HTML页面头部即可。
<link rel="stylesheet"type="text/css"href="存放的相关路径/CSS 名.css"/>
浏览器内核技术：通常，浏览器内核可分为渲染引擎和JavaScript引擎，其中，渲染引擎主要实现页面样式处理，实现不同风格显示；JavaScript引擎主要解析JavaScript代码，实现页面内容处理，实现Web页面的动态交互效果。目前，主流浏览器的内核可分为Tri-dent、Gecko、Blink、Webkit。
2Web页面组装框架设计与原理描述
本文所设计的Web页面组织框架是在JQuery库中通过JavaScript（JS）重新加载DOM，采用JSON将
数
图1MVCVF：基于MVC的Web可视化页面组装结构
·50·jquery是什么功能组件
第27卷第3期
据传输到浏览器中，结合（CSS+DIV（Division））和不同的Session(ID)在浏览器内核支撑下渲染出不同的、新的Web页面，如图1所示是基于MVC的Web可视化页面组装结构图，如图2是Web可视化框架应用结构图。
图2基于MVCVF的应用结构
在图1和图2中，为了使基于MVCVF的应用运行起来，需要通过以下步骤来完成Web框架操作。
（1）终端用户通过HTTP(s)请求MVC框架下的控制器（Controller），用控制器操作用户Session，生成唯一ID，表示为Session(ID)，并根据控制器操作应用要求，操作JSON或REST。
（2）通过Session(ID)激活Web组装框架，生成默认Web页面；若需要组装新Web页面，则MVC各自的主要功能描述如下：
Model：通过Web页面组装组件类操作JSON数据集，并根据Session(ID)获取到需要组件类，然后通过AJAX传输到视图中。
View：操作来自AJAX的JSON数据集，实现视图操作类和页面布局类操作DOM树，完成DOM树渲染和页面布局操作，实现页面数据处理，并结合CSS生成不同风格的Web页面和呈现页面信息。
Controller：通过控制类来完成Web页面可视化操作，即操作Model、Web可视化结构呈现以及Web页面可视化组件组合。
当需要实现Web页面组装时，先将JSON数据集传到可视化组件中，通过浏览器内核完成JS实现数据异步交互（调用JQuery来实现数据操作）和DOM渲染生成Web页面。
（3）在（2）中，通过JS操作JSON数据，实现DOM 树加载，并用AJAX将数据传输到定制好的Web可视化组件中。然后将DOM树和定制好的可视化组件通过可视化类实现DOM树更新，并装载JS和CSS 效果。
（4）再次请求来自服务器的JSON数据，由控制器实时操作可视化结果，实现Web页面可视化，并生成HTML页面，返回至浏览器呈现给终端用户。
特别地，在图1中，描述了基于MVC的Web可视化页面生成原理，在图2中描述了基于MVCVF的应用
原理。
3可视化框架实现
Web可视化组装平台主要由可视化设计主页面、主CSS和布局JS代码组成，如图3-4所示的Web可视化组件页面。
图3Web可视化组装页面
当点击图3顶部上的“生成可视化”，则就可以生成Web页面，如图4所示。
图4由Web可视化组件组装生成的页面
在图3中代码用于描述Web可视化组装平台的操作页面HTML，在HTML中，嵌套了需要调用的CSS 样式表、JS代码库和DIV；当经浏览器内JS解析和渲染后，生成如图4的可视化操作页面。在图4中的“可视化模块”用于规范Web页面布局，即可将页面分为三种类型：一是将页面为一栏，二是将页面按7:3的方式分为两栏，三是将页面按3:4:3的方式分为三栏，并按照分栏比例定制Web可视化组件。
当使用本文所研发的Web可视化页面组装框架组装页面时，第一步，根据Web页面需要，用鼠标将图3中的“可视化模块”中的分栏比例拖曳至组装区；第二步，根据页面生成要求，按照Web可视化组件的比例分别用鼠标拖曳至对应的分栏中。第三步，点击图
3李凌等：一种基于MVC的Web页面可视化组装框架设计应用·51·
电脑与信息技术2019年6月
中的“生成可视化”按钮，由后台程序自动实现页面静态化为HTML，并自动显示到前端浏览器中。
当需要添加新的Web可视化组件时，只需要添加如下代码，并在相应的相对目录中添加相关模块和修改控制可视化操作和样式风格的JS代码和CSS代码即可。
注：红为注释，黄为可修改部分。
4结束语
本文设计与实现了一种基于MVC的Web可视化页面组装框架，该框架可以简单、方便且有效地实现了Web页面自由组装，且能够更灵活更方便、更快捷的构建Web静态页面。据此，通过该框架便捷和有效的特点，还以一个具体案例来进行应用，并给出了具体应用流程和相关的局部关键代码。从面能够快速地进行Web布局调整和维护，并降低Web开发的学习和维护成本。
参考文献：
[1]Keim D.,Qu H.,Ma,K.L.Big-data visualization[J].IEEE
Computer Graphics&Applications,2013(33):20-21.
[2]Perkel J.M.Data visualization tools drive interactivity and repro
ducibility in online publishing[J].Nature,2018(554):,133-134. [3]Huang M.L.,Huang T.H.Zhang,X.A novel virtual node ap-
proach for interactive visual analytics of big datasets in parallel coordinates[J].Future Gener Comp Syst,2015,55.
[4]Shneiderman B.The big picture for big data:Visualization[J].
Science,2014,343,730.
[5]Wu X.,Zhu X.,Wu G.Q.,Ding W.Data mining with big data[J].
IEEE Transactions on Knowledge&Data Engineering2014(
26):97-107.
[6]Kitchin,R.Big data and human geography:Opportunities,chal
lenges and risks[J].Dialogues in human geography2013(3): 262-267.
[7]苗放，周相兵.面向数据体系结构初探[M].科学出版社：北
京,2017.
[8]Kiyadeh A.P.H.,Zamiri A.,Yazdi H.S.,Ghaemi,H.Discernible
visualization of high dimensional data using label information[J].
Appl Soft Comput,2015(27):474-486.
[9]黄罡，刘譞哲，张颖.面向云-端融合的移动互联网应用运行
平台[J].中国科学：信息科学2013(1):002.
关于加入“学术不端文献检测系统”的启事
本刊已正式加入科技期刊“学术不端文献检测系统”，请作者自行对稿件内容进行把关。
编辑部·52·

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。