方 敏,趙 峰

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

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

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

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

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

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

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

1 相關概念

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

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

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

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

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

1.2 SPA(單頁面應用)概念

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

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

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

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

1.3 MVC 概念

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

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

圖2 MVC 模式工作原理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 SPA 導航

4.1 Shell 外殼頁面

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

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

4.2 SPA 導航設計

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

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

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

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

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

5 應用模塊程序設計

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

5.1 模塊(Module)定義

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

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

5.2 應用模塊視圖(View)程序實現(xiàn)

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

圖6 試驗任務跟蹤視圖

關鍵代碼：

視圖代碼段主要作用：

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

5.3 應用模塊邏輯(Controller)程序實現(xiàn)

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

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

關鍵代碼：

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

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

圖7 試驗任務跟蹤最終界面展示

6 實踐與結果分析

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

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

客戶端硬件：惠普Z240 Workstation,內存16 GB.

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

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

6.2 測試結果

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

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

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

圖8 整頁加載與單模塊加載內容及時間對比

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

7 總結與展望

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

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