馬靜

在2017年11月8日召開的第十八屆東北亞港口論壇上，來(lái)自東北亞地區(qū)的港口代表共同聚焦智慧港口，共謀智慧港口建設(shè)之策，追求港口與物流的協(xié)調(diào)發(fā)展，這表明智慧港口已成為港口行業(yè)的共同發(fā)展目標(biāo)。在“互聯(lián)網(wǎng)+”智慧港口加快發(fā)展的大環(huán)境下，青島港加快轉(zhuǎn)型升級(jí)步伐，推動(dòng)港口現(xiàn)代物流商務(wù)和集團(tuán)辦公管理平臺(tái)信息化、網(wǎng)絡(luò)化，構(gòu)建具有話語(yǔ)權(quán)、影響力和引領(lǐng)作用的互聯(lián)網(wǎng)平臺(tái)，以此迎接“互聯(lián)網(wǎng)+”時(shí)代的到來(lái)，實(shí)現(xiàn)青島港物流模式新變革。

1 傳統(tǒng)港口軟件開發(fā)模式的弊端

在港口提空返重業(yè)務(wù)中，集卡司機(jī)必須在指定時(shí)間段內(nèi)去指定位置完成信息錄入和繳費(fèi)操作后才能入閘，導(dǎo)致集卡司機(jī)在若干時(shí)間段內(nèi)集中作業(yè)，極易造成港區(qū)交通擁堵，降低生產(chǎn)作業(yè)效率。在此背景下，青島港科技有限公司決定將耗時(shí)耗力的線下信息錄入和繳費(fèi)操作改成移動(dòng)端操作方式，從而突破時(shí)間和空間的限制，使集卡司機(jī)通過(guò)移動(dòng)端即可完成信息錄入和繳費(fèi)操作；信息通過(guò)審核后，司機(jī)便可駕駛集卡直接入閘。

從港口軟件開發(fā)的角度來(lái)看，傳統(tǒng)的軟件開發(fā)大多采用系統(tǒng)整體開發(fā)方式。隨著港口業(yè)務(wù)的擴(kuò)展或變更，整個(gè)系統(tǒng)的復(fù)雜度呈現(xiàn)指數(shù)式增長(zhǎng)，導(dǎo)致系統(tǒng)改動(dòng)的難度加大，即使小功能的改動(dòng)也可能引起整體項(xiàng)目邏輯的修改。結(jié)合傳統(tǒng)港口軟件開發(fā)模式，總結(jié)出當(dāng)前港口軟件開發(fā)存在以下問(wèn)題。

（1）在大型軟件應(yīng)用系統(tǒng)中，Web應(yīng)用的前后端已經(jīng)分離。隨著表述性狀態(tài)轉(zhuǎn)移軟件架構(gòu)的不斷發(fā)展，后端編寫逐步傾向于微服務(wù)；而對(duì)于前端而言，新技術(shù)層出不窮，開發(fā)的復(fù)雜度也越來(lái)越高，傳統(tǒng)開發(fā)模式存在開發(fā)效率低、維護(hù)成本高等弊端。

（2）隨著港口業(yè)務(wù)規(guī)模的逐步擴(kuò)大，軟件系統(tǒng)應(yīng)用需求不斷變化，新軟件的開發(fā)成本高且耗時(shí)長(zhǎng)。

（3）隨著軟件系統(tǒng)應(yīng)用需求的擴(kuò)展，系統(tǒng)交互逐漸趨向復(fù)雜化，外部資源加載越來(lái)越多，Java-Script與層疊樣式表間相互依賴度上升，造成頁(yè)面加載的冗余資源過(guò)多。

（4）由于缺乏統(tǒng)一的編碼規(guī)范，導(dǎo)致代碼難以被讀懂，業(yè)務(wù)邏輯分散在多個(gè)代碼塊中。

（5）部分可重用的前端組件未進(jìn)行封裝，頁(yè)面多次重寫增加內(nèi)存消耗。

（6）不同業(yè)務(wù)模塊高耦合且相互依賴和影響，自動(dòng)化測(cè)試推進(jìn)較為困難。

2 前端組件化開發(fā)在集裝箱港口提空返重項(xiàng)目系統(tǒng)中的應(yīng)用

為解決當(dāng)前港口軟件開發(fā)中存在的問(wèn)題，采用新一代MVVM搭建前端應(yīng)用框架；同時(shí)，為確保前端開發(fā)的規(guī)范性、可移植性和可維護(hù)性，對(duì)前端資源采用組件化開發(fā)方式。在前端組件化開發(fā)模式下，頁(yè)面上每個(gè)獨(dú)立的可視區(qū)域均為一個(gè)組件，當(dāng)前組件所需的各種資源都在這個(gè)目錄下就近維護(hù)，從而避免后期維護(hù)過(guò)度復(fù)雜；當(dāng)需求擴(kuò)展或需要增加或修改頁(yè)面內(nèi)容時(shí)，直接增加或修改相應(yīng)的組件即可，無(wú)須對(duì)邏輯作大規(guī)模改動(dòng)。

2.1 總體目標(biāo)

（1）技術(shù)方面：以頁(yè)面業(yè)務(wù)功能為單位進(jìn)行劃分，聚合前端整體資源；使用Webpack資源打包工具，方便瀏覽器的加載；積累形成獨(dú)立的用戶界面庫(kù)及組件庫(kù)；統(tǒng)一規(guī)范化開發(fā)，規(guī)范對(duì)象包括文件、編碼、注釋、數(shù)據(jù)傳遞等。

（2）業(yè)務(wù)方面：減輕繳費(fèi)點(diǎn)周圍的交通壓力；港口生產(chǎn)效率提升20%以上；減少集卡司機(jī)及作業(yè)人員的工作量，提升個(gè)人工作效率。

2.2 項(xiàng)目系統(tǒng)架構(gòu)

2.2.1 項(xiàng)目系統(tǒng)總架構(gòu)

項(xiàng)目系統(tǒng)總架構(gòu)如圖1所示，前后端完全分離。前端采用SuperAgent封裝的異步 JavaScript 和 XML進(jìn)行數(shù)據(jù)訪問(wèn)操作，實(shí)現(xiàn)連續(xù)運(yùn)行參考站的跨域操作（只針對(duì)Dev環(huán)境），線上環(huán)境可取消跨域；后端采用SSM框架集（由Spring、SpringMVC和MyBatis等3個(gè)開源框架整合而成），各模塊之間采用Maven依賴管理，每個(gè)模塊單獨(dú)創(chuàng)建不同的工程，單個(gè)模塊運(yùn)行無(wú)須編譯其他代碼，從而使開發(fā)效率提升。將模塊的JAR發(fā)布到倉(cāng)庫(kù)之前，由Maven執(zhí)行編譯和測(cè)試；測(cè)試通過(guò)后，將JAR發(fā)布到倉(cāng)庫(kù)，以防止編譯錯(cuò)誤。后臺(tái)分Action、Service和Mapper等3層分別實(shí)現(xiàn)接口、業(yè)務(wù)邏輯和數(shù)據(jù)庫(kù)訪問(wèn)操作，從而降低組件之間的耦合度。

2.2.2 前端架構(gòu)

前端架構(gòu)（見圖2）通過(guò)Vue-CLI腳手架搭建，結(jié)合Webpack構(gòu)件機(jī)制及ESLint代碼檢查，主要包括業(yè)務(wù)層和架構(gòu)支撐層。業(yè)務(wù)層主要承載基本的功能模塊項(xiàng)。架構(gòu)支撐層為核心層，主要包括以下組成部分：（1）基礎(chǔ)組件（即頁(yè)面的公共組件）庫(kù)，其主要功能是對(duì)每個(gè)頁(yè)面幾乎都會(huì)用到的組件進(jìn)行封裝抽離；（2）狀態(tài)管理功能模塊，對(duì)項(xiàng)目中多個(gè)頁(yè)面的共同屬性進(jìn)行Vuex狀態(tài)管理，避免多個(gè)頁(yè)面的共有屬性在組件之間頻繁進(jìn)行數(shù)據(jù)傳遞；（3）路由管理功能模塊，通過(guò)Vue-Router實(shí)現(xiàn)頁(yè)面的路由切換功能，在項(xiàng)目啟動(dòng)后將路由映射渲染；（4）通過(guò)SuperAgent封裝的AJAX，實(shí)現(xiàn)瀏覽端與服務(wù)端的數(shù)據(jù)通信。

3 前端組件化開發(fā)的應(yīng)用效果

3.1 技術(shù)方面

3.1.1 前后端完全分離

采用前后端分離的設(shè)計(jì)思想和數(shù)據(jù)綁定式的MVVM框架Vue.js，梳理提空返重項(xiàng)目系統(tǒng)的框架結(jié)構(gòu)和后端接口，從分析需求入手逐步實(shí)現(xiàn)并完善系統(tǒng)功能。前后端分離即前后端各司其職，這便于數(shù)據(jù)維護(hù)和后期功能擴(kuò)展：前端的數(shù)據(jù)處理可以減小服務(wù)器的壓力；后端很難感知前端頁(yè)面的總體布局情況，且JavaScript無(wú)法獨(dú)立地與服務(wù)器通信，因此，僅依靠后端控制頁(yè)面或僅依賴JavaScript完成整體功能的難度極大。

3.1.2 采用系統(tǒng)組件化實(shí)現(xiàn)技術(shù)

前端采用功能強(qiáng)大的輕量級(jí)MVVM框架Vue.js，所有頁(yè)面采用組件化實(shí)現(xiàn)方式，以提高組件的復(fù)用性；樣式部分使用Stylus的CSS預(yù)處理工具，通過(guò)其強(qiáng)大的語(yǔ)法實(shí)現(xiàn)對(duì)CSS的嵌套、繼承、混入等操作。后端使用SSM框架結(jié)合Maven構(gòu)件機(jī)制，主要實(shí)現(xiàn)接口功能；邏輯采用分層實(shí)現(xiàn)方法，對(duì)共有方法進(jìn)行封裝，進(jìn)一步實(shí)現(xiàn)層與層之間的模塊調(diào)用及對(duì)模塊功能的封裝。

3.2 業(yè)務(wù)方面

3.2.1 作業(yè)無(wú)紙化

本項(xiàng)目的無(wú)紙化主要體現(xiàn)為繳費(fèi)操作的無(wú)紙化：集卡司機(jī)僅須登錄系統(tǒng)的移動(dòng)終端便可以在任何時(shí)間和地點(diǎn)進(jìn)行網(wǎng)上繳費(fèi)操作，從而減少對(duì)紙質(zhì)資源的浪費(fèi)。除此之外，系統(tǒng)具有用戶信息后臺(tái)審核對(duì)接功能，相關(guān)作業(yè)人員可以直接通過(guò)后臺(tái)系統(tǒng)審核司機(jī)身份，從而節(jié)省30%的集卡司機(jī)在港時(shí)間以及近50%的人工成本。

3.2.2 工作流程簡(jiǎn)化

將線下的信息錄入和繳費(fèi)操作整合到線上后，集卡司機(jī)可以在設(shè)備終端錄入箱皮重信息和支付信息并查詢審核狀態(tài)等，避免線下操作的復(fù)雜流程。

3.2.3 終端業(yè)務(wù)的擴(kuò)展性

目前，港口業(yè)務(wù)主要集中在提空返重、箱皮重校驗(yàn)和信息審核查詢等方面。考慮到港口業(yè)務(wù)的復(fù)雜性和多變性，前端組件化開發(fā)有助于增強(qiáng)項(xiàng)目后期功能的擴(kuò)展性，便于后期類似業(yè)務(wù)的數(shù)據(jù)對(duì)接和功能擴(kuò)展。

3.2.4 減輕道路交通壓力

之前線下業(yè)務(wù)辦理集中在閘口附近的幾條主干道路，不僅容易導(dǎo)致港區(qū)道路擁堵，影響作業(yè)進(jìn)度，而且極易引發(fā)交通事故。將線下信息錄入和繳費(fèi)業(yè)務(wù)整合到線上終端，有利于緩解港區(qū)道路的交通壓力，預(yù)計(jì)可使作業(yè)效率提升30%。

4 結(jié)束語(yǔ)

在近年來(lái)的轉(zhuǎn)型升級(jí)過(guò)程中，青島港大力實(shí)施金融戰(zhàn)略、互聯(lián)網(wǎng)戰(zhàn)略、國(guó)際化戰(zhàn)略，積極融入“一帶一路”建設(shè)。提空返重項(xiàng)目的前端組件化開發(fā)為青島港今后的港口軟件系統(tǒng)開發(fā)和實(shí)施奠定良好的基礎(chǔ)。未來(lái)青島港將大力推進(jìn)物流、貿(mào)易、產(chǎn)業(yè)“三位一體”發(fā)展，加快打造以港口生產(chǎn)智能操作、物流電子商務(wù)網(wǎng)絡(luò)服務(wù)、管理扁平協(xié)同運(yùn)行、信息共享智能分析為特點(diǎn)的智慧港口。

（編輯：曹莉瓊 收稿日期：2018-07-04）