前端组件化开发在集装箱港口信息化中的应用

马静

在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）