前端組件化開發(fā)在集裝箱港口信息化中的應(yīng)用

馬靜

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

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

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

從港口軟件開發(fā)的角度來看，傳統(tǒng)的軟件開發(fā)大多采用系統(tǒng)整體開發(fā)方式。隨著港口業(yè)務(wù)的擴展或變更，整個系統(tǒng)的復(fù)雜度呈現(xiàn)指數(shù)式增長，導(dǎo)致系統(tǒng)改動的難度加大，即使小功能的改動也可能引起整體項目邏輯的修改。結(jié)合傳統(tǒng)港口軟件開發(fā)模式，總結(jié)出當前港口軟件開發(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ā)效率低、維護成本高等弊端。

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

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

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

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

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

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

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

2.1 總體目標

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

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

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

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

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

2.2.2 前端架構(gòu)

前端架構(gòu)（見圖2）通過Vue-CLI腳手架搭建，結(jié)合Webpack構(gòu)件機制及ESLint代碼檢查，主要包括業(yè)務(wù)層和架構(gòu)支撐層。業(yè)務(wù)層主要承載基本的功能模塊項。架構(gòu)支撐層為核心層，主要包括以下組成部分：（1）基礎(chǔ)組件（即頁面的公共組件）庫，其主要功能是對每個頁面幾乎都會用到的組件進行封裝抽離；（2）狀態(tài)管理功能模塊，對項目中多個頁面的共同屬性進行Vuex狀態(tài)管理，避免多個頁面的共有屬性在組件之間頻繁進行數(shù)據(jù)傳遞；（3）路由管理功能模塊，通過Vue-Router實現(xiàn)頁面的路由切換功能，在項目啟動后將路由映射渲染；（4）通過SuperAgent封裝的AJAX，實現(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)和后端接口，從分析需求入手逐步實現(xiàn)并完善系統(tǒng)功能。前后端分離即前后端各司其職，這便于數(shù)據(jù)維護和后期功能擴展：前端的數(shù)據(jù)處理可以減小服務(wù)器的壓力；后端很難感知前端頁面的總體布局情況，且JavaScript無法獨立地與服務(wù)器通信，因此，僅依靠后端控制頁面或僅依賴JavaScript完成整體功能的難度極大。

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

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

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

3.2.1 作業(yè)無紙化

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

3.2.2 工作流程簡化

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

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

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

3.2.4 減輕道路交通壓力

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

4 結(jié)束語

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

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