【摘要】? ? 隨著信息社會的發(fā)展，大數(shù)據(jù)時(shí)代已經(jīng)到來，各行各業(yè)都離不開數(shù)據(jù)支撐，傳統(tǒng)表格展示數(shù)據(jù)不但繁雜且不能夠生動直觀展示相關(guān)數(shù)據(jù)屬性極其特點(diǎn)，同時(shí)基于現(xiàn)階段網(wǎng)站開發(fā)框架繁多，且需要付出大量時(shí)間與精力學(xué)習(xí)，針對編程初學(xué)者或業(yè)務(wù)部門來說，能夠快速開發(fā)出一個(gè)能夠穩(wěn)定運(yùn)行的可視化數(shù)據(jù)平臺頗為復(fù)雜，本文介紹了基于MVC模式開發(fā)可視化網(wǎng)站平臺的設(shè)計(jì)思路與開發(fā)過程，B/S架構(gòu)的前端界面與echarts等開源可視化數(shù)據(jù)圖表相結(jié)合，重點(diǎn)探究詳解相關(guān)技術(shù)關(guān)鍵點(diǎn)，能夠快速開發(fā)一款基于B/S結(jié)構(gòu)的可視化平臺。

【關(guān)鍵詞】? ? MVC模式? ? 數(shù)據(jù)可視化? ? B/S結(jié)構(gòu)? ? echarts

一、系統(tǒng)分析

1.1整體思路

基于MVC模式的可視化數(shù)據(jù)平臺，M即Model，V即View，C即Controller，這三大塊分別對應(yīng)數(shù)據(jù)存儲，前端展示，數(shù)據(jù)操縱，該平臺主要實(shí)現(xiàn)兩個(gè)方面的內(nèi)容，一是能夠操縱數(shù)據(jù)庫進(jìn)行數(shù)據(jù)的增刪改查，這是Controller主要實(shí)現(xiàn)的功能，二是對于數(shù)據(jù)進(jìn)行可視化圖表展示，這是View要實(shí)現(xiàn)的功能;而在數(shù)據(jù)庫與前端界面之間流動的數(shù)據(jù)，則存儲在Model之中，通過使用MVC模式，充分運(yùn)用前端界面、中間處理程序、數(shù)據(jù)庫之間的特點(diǎn)，分層分類相互對應(yīng)。

1.2前端開發(fā)

前端頁面設(shè)計(jì)開發(fā)是整個(gè)可視化平臺的核心，前端頁面主要分為數(shù)據(jù)操作界面和數(shù)據(jù)展示界面，數(shù)據(jù)操作界面主要進(jìn)行數(shù)據(jù)的增刪改等相關(guān)數(shù)據(jù)操作，實(shí)現(xiàn)用戶登錄，數(shù)據(jù)采集，數(shù)據(jù)上報(bào)，數(shù)據(jù)刪除等操作，數(shù)據(jù)展示界面是整個(gè)可視化平臺的窗口，負(fù)責(zé)展示數(shù)據(jù)庫讀取的數(shù)據(jù)。通過運(yùn)用html+css制作前端界面，通過echarts等可視化圖表工具，將數(shù)據(jù)合理展示。

1.3開發(fā)環(huán)境

1. Myeclipse

Myeclipse是一款編程開發(fā)工具，基于Myeclipse可以開發(fā)C/S及B/S模式的應(yīng)用程序或網(wǎng)站，本次可視化平臺主要使用Myeclipse 8.6版本來進(jìn)行網(wǎng)站代碼的編寫測試。

2. MySQL

本次可視化數(shù)據(jù)平臺開發(fā)使用的是MySQL Server5.5數(shù)據(jù)庫，MySQL數(shù)據(jù)庫，體積小源碼開放，使用可視化工具SQLyog進(jìn)行管理之后，更能大大提高對中小型網(wǎng)站開發(fā)數(shù)據(jù)庫的管理與操作。

3. Tomcat

Tomcat服務(wù)器能夠?qū)﹂_發(fā)完成等網(wǎng)站提供發(fā)布并支持頁面訪問，適用于調(diào)試jsp、HTML等頁面與網(wǎng)站，本次本次可視化平臺主要使用Tomcat 7.0.37版本。

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

2.1需求分析

1.系統(tǒng)整體需求

系統(tǒng)整體需求分析主要論證本系統(tǒng)主要實(shí)現(xiàn)的功能，如可視化大數(shù)據(jù)平臺主要實(shí)現(xiàn)的功能是能夠進(jìn)行數(shù)據(jù)采集、數(shù)據(jù)修改最后能夠針對各種數(shù)據(jù)特點(diǎn)以及相關(guān)數(shù)據(jù)格式要求進(jìn)行可視化數(shù)據(jù)顯示。

2.功能模塊需求

功能模塊需求分析主要設(shè)計(jì)分析需要實(shí)現(xiàn)那幾個(gè)功能模塊以及該功能模塊能夠提供什么樣的功能，例如：登錄模塊;數(shù)據(jù)上報(bào)模塊;數(shù)據(jù)更新模塊;數(shù)據(jù)展示模塊;用戶信息管理模塊等等。

3.其他功能需求

其他功能需求分析設(shè)計(jì)主要是區(qū)別于主要功能模塊對數(shù)據(jù)庫進(jìn)行增刪改查的功能，能夠?qū)A(chǔ)功能加以優(yōu)化，或者提供其他方便于用戶使用系統(tǒng)。例如用戶信息管理功能;頁面攔截功能;查詢數(shù)據(jù)分頁顯示;查詢出錯(cuò)顯示功能。

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

1.概念結(jié)構(gòu)設(shè)計(jì)

數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計(jì)主要工作是對需要存儲的數(shù)據(jù)進(jìn)行分析和加工，具體描述一個(gè)存儲對象各方面的屬性特征，例如對用戶表進(jìn)行分析，用戶有用戶名，密碼，姓名，性別，單位，電話，用戶權(quán)限等等屬性，根據(jù)具體系統(tǒng)需要，可以合理分析設(shè)置用戶各類屬性，通過一系列分析論證，將所需要存儲的數(shù)據(jù)對象及其數(shù)據(jù)具現(xiàn)化，形成E-R圖，以便在數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計(jì)時(shí)加以使用。

2.邏輯結(jié)構(gòu)設(shè)計(jì)

數(shù)據(jù)庫邏輯概念設(shè)計(jì)主要內(nèi)容是將數(shù)據(jù)對象的各個(gè)屬性數(shù)值化，確定屬性所屬字段類型，例如用戶名、姓名等是字符串型，在數(shù)據(jù)庫中可以保存為varchar、nvarchar等類型，年齡，電話是整數(shù)型，在數(shù)據(jù)庫中可以保存為為int型，出生年月日是時(shí)間型字符串，在數(shù)據(jù)庫中可以保存為datetime、timstamp等時(shí)間類型字段，根據(jù)不同屬性的特點(diǎn)，選擇相應(yīng)的字段類型。

2.3系統(tǒng)流程設(shè)計(jì)

圖1。

三、系統(tǒng)開發(fā)實(shí)現(xiàn)過程

3.1數(shù)據(jù)庫的創(chuàng)建與連接

1.創(chuàng)建數(shù)據(jù)庫及其數(shù)據(jù)表

根據(jù)數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計(jì)相關(guān)內(nèi)容創(chuàng)建平臺系統(tǒng)數(shù)據(jù)庫及其所屬數(shù)據(jù)表，設(shè)置主鍵、外鍵等數(shù)據(jù)表屬性。

2. Java連接數(shù)據(jù)庫

首先根據(jù)所選用數(shù)據(jù)庫類型及版本在項(xiàng)目中導(dǎo)入合適的JDBC.jar包，JDBC——Java Database Connectivity是Java語言連接方位數(shù)據(jù)庫的應(yīng)用程序接口，它提供了對數(shù)據(jù)庫數(shù)據(jù)查詢、修改等方法。使用jdbc固定格式Class.forName（driverName）;查看調(diào)用JDBC模塊是否調(diào)用成功，其中driverName為所添加JDBC.jar包中driver文件全名稱Connection dbConn = DriverManager.getConnection（dbURL， userName， userPwd）;測試數(shù)據(jù)庫是否連接成功，其中dbURl為數(shù)據(jù)庫地址端口以及數(shù)據(jù)庫名稱，userName、userPwd分別為登錄數(shù)據(jù)庫用戶名密碼。

3.2數(shù)據(jù)對象創(chuàng)建

數(shù)據(jù)對象創(chuàng)建主要實(shí)現(xiàn)MVC模式中的Model模型，根據(jù)數(shù)據(jù)庫邏輯設(shè)計(jì)對對象相關(guān)屬性的設(shè)置，創(chuàng)建對象及其屬性字段，將數(shù)據(jù)定義為private并創(chuàng)建其get（）、set（）方法來來進(jìn)行賦值、取值。

3.3前端頁面實(shí)現(xiàn)

前端界面主要使用jsp+css+js+echarts相關(guān)技術(shù)來實(shí)現(xiàn)，jsp——java server page，其主要實(shí)現(xiàn)的是整個(gè)系統(tǒng)平臺的界面，通過使用css+js編碼實(shí)現(xiàn)頁面布局樣式以及功能，通過使用開源圖表工具echarts來實(shí)現(xiàn)后臺獲取數(shù)據(jù)的可視化。通過使用form表單及其元素來向servlet傳遞其數(shù)據(jù)，其method方法屬性get/post分別對應(yīng)servlet中doget和dopost方法。在數(shù)據(jù)顯示上使用request.getParameter（“XXX”）方法來取得servlet處理返回的數(shù)據(jù)，顯示在echarts圖表上，或是通過taglib標(biāo)簽中c標(biāo)簽文件來迭代顯示存儲在list中的數(shù)據(jù)對象，對于數(shù)據(jù)的展示方法多種多樣，關(guān)鍵是從后臺數(shù)據(jù)庫中成功獲取正確數(shù)據(jù)。

3.4數(shù)據(jù)處理實(shí)現(xiàn)

數(shù)據(jù)處理是整個(gè)系統(tǒng)的關(guān)鍵，通過創(chuàng)建相應(yīng)servlet文件來進(jìn)行數(shù)據(jù)的存取，servlet文件繼承javax.servlet.http.HttpServlet類，其中提供了doget和dopost方法，根據(jù)需求進(jìn)行選擇，關(guān)于doget和dopost方法的使用，doget一般用于URL至servlet的數(shù)據(jù)傳輸，dopost配合使用于form表單并與其method屬性相匹配，在方法中使用request.getParameter（“XXX”）方法來獲取form表單傳遞的值，其中” XXX”與form表單各元素name屬性值相同。使用CreateStatement 或 PrepareStatement創(chuàng)建對象，通過對象調(diào)用executeQuery方法來執(zhí)行sql語句，所得到的的結(jié)果存儲在ResultSet結(jié)果集中，可以通過迭代的方法取出結(jié)果集中所查詢的所有結(jié)果，將所得結(jié)果按照其屬性存儲到所創(chuàng)建的數(shù)據(jù)對象中，如果是多個(gè)對象則將其存入數(shù)據(jù)對象list中，通過request做重定向發(fā)送給需要獲取數(shù)據(jù)的前端jsp頁面。

3.5 MVC整合——功能實(shí)現(xiàn)

整合MVC的基礎(chǔ)是配置web工程的xml文件，通過xml文件將前端jsp頁面與后臺數(shù)據(jù)處理servlet相關(guān)聯(lián)，同時(shí)提供直接訪問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>

每創(chuàng)建一個(gè)servlet就要相應(yīng)的在xml文件中配置其<servlet>和<servlet-mapping>以提供對servlet的調(diào)用和訪問。

在jsp頁面設(shè)置form表單屬性action為對應(yīng)數(shù)據(jù)處理servlet的URL值，以將jsp頁面數(shù)據(jù)發(fā)送至對應(yīng)servlet，或是在瀏覽器地址欄直接訪問servlet返回?cái)?shù)據(jù)對象到j(luò)sp頁面進(jìn)行展示。至此MVC三個(gè)模塊整合完畢，既分離層次又相互關(guān)聯(lián)。

四、結(jié)束語

基于MVC模式的可視化數(shù)據(jù)平臺開發(fā)，雖然在數(shù)據(jù)讀取使用jdbc等工具會造成一定的代碼冗余，但是運(yùn)用MVC將數(shù)據(jù)展示、數(shù)據(jù)存儲、數(shù)據(jù)操縱三個(gè)模塊分離，簡化了編程的概念復(fù)雜程度，提高了開發(fā)效率，合理運(yùn)用echarts等可視化圖表工具，對于數(shù)據(jù)屬性的個(gè)性化展示有了很大的提升，基于MVC模式可視化數(shù)據(jù)平臺開發(fā)設(shè)計(jì)思路，適用于各類數(shù)據(jù)展示系統(tǒng)設(shè)計(jì)開發(fā)，使用的MVC概念比較基礎(chǔ)，可以在此基礎(chǔ)之上運(yùn)用Struts2和SSH等javaEE框架以及數(shù)據(jù)庫存儲過程、游標(biāo)、事務(wù)的數(shù)據(jù)庫技術(shù)，更進(jìn)一步優(yōu)化代碼編寫與模塊分離，提高系統(tǒng)平臺的功能可拓展性和運(yùn)行穩(wěn)定性。

參? 考? 文? 獻(xiàn)

[1]田娟， 徐釗. 基于J2EE的MVC設(shè)計(jì)模式的分析與思考[J]. 計(jì)算機(jī)與現(xiàn)代化， 2010（10）：58-62.

[2]王子毅， 張春海. 基于ECharts的數(shù)據(jù)可視化分析組件設(shè)計(jì)實(shí)現(xiàn)[J]. 微型機(jī)與應(yīng)用， 2016， 35（014）：46-48.

[3]金楓. Web前端MVC框架的意義與前端發(fā)展方向展望[J]. 電腦知識與技術(shù)， 2016， 12（1X）：75-77.

[4]于春娜， 王晨升， 楊光，等. Web前端MVC框架的意義研究[J]. 產(chǎn)業(yè)與科技論壇， 2014， 000（001）：52-53.

左昊（1995.08），男，漢族，河北平山，本科，助理工程師;網(wǎng)絡(luò)工程師（軟考中級），軟件設(shè)計(jì)師（軟考中級），研究方向：軟件開發(fā)設(shè)計(jì)，網(wǎng)絡(luò)運(yùn)維。