【摘要】? ? 隨著信息社會(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)維。