基于MVC模式的可視化平臺(tái)設(shè)計(jì)與開(kāi)發(fā)

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

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

一、系統(tǒng)分析

1.1整體思路

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

1.2前端開(kāi)發(fā)

前端頁(yè)面設(shè)計(jì)開(kāi)發(fā)是整個(gè)可視化平臺(tái)的核心，前端頁(yè)面主要分為數(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è)可視化平臺(tái)的窗口，負(fù)責(zé)展示數(shù)據(jù)庫(kù)讀取的數(shù)據(jù)。通過(guò)運(yùn)用html+css制作前端界面，通過(guò)echarts等可視化圖表工具，將數(shù)據(jù)合理展示。

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

1. Myeclipse

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

2. MySQL

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

3. Tomcat

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

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

2.1需求分析

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

系統(tǒng)整體需求分析主要論證本系統(tǒng)主要實(shí)現(xiàn)的功能，如可視化大數(shù)據(jù)平臺(tái)主要實(shí)現(xiàn)的功能是能夠進(jìn)行數(shù)據(jù)采集、數(shù)據(jù)修改最后能夠針對(duì)各種數(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ū)別于主要功能模塊對(duì)數(shù)據(jù)庫(kù)進(jìn)行增刪改查的功能，能夠?qū)A(chǔ)功能加以優(yōu)化，或者提供其他方便于用戶使用系統(tǒng)。例如用戶信息管理功能;頁(yè)面攔截功能;查詢數(shù)據(jù)分頁(yè)顯示;查詢出錯(cuò)顯示功能。

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

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

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

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

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

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

圖1。

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

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

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

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

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

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

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

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

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

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

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

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

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

整合MVC的基礎(chǔ)是配置web工程的xml文件，通過(guò)xml文件將前端jsp頁(yè)面與后臺(tái)數(shù)據(jù)處理servlet相關(guān)聯(lián)，同時(shí)提供直接訪問(wèn)servlet的URL地址，具體配置如下：

<servlet>

<！--為servlet取名-->

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

<！--servlet的包名+類(lèi)名-->

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

</servlet>

<servlet-mapping>

<！—與上面servlet名稱(chēng)相同-->

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

<！--訪問(wèn)servlet的URL地址-->

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

</servlet-mapping>

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

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

四、結(jié)束語(yǔ)

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

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

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