基于MVC模式的可视化平台设计与开发

【摘要】    随着信息社会的发展，大数据时代已经到来，各行各业都离不开数据支撑，传统表格展示数据不但繁杂且不能够生动直观展示相关数据属性极其特点，同时基于现阶段网站开发框架繁多，且需要付出大量时间与精力学习，针对编程初学者或业务部门来说，能夠快速开发出一个能够稳定运行的可视化数据平台颇为复杂，本文介绍了基于MVC模式开发可视化网站平台的设计思路与开发过程，B/S架构的前端界面与echarts等开源可视化数据图表相结合，重点探究详解相关技术关键点，能够快速开发一款基于B/S结构的可视化平台。

【关键词】    MVC模式    数据可视化    B/S结构    echarts

一、系统分析

1.1整体思路

基于MVC模式的可视化数据平台，M即Model，V即View，C即Controller，这三大块分别对应数据存储，前端展示，数据操纵，该平台主要实现两个方面的内容，一是能够操纵数据库进行数据的增删改查，这是Controller主要实现的功能，二是对于数据进行可视化图表展示，这是View要实现的功能;而在数据库与前端界面之间流动的数据，则存储在Model之中，通过使用MVC模式，充分运用前端界面、中间处理程序、数据库之间的特点，分层分类相互对应。

1.2前端开发

前端页面设计开发是整个可视化平台的核心，前端页面主要分为数据操作界面和数据展示界面，数据操作界面主要进行数据的增删改等相关数据操作，实现用户登录，数据采集，数据上报，数据删除等操作，数据展示界面是整个可视化平台的窗口，负责展示数据库读取的数据。通过运用html+css制作前端界面，通过echarts等可视化图表工具，将数据合理展示。

1.3开发环境

1. Myeclipse

Myeclipse是一款编程开发工具，基于Myeclipse可以开发C/S及B/S模式的应用程序或网站，本次可视化平台主要使用Myeclipse 8.6版本来进行网站代码的编写测试。

2. MySQL

本次可视化数据平台开发使用的是MySQL Server5.5数据库，MySQL数据库，体积小源码开放，使用可视化工具SQLyog进行管理之后，更能大大提高对中小型网站开发数据库的管理与操作。

3. Tomcat

Tomcat服务器能够对开发完成等网站提供发布并支持页面访问，适用于调试jsp、HTML等页面与网站，本次本次可视化平台主要使用Tomcat 7.0.37版本。

二、系统设计

2.1需求分析

1.系统整体需求

系统整体需求分析主要论证本系统主要实现的功能，如可视化大数据平台主要实现的功能是能够进行数据采集、数据修改最后能够针对各种数据特点以及相关数据格式要求进行可视化数据显示。

2.功能模块需求

功能模块需求分析主要设计分析需要实现那几个功能模块以及该功能模块能够提供什么样的功能，例如：登录模块;数据上报模块;数据更新模块;数据展示模块;用户信息管理模块等等。

3.其他功能需求

其他功能需求分析设计主要是区别于主要功能模块对数据库进行增删改查的功能，能够对基础功能加以优化，或者提供其他方便于用户使用系统。例如用户信息管理功能;页面拦截功能;查询数据分页显示;查询出错显示功能。

2.2数据库设计

1.概念结构设计

数据库概念结构设计主要工作是对需要存储的数据进行分析和加工，具体描述一个存储对象各方面的属性特征，例如对用户表进行分析，用户有用户名，密码，姓名，性别，单位，电话，用户权限等等属性，根据具体系统需要，可以合理分析设置用户各类属性，通过一系列分析论证，将所需要存储的数据对象及其数据具现化，形成E-R图，以便在数据库逻辑结构设计时加以使用。

2.逻辑结构设计

数据库逻辑概念设计主要内容是将数据对象的各个属性数值化，确定属性所属字段类型，例如用户名、姓名等是字符串型，在数据库中可以保存为varchar、nvarchar等类型，年龄，电话是整数型，在数据库中可以保存为为int型，出生年月日是时间型字符串，在数据库中可以保存为datetime、timstamp等时间类型字段，根据不同属性的特点，选择相应的字段类型。

2.3系统流程设计

图1。

三、系统开发实现过程

3.1数据库的创建与连接

1.创建数据库及其数据表

根据数据库逻辑结构设计相关内容创建平台系统数据库及其所属数据表，设置主键、外键等数据表属性。

2. Java连接数据库

首先根据所选用数据库类型及版本在项目中导入合适的JDBC.jar包，JDBC——Java Database Connectivity是Java语言连接方位数据库的应用程序接口，它提供了对数据库数据查询、修改等方法。使用jdbc固定格式Class.forName（driverName）;查看调用JDBC模块是否调用成功，其中driverName为所添加JDBC.jar包中driver文件全名称Connection dbConn = DriverManager.getConnection（dbURL， userName， userPwd）;测试数据库是否连接成功，其中dbURl为数据库地址端口以及数据库名称，userName、userPwd分别为登录数据库用户名密码。

3.2数据对象创建

数据对象创建主要实现MVC模式中的Model模型，根据数据库逻辑设计对对象相关属性的设置，创建对象及其属性字段，将数据定义为private并创建其get（）、set（）方法来来进行赋值、取值。

3.3前端页面实现

前端界面主要使用jsp+css+js+echarts相关技术来实现，jsp——java server page，其主要实现的是整个系统平台的界面，通过使用css+js编码实现页面布局样式以及功能，通过使用开源图表工具echarts来实现后台获取数据的可视化。通过使用form表单及其元素来向servlet传递其数据，其method方法属性get/post分别对应servlet中doget和dopost方法。在数据显示上使用request.getParameter（“XXX”）方法来取得servlet处理返回的数据，显示在echarts图表上，或是通过taglib标签中c标签文件来迭代显示存储在list中的数据对象，对于数据的展示方法多种多样，关键是从后台数据库中成功获取正确数据。

3.4数据处理实现

数据处理是整个系统的关键，通过创建相应servlet文件来进行数据的存取，servlet文件继承javax.servlet.http.HttpServlet类，其中提供了doget和dopost方法，根据需求进行选择，关于doget和dopost方法的使用，doget一般用于URL至servlet的数据传输，dopost配合使用于form表单并与其method属性相匹配，在方法中使用request.getParameter（“XXX”）方法来获取form表单传递的值，其中” XXX”与form表单各元素name属性值相同。使用CreateStatement 或 PrepareStatement创建对象，通过对象调用executeQuery方法来执行sql语句，所得到的的结果存储在ResultSet结果集中，可以通过迭代的方法取出结果集中所查询的所有结果，将所得结果按照其属性存储到所创建的数据对象中，如果是多个对象则将其存入数据对象list中，通过request做重定向发送给需要获取数据的前端jsp页面。

3.5 MVC整合——功能实现

整合MVC的基础是配置web工程的xml文件，通过xml文件将前端jsp页面与后台数据处理servlet相关联，同时提供直接访问servlet的URL地址，具体配置如下：

<servlet>

<！--为servlet取名-->

<servlet-name>displayServlet</servlet-name>

<！--servlet的包名+类名-->

<servlet-class>src.displayServlet</servlet-class>

</servlet>

<servlet-mapping>

<！—与上面servlet名称相同-->

<servlet-name>displayServlet</servlet-name>

<！--访问servlet的URL地址-->

<url-pattern>/displayServlet</url-pattern>

</servlet-mapping>

每创建一个servlet就要相应的在xml文件中配置其<servlet>和<servlet-mapping>以提供对servlet的调用和访问。

在jsp页面设置form表单属性action为对应数据处理servlet的URL值，以将jsp页面数据发送至对应servlet，或是在瀏览器地址栏直接访问servlet返回数据对象到jsp页面进行展示。至此MVC三个模块整合完毕，既分离层次又相互关联。

四、结束语

基于MVC模式的可视化数据平台开发，虽然在数据读取使用jdbc等工具会造成一定的代码冗余，但是运用MVC将数据展示、数据存储、数据操纵三个模块分离，简化了编程的概念复杂程度，提高了开发效率，合理运用echarts等可视化图表工具，对于数据属性的个性化展示有了很大的提升，基于MVC模式可视化数据平台开发设计思路，适用于各类数据展示系统设计开发，使用的MVC概念比较基础，可以在此基础之上运用Struts2和SSH等javaEE框架以及数据库存储过程、游标、事务的数据库技术，更进一步优化代码编写与模块分离，提高系统平台的功能可拓展性和运行稳定性。

参  考  文  献

[1]田娟， 徐钊. 基于J2EE的MVC设计模式的分析与思考[J]. 计算机与现代化， 2010（10）：58-62.

[2]王子毅， 张春海. 基于ECharts的数据可视化分析组件设计实现[J]. 微型机与应用， 2016， 35（014）：46-48.

[3]金枫. Web前端MVC框架的意义与前端发展方向展望[J]. 电脑知识与技术， 2016， 12（1X）：75-77.

[4]于春娜， 王晨升， 杨光，等. Web前端MVC框架的意义研究[J]. 产业与科技论坛， 2014， 000（001）：52-53.

左昊（1995.08），男，汉族，河北平山，本科，助理工程师;网络工程师（软考中级），软件设计师（软考中级），研究方向：软件开发设计，网络运维。