方 敏,趙 峰

(江蘇徐工工程機械研究院有限公司,徐州 221004)

設(shè)計數(shù)據(jù)、試驗數(shù)據(jù)、仿真數(shù)據(jù)構(gòu)成企業(yè)的研發(fā)數(shù)據(jù),研發(fā)數(shù)據(jù)作為企業(yè)核心的知識資產(chǎn),其科學的管理方式對企業(yè)高效應(yīng)用這些數(shù)據(jù)至關(guān)重要.近年來,隨著計算機科學、軟件工程等技術(shù)的發(fā)展,信息化方式成為提升企業(yè)研發(fā)數(shù)據(jù)管理的最有效手段.試驗數(shù)據(jù)作為對設(shè)計數(shù)據(jù)的驗證支撐,其重要度不言而喻[1].

目前,國內(nèi)市場上已有很多對于試驗數(shù)據(jù)管理的解決方案和軟件系統(tǒng).但多數(shù)系統(tǒng)都是采用傳統(tǒng)的網(wǎng)站構(gòu)建方式進行搭建的,其主要缺點如下[2]：

(1)每次用戶進行請求操作時,都需要重新加載整個頁面,如果頁面很大,服務(wù)器又繁忙,或者網(wǎng)絡(luò)連接很慢,頁面就會出現(xiàn)“閃爍”現(xiàn)象,可能會持續(xù)好幾秒鐘甚至是更長時間.

(2)數(shù)據(jù)處理過程、驗證、授權(quán)和持久存儲等大多數(shù)應(yīng)用邏輯都在服務(wù)器端,服務(wù)器端壓力大,對大部分的用戶輸入的響應(yīng),必須等待一個“請求/響應(yīng)/重繪”的循環(huán)周期,網(wǎng)頁響應(yīng)慢[3].

(3)針對不同的客戶端,如平板電腦、臺式計算機、智能手機等,往往需要分別進行處理開發(fā),兼容性較差.

針對傳統(tǒng)網(wǎng)頁構(gòu)建模式所帶來的缺點,本文從網(wǎng)頁構(gòu)建架構(gòu)模式作為切入點,提出基于單頁面應(yīng)用技術(shù)(SPA)架構(gòu)構(gòu)建管理系統(tǒng)的方法,通過MVC 框架、HTML、AngularJS 等網(wǎng)絡(luò)信息技術(shù)的綜合應(yīng)用,設(shè)計開發(fā)出類似原生態(tài)界面風格的試驗數(shù)據(jù)管理系統(tǒng).從底層系統(tǒng)架構(gòu)層面根本上改善上述描述的問題.

1 相關(guān)概念

1.1 試驗數(shù)據(jù)管理系統(tǒng)概念

試驗數(shù)據(jù)管理系統(tǒng),行業(yè)內(nèi)稱之為TDM (Test Data Management)[4],其研究的是試驗業(yè)務(wù)的數(shù)字化管理技術(shù),主要圍繞試驗數(shù)據(jù)管理、試驗流程管理、試驗資源管理,實現(xiàn)試驗業(yè)務(wù)從試驗發(fā)起到報告發(fā)放的信息化管理,構(gòu)建覆蓋試驗全流程、全數(shù)據(jù)、全資源的試驗業(yè)務(wù)管理平臺.

(1)全流程管理：覆蓋試驗業(yè)務(wù)全生命周期各個環(huán)節(jié),管理從試驗發(fā)起、試驗準備、試驗執(zhí)行、試驗處理全過程中所涉及的各個業(yè)務(wù)對象.以流程為導向,指引試驗開展過程,支撐試驗業(yè)務(wù)順利高效執(zhí)行；以任務(wù)管理為方法,串聯(lián)試驗發(fā)起人、審核人及執(zhí)行人等,實現(xiàn)試驗全過程的實時跟蹤；以企業(yè)制度規(guī)范為約束,管理試驗相關(guān)的執(zhí)行過程、數(shù)據(jù)格式、報告模板等,標準化管理試驗全過程.

(2)全資源管理：覆蓋試驗所有相關(guān)資源,如試驗人員、試驗設(shè)備、試驗樣品、試驗知識等.以資源對象為基點,建立各資源對象的信息臺賬看板,數(shù)字化管理試驗資源的基本信息、使用信息、維護保養(yǎng)信息、檢定信息等.運用系統(tǒng)結(jié)構(gòu)化管理試驗知識,建立企業(yè)試驗知識庫,關(guān)聯(lián)相關(guān)試驗信息,最終基于系統(tǒng)實現(xiàn)企業(yè)試驗知識的積累、共享[5].

(3)全數(shù)據(jù)管理：覆蓋試驗業(yè)務(wù)所涉及的各類數(shù)據(jù),如試驗原始數(shù)據(jù)、過程數(shù)據(jù)、結(jié)果數(shù)據(jù).以數(shù)據(jù)集中存儲為基礎(chǔ),建立全數(shù)據(jù)的結(jié)構(gòu)化管理,支撐試驗報告的生成；以數(shù)據(jù)應(yīng)用為目標,結(jié)合各類分析工具,深度挖掘數(shù)據(jù)潛在價值；以數(shù)據(jù)多維度展示為方法,提供360 度全景式數(shù)據(jù)查看機制,指導企業(yè)試驗運營分析[6].

1.2 SPA(單頁面應(yīng)用)概念

單頁面Web 應(yīng)用(Single-page Web Application),簡稱為SPA[7],是指用戶在加載單個HTML 頁面并在用戶與應(yīng)用程序交互時動態(tài)更新該頁面的應(yīng)用程序.SPA 主要體現(xiàn)在瀏覽器端,應(yīng)用到的技術(shù)主要是HTML+CSS+JavaScript,使用SPA 模式構(gòu)建的網(wǎng)站在瀏覽器端第一次會加載所有程序文件,而后續(xù)所有的刷新都不會重新加載所有文件,而只加載訪問請求的文件,因此請求響應(yīng)更快.

圖1展示了SPA 網(wǎng)站構(gòu)建的常規(guī)模式,在此模式中,將網(wǎng)頁視圖的創(chuàng)建和管理從服務(wù)器端解耦出來,移到UI 層(用戶接口層),這導致的結(jié)果即是除非在服務(wù)器端需要處理部分渲染,否則服務(wù)器端將不會收到數(shù)據(jù)呈現(xiàn)方面的請求.SPA 整體設(shè)計與傳統(tǒng)Web 應(yīng)用設(shè)計相似,主要的不同點在于：沒有整頁刷新、表現(xiàn)邏輯位于客戶端,服務(wù)器端的事務(wù)處理可以只涉及數(shù)據(jù).

圖1 SPA 網(wǎng)站構(gòu)建模式

SPA 模式與傳統(tǒng)模式相較體現(xiàn)的具體優(yōu)勢包括：用戶體驗好、快,改變內(nèi)容不需要重新加載整個頁面；服務(wù)器端只提供數(shù)據(jù),不用展示邏輯和頁面合成,提高性能；單頁面應(yīng)用支持跨平臺,可以在電腦、手機和平板電腦等設(shè)備上使用.

1.3 MVC 概念

MVC 模式是“Model-View-Controller”的縮寫,中文翻譯為“模型-視圖-控制器”,應(yīng)用于用戶交互應(yīng)用程序中[8].MVC 把一個應(yīng)用的輸入、處理、輸出流程按照Model、View、Controller 的方式進行分離,這樣一個應(yīng)用被分成三個層：模型層、視圖層和控制層[9].

MVC 的運行機制是：事件導致控制器改變模型或視圖,或者同時改變兩者.當控制器改變了模型中的數(shù)據(jù)或者屬性時,所有依賴的視圖都會自動更新；當控制器改變了視圖,視圖會從潛在的模型中獲取數(shù)據(jù)來刷新自己[10].圖2展示的是MVC 模式的各組件內(nèi)容和工作原理[11].

圖2 MVC 模式工作原理

運用MVC 模式進行軟件設(shè)計具有以下優(yōu)勢：低耦合性,高內(nèi)聚性；高復(fù)用性；可維護性高；代碼管理更簡便.

2 試驗數(shù)據(jù)管理系統(tǒng)業(yè)務(wù)分析

2.1 企業(yè)試驗數(shù)據(jù)管理現(xiàn)狀

工程機械企業(yè)一般都建立了自己的零部件和整機實驗室,經(jīng)過多年積累,試驗數(shù)據(jù)量比較大,但是在數(shù)據(jù)存儲及安全、試驗執(zhí)行效率、試驗管理水平、試驗數(shù)據(jù)分析應(yīng)用等方面存在短板.

(1)數(shù)據(jù)存儲及安全：試驗設(shè)備未聯(lián)網(wǎng),試驗數(shù)據(jù)存儲分散,個人數(shù)據(jù)存儲于個人電腦,沒有集中管控；數(shù)據(jù)傳輸未管控,未進行數(shù)據(jù)備份,數(shù)據(jù)安全存在隱患；數(shù)據(jù)、報表等查詢不便.

(2)試驗執(zhí)行效率：流程簽審線下執(zhí)行,人工“跑簽”影響簽審效率；試驗業(yè)務(wù)進度無法監(jiān)控.

(3)試驗管理水平：作為管理者,無法快速調(diào)度試驗人員、設(shè)備等資源；無法實現(xiàn)試驗資源使用信息快速一覽,進行成本分析；無法實現(xiàn)試驗任務(wù)臺賬式管理,全面了解企業(yè)試驗運營情況.

(4)試驗數(shù)據(jù)挖掘分析應(yīng)用：試驗數(shù)據(jù)沒有集中管控,數(shù)據(jù)價值挖掘基礎(chǔ)條件不成熟,無法實現(xiàn)基于大數(shù)據(jù)的應(yīng)用分析,價值挖掘.

2.2 試驗數(shù)據(jù)管理系統(tǒng)功能建設(shè)

針對企業(yè)面臨的問題,結(jié)合當前TDM 行業(yè)經(jīng)驗,設(shè)計出符合企業(yè)現(xiàn)狀的試驗數(shù)據(jù)管理系統(tǒng)功能架構(gòu),主要功能包括：試驗任務(wù)管理、試驗流程管理、試驗數(shù)據(jù)管理、試驗設(shè)備管理、試驗樣品管理、試驗報告管理、試驗計劃管理等.針對不同的角色設(shè)定不同的訪問門戶.圖3所示為根據(jù)業(yè)務(wù)需求搭建的試驗數(shù)據(jù)管理系統(tǒng)功能架構(gòu).

圖3 試驗數(shù)據(jù)管理系統(tǒng)功能架構(gòu)

3 系統(tǒng)框架設(shè)計

系統(tǒng)采用的是B/S 架構(gòu),即瀏覽器/服務(wù)器架構(gòu),用戶可以基于本地瀏覽器進行服務(wù)器訪問.系統(tǒng)設(shè)計采用的框架是SPA,如之前所描述,在SPA 框架中,服務(wù)器端只處理數(shù)據(jù)模型,瀏覽器端處理業(yè)務(wù)邏輯和視圖展示.SPA 主要體現(xiàn)在瀏覽器端,所以本文將研究重點放在前端,服務(wù)器端詳細設(shè)計不在研究范圍內(nèi),我們只需要了解本文所描述系統(tǒng)的服務(wù)器端與前端通信采用的是MVC 框架.

3.1 系統(tǒng)功能框架

依據(jù)實際的業(yè)務(wù)需要,本文所設(shè)計的試驗業(yè)務(wù)管理系統(tǒng)整體建設(shè)框架如圖4所示,可以將其分為以下五層.

(1)網(wǎng)絡(luò)環(huán)境層：此類涉及到企業(yè)核心數(shù)據(jù)的系統(tǒng)一般都需要構(gòu)建統(tǒng)一的網(wǎng)絡(luò)環(huán)境,并且是獨立的局域網(wǎng),其要滿足兩個要求,一是所有與試驗相關(guān)的IT 終端都需要并入此網(wǎng)；二是要確保此局域網(wǎng)的安全.

(2)數(shù)據(jù)庫層：系統(tǒng)采用的企業(yè)級的Oracle 服務(wù)器,并且提供文件服務(wù),支持文件的存儲和管理.

(3)平臺層：指相關(guān)支撐功能,如權(quán)限控制、查詢引擎、業(yè)務(wù)建模、流程引擎等.

(4)應(yīng)用層：系統(tǒng)的主要業(yè)務(wù)功能層,主要包括試驗數(shù)據(jù)管理、試驗流程管理、試驗設(shè)備管理、試驗報告管理、試驗樣品管理等.

(5)界面接口層：系統(tǒng)提供基于角色的用戶訪問策略,并提供響應(yīng)API 接口和其他外接接口,用以與其他系統(tǒng)、工具的集成.

圖4 系統(tǒng)建設(shè)框架

3.2 系統(tǒng)整體視圖布局

符合通用業(yè)務(wù)情況的試驗數(shù)據(jù)管理系統(tǒng)的主要功能主要有我的空間、試驗任務(wù)管理、試驗數(shù)據(jù)管理、工時管理、任務(wù)跟蹤、設(shè)備管理、業(yè)務(wù)管理、系統(tǒng)管理等.總體視圖布局主要涵蓋四個部分,即頁頭區(qū)、導航區(qū)、內(nèi)容區(qū)和頁腳區(qū).頁頭區(qū)用來放置系統(tǒng)的logo 圖標和用戶賬號管理；導航區(qū)主要作用是放置訪問每個視圖的鏈接；內(nèi)容區(qū)用來展示每個視圖的詳細內(nèi)容；而頁腳區(qū)則是顯示其他相關(guān)信息,如聯(lián)系方式、站點管理等.

整個頁面采用的是SPA 構(gòu)建方式,用戶通過賬號密碼登陸系統(tǒng)后,初次訪問會與服務(wù)器通信,獲取相關(guān)文件,數(shù)據(jù)傳輸格式主要是JSON 格式,初次登陸會刷新整個頁面,加載頁面所有內(nèi)容.而訪問導航區(qū)所鏈接的條目時,并不會重復(fù)刷新整個頁面,只是獲取當前導航條目所對應(yīng)的服務(wù)器端數(shù)據(jù),然后刷新當前視圖即可.這種網(wǎng)頁構(gòu)建方式將會大大加快頁面的加載速度,提升用戶使用感受.

4 SPA 導航

4.1 Shell 外殼頁面

單頁面應(yīng)用程序的“單頁面”指的是初始HTML 頁面,或被稱為Shell(外殼頁面).這個HTML 頁面加載且僅加載一次,它是充當應(yīng)用程序其余部分的起始點.在SPA 應(yīng)用中,這是唯一全頁面加載的時機.應(yīng)用后續(xù)部分的加載將動態(tài)并獨立于Shell 頁面進行,無須全頁面加載,不讓用戶感受到頁面的刷新.Shell 頁面在結(jié)構(gòu)上保持最小化,并通常包含一個空＜div＞標簽,該標簽容納應(yīng)用程序其余內(nèi)容.Shell 頁面文件可看作其他應(yīng)用視圖的母艦.關(guān)鍵代碼：

上述即為單頁面應(yīng)用Shell 外殼頁面的HTML 代碼,主要作用：加載應(yīng)用程序樣式表；加載第三方腳本文件；初始＜div＞容器標簽.

4.2 SPA 導航設(shè)計

SPA 的DOM 元素通常是作為SPA index 頁面中的Shell 的起點.SPA 模塊及MVC 框架,包括支持庫,都跟index 頁面一同下載.當用戶導航時,視圖無縫呈現(xiàn).整個應(yīng)用展示過程更加平滑,極大提升用戶體驗.舊頁面被清除,然后下載顯示新頁面所帶來的粗糙體驗已不復(fù)存在.一旦初始頁面加載了,SPA 的各種動作都不需要重復(fù)刷新它.

然而,在SPA 應(yīng)用加載后用戶需要有一種方式來訪問應(yīng)用的其他內(nèi)容.即通過SPA 導航來實現(xiàn).

圖5展示的就是SPA 導航的基本過程.以用戶請求“任務(wù)跟蹤”視圖為例,當用戶在前端點擊導航欄中的“任務(wù)跟蹤”時,會產(chǎn)生一個固定的URL,路由器會根據(jù)配置路由對該URL 進行匹配,如果匹配不上,將會配對默認路由,在前端顯示默認路由視圖；如果匹配上,將會根據(jù)匹配的路由運行相應(yīng)的代碼、功能函數(shù),并調(diào)用匹配的視圖,在前端進行展示.關(guān)鍵代碼：

＄urlRouterProvider.otherwis(‘/myspace/MyTDM/2 17705104’)；}

上述為路由配置關(guān)鍵代碼,主要作用：定義模塊,并導入ui-router,對服務(wù)進行參數(shù)初始化；定義前端頁面導航欄所設(shè)計的如“我的空間”、“試驗任務(wù)管理”、“試驗任務(wù)跟蹤”等的路由,包括路由名稱、URL 地址及視圖模板；定義行為缺省路由,即登陸系統(tǒng)后的默認路由,這里設(shè)置的默認路由是“我的空間”.

5 應(yīng)用模塊程序設(shè)計

本文所述SPA 構(gòu)建的試驗業(yè)務(wù)管理系統(tǒng)是通過MVC 框架的JavaScript 框架風格來實踐的.1.3 節(jié)已經(jīng)詳細描述MVC 框架的原理及優(yōu)勢,本文所設(shè)計系統(tǒng)采用Angular JS 進行開發(fā).因涉及的應(yīng)用模塊較多,本文嘗試用“試驗任務(wù)跟蹤”模塊來描述如何使用MVC 框架來進行模塊設(shè)計.

5.1 模塊(Module)定義

每個應(yīng)用模塊都有一個定義文件,名為module.js.該文件主要定義模塊的名稱,引用的其它模塊和模塊的入口及跳轉(zhuǎn)路徑等.下面是tasktrack 模塊的module.js 的定義.關(guān)鍵代碼：

上述代碼主要作用：定義模塊的主要狀態(tài),包括模塊名：app.tasktrack.tasklist.URL 是

5.2 應(yīng)用模塊視圖(View)程序?qū)崿F(xiàn)

針對“試驗任務(wù)跟蹤”應(yīng)用模塊,用戶關(guān)注的屬性包括名稱、進度、狀態(tài)、負責人、開始時間、結(jié)束時間等.如圖6所示,設(shè)計的主內(nèi)容視圖基本可以用表格來標示.

圖6 試驗任務(wù)跟蹤視圖

關(guān)鍵代碼：

視圖代碼段主要作用：

配置前端顯示界面,并在內(nèi)容區(qū)繪制相應(yīng)表格,通過表達式{{row.Progress}}、{{row.Status}}等綁定顯示數(shù)據(jù)庫中的對象屬性.

5.3 應(yīng)用模塊邏輯(Controller)程序?qū)崿F(xiàn)

要能夠使用路由參數(shù)傳進來的信息,每個框架或庫都會提供相關(guān)的代碼訪問方式.AngularJS 提供了相應(yīng)的＄stateParams 對象.下述代碼展示了控制器對該變量的訪問方式.

在“試驗任務(wù)跟蹤”應(yīng)用模塊中,傳進來的路由參數(shù)將匹配應(yīng)用模塊的數(shù)據(jù)庫(dbschema)、數(shù)據(jù)類(taskclass)、哈希碼(pickoid),并通過接口服務(wù)taskTrackService 從服務(wù)器獲取模塊具體數(shù)據(jù),填充到＄scope 變量,以讓視圖顯示信息.

關(guān)鍵代碼：

此部分代碼主要作用：定義控制器的名稱為“TaskListCtrl”和所屬的模塊為“app.tasktrack”.其中taskTrackService 提供數(shù)據(jù)庫操作的接口；初始化變量；調(diào)用taskTrackService 的接口從數(shù)據(jù)庫獲得任務(wù)數(shù)據(jù).

每個應(yīng)用模塊基本上都要與后端服務(wù)的API 打交道.為了更好地復(fù)用代碼,將與后端服務(wù)交互的代碼封裝為Angular 的Service.“試驗任務(wù)跟蹤”應(yīng)用模塊將與后端服務(wù)交互的代碼封裝在taskTrackService 中.類似于試驗業(yè)務(wù)管理這類系統(tǒng),一般都是需要持久化存儲數(shù)據(jù),也就是要存在數(shù)據(jù)庫里,所以大部分數(shù)據(jù)模型都是映射后臺傳過來的JSON 對象.只有前端需要緩存數(shù)據(jù)時才會考慮設(shè)計模型(Model),用于跨模塊或Controller 使用.“試驗任務(wù)跟蹤”應(yīng)用模塊沒有將返回的數(shù)據(jù)進行轉(zhuǎn)換或暫存在內(nèi)存中,因而不需要定義數(shù)據(jù)模型.

圖7 試驗任務(wù)跟蹤最終界面展示

6 實踐與結(jié)果分析

通過前面方法,我們設(shè)計開發(fā)出試驗數(shù)據(jù)管理系統(tǒng)所有應(yīng)用模塊,其中“試驗任務(wù)跟蹤”模塊最終前端界面展示如圖7所示.在左側(cè)導航欄直接點擊試驗任務(wù)跟蹤(Task Track)條目,在不刷新整個頁面的基礎(chǔ)上,右側(cè)顯示任務(wù)跟蹤的詳細內(nèi)容.

6.1 定義測試環(huán)境

客戶端硬件：惠普Z240 Workstation,內(nèi)存16 GB.

客戶端軟件環(huán)境：Windows 7 操作系統(tǒng),火狐瀏覽器(版本：52.3.0(32 位)).

網(wǎng)絡(luò)帶寬：1000 M.

6.2 測試結(jié)果

在同樣測試環(huán)境下,同一人使用同一個客戶端進行登陸測試.測試首頁整頁加載時間和單頁面應(yīng)用視圖加載時間.

通過測試發(fā)現(xiàn),整頁加載需要加載各類HTML、JS、CSS、XHR、圖像等文件,本文設(shè)計系統(tǒng)共計45 個請求.單應(yīng)用模塊加載內(nèi)容主要是與服務(wù)器端溝通的XHR 對象,本文設(shè)計系統(tǒng)“試驗任務(wù)跟蹤”模塊加載請求僅15 個.對比結(jié)果如圖8所示.

進行10 次對比測試,結(jié)果如圖9所示.通過測試發(fā)現(xiàn),單模塊視圖加載速度明顯快于整頁面加載速度,并且在頁面視圖呈現(xiàn)上更加平滑.

圖8 整頁加載與單模塊加載內(nèi)容及時間對比

圖9 網(wǎng)頁加載速度測試

7 總結(jié)與展望

本文針對工程機械行業(yè)試驗業(yè)務(wù)的特點,以及傳統(tǒng)網(wǎng)站構(gòu)建方式的弊端,提出了基于SPA 架構(gòu)構(gòu)建管理系統(tǒng)的方法,通過MVC 框架、HTML、AngularJS等網(wǎng)絡(luò)信息技術(shù)的綜合應(yīng)用,設(shè)計開發(fā)出類似原生態(tài)界面風格的試驗數(shù)據(jù)管理系統(tǒng).通過實踐測試,驗證確實可行,大大縮短了網(wǎng)頁加載時間,提升了用戶體驗.當然,本文所述系統(tǒng)在實際設(shè)計開發(fā)過程中是一個龐大的系統(tǒng)工程,包括實際業(yè)務(wù)流程、前端、后端、服務(wù)器、網(wǎng)絡(luò)等多方面的內(nèi)容.本文僅從網(wǎng)站構(gòu)建方式的角度來進行描述,提出構(gòu)建方法,論證SPA 架構(gòu)對網(wǎng)站構(gòu)建的突出優(yōu)勢.

目前,很多知名的網(wǎng)站都已采用SPA 這種方式來進行網(wǎng)站搭建,界面美觀、瀏覽流暢等特點已眾所周知,但在工程機械信息化領(lǐng)域,應(yīng)用還比較少.通過本文的論述,SPA 網(wǎng)站構(gòu)建方式具有重大應(yīng)用價值,不僅在試驗數(shù)據(jù)管理系統(tǒng),甚至在企業(yè)產(chǎn)品數(shù)據(jù)管理、生產(chǎn)制造管理、財務(wù)管理、檔案管理等都可以加以應(yīng)用,以提升企業(yè)現(xiàn)代數(shù)字化水平,提高用戶工作體驗,提升企業(yè)競爭力.