單頁面技術(shù)在試驗(yàn)數(shù)據(jù)管理系統(tǒng)中的研究與應(yīng)用①

方 敏,趙 峰

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

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

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

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

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

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

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

1 相關(guān)概念

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

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

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

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

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

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

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

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

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

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

1.3 MVC 概念

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

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

圖2 MVC 模式工作原理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

依據(jù)實(shí)際的業(yè)務(wù)需要,本文所設(shè)計(jì)的試驗(yàn)業(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)境,并且是獨(dú)立的局域網(wǎng),其要滿足兩個(gè)要求,一是所有與試驗(yàn)相關(guān)的IT 終端都需要并入此網(wǎng)；二是要確保此局域網(wǎng)的安全.

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

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

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

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

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

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

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

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

4 SPA 導(dǎo)航

4.1 Shell 外殼頁面

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

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

4.2 SPA 導(dǎo)航設(shè)計(jì)

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

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

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

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

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

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

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

5.1 模塊(Module)定義

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

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

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

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

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

關(guān)鍵代碼：

視圖代碼段主要作用：

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

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

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

在“試驗(yàn)任務(wù)跟蹤”應(yīng)用模塊中,傳進(jìn)來的路由參數(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ù).

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

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

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

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

6.1 定義測(cè)試環(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 測(cè)試結(jié)果

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

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

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

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

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

7 總結(jié)與展望

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

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