前端組件化開發在集裝箱港口信息化中的應用

馬靜

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

1 傳統港口軟件開發模式的弊端

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

從港口軟件開發的角度來看，傳統的軟件開發大多采用系統整體開發方式。隨著港口業務的擴展或變更，整個系統的復雜度呈現指數式增長，導致系統改動的難度加大，即使小功能的改動也可能引起整體項目邏輯的修改。結合傳統港口軟件開發模式，總結出當前港口軟件開發存在以下問題。

（1）在大型軟件應用系統中，Web應用的前后端已經分離。隨著表述性狀態轉移軟件架構的不斷發展，后端編寫逐步傾向于微服務；而對于前端而言，新技術層出不窮，開發的復雜度也越來越高，傳統開發模式存在開發效率低、維護成本高等弊端。

（2）隨著港口業務規模的逐步擴大，軟件系統應用需求不斷變化，新軟件的開發成本高且耗時長。

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

（4）由于缺乏統一的編碼規范，導致代碼難以被讀懂，業務邏輯分散在多個代碼塊中。

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

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

2 前端組件化開發在集裝箱港口提空返重項目系統中的應用

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

2.1 總體目標

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

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

2.2 項目系統架構

2.2.1 項目系統總架構

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

2.2.2 前端架構

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

3 前端組件化開發的應用效果

3.1 技術方面

3.1.1 前后端完全分離

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

3.1.2 采用系統組件化實現技術

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

3.2 業務方面

3.2.1 作業無紙化

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

3.2.2 工作流程簡化

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

3.2.3 終端業務的擴展性

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

3.2.4 減輕道路交通壓力

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

4 結束語

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

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