馬靜

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

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

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

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

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

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

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

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

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

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

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

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

2.1 總體目標(biāo)

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

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

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

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

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

2.2.2 前端架構(gòu)

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

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

3.1 技術(shù)方面

3.1.1 前后端完全分離

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

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

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

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

3.2.1 作業(yè)無紙化

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

3.2.2 工作流程簡化

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

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

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

3.2.4 減輕道路交通壓力

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

4 結(jié)束語

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

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