基于企业集成平台的前端代码快速生成工具的对比研究与应用

蒋慧宁

摘要： 针对当前企业业务与生产信息化应用系统建设过程中存在“涉及业务流程繁杂，功能需求相对简单，平台对接方式固定，后期接手运维耗时”等问题，广泛调研各类现有开源前端代码快速生成工具，结合自身需求，选择最优解，并在此基础上进一步开发出对接平台、UI风格一致的前端代码快速生成工具，提升信息系统开发效率，便于后期运维，同时节约出更多时间用于业务流程调研与分析，增强系统可用性与用户满意度，达到“开发运维一体化”的目标。

关键词：应用集成平台；代码生成工具；敏捷开发；一体化

一、前言

软件技术的发展促使软件的应用范围越来越广泛，软件提供的功能也越来越多，应用软件的规模和复杂程度也随着发展而越来越大。伴随着信息产业的不断深入发展，企业应用系统的需求和开发环境变得越来越复杂，带来的是更加复杂困难的开发过程。从早期的瀑布模式、迭代开发到螺旋开发，一直发展到现在常用的敏捷开发，传统软件开发方法暴露出新技术环境下的缺陷，比如开发周期漫长，工作重复较大，给系统的演进和维护造成了很大的困难，缩短软件开发的时间和降低人力成本直接或间接影响了软件企业的发展和竞争力。渐渐的，缩短软件开发周期和降低软件开发工作量成为了软件从业人员关心的问题。

代码自动生成技术作为关键内容融入到开发框架是可行的，一方面众多框架技术日益成熟，众多设计模式普遍应用，使软件设计层次清晰化，构件规范化，实现软件的代码中大部份变得有章可循，这是可以应用代码自动生成技术的前提条件之一。另一方面，与开发平台供应商的关注点不同，从同一领域、同一行业，甚至小到一个项目的角度来分析业务模式，会发现它一定能提取出更多的相似业务、相似界面、相似功能。这些潜在的业务模式的重复性也正是应用代码自动生成技术的另一个前提条件。

目前，市面上虽然有大量的不同类型的不同功能的代码生成工具，但还并没有人对这些代码生成工具进行一个整体的对比分析，即使有少量的人将两三种代码生成工具做对比，也未得出最终适用于自身情况的答案。因此基于对代码快速生成工具的需求，本文选择侧重于前端代码快速生成工具的方向进行深入研究。

前端代码快速生成工具，顾名思义，是一种用于快速生成前端代码的一种工具，即根据用户对于系统的各类不同需求建模后，自动生成源代码的工具程序或软件。本文通过充分调研与对比分析八种市面上比较常见的可用于快速生成前端代码的代码生成工具，将其一一试用并记录其功能完备、适配语言、代码可用性等等方面的性能指标的异同；并且，将各类前端代码快速生成工具的参数进行详细对比分析，选出使用感受较好的几款，用于具体项目的代码构建中去，切实体会其功能的优劣；最后，根据使用感受确定一款简单易上手、功能完整并且适用于当前开发组编码习惯的前端代码快速生成工具，加上进一步的设计开发，最终得到一款既可以缩短开发周期、降低软件开发工作量，又可以培养员工形成良好的代码习惯、在开发过程中也能不断学习到软件知识的代码快速生成工具，投入到未来的软件自主研发工作中去[1-2]。

二、工具需求

作为企业来讲，为做好信息化发展转型工作，必须培养软件自主研发的能力，但员工软件开发能力的参差不齐注定给自主研发能力的提升不断提出新的挑战。同时，在日常的软件开发过程中，逐渐显现出企业信息系统对功能的要求并不复杂，但业务审批、数据流转等流程的需求却很复杂的问题。页面的数据展示样式、增删改查跳转调用逻辑等都相差不大，但开发时仍需要每个功能页面复制粘贴基本重复的代码和接口，大量的宝贵时间被用在了重复劳动之中；此外，不同的开发人员编写的代码势必会存在强烈的个人风格，不论是变量、接口的命名方式，还是代码的排版格式，这些看似细微的差异都会导致开发后期的代码整合与运维出现困难[3]。

综上，可以明确的提出对于前端代码快速生成工具的一些需求：

（1）支持生成简单易懂易于学习使用的代码框架；

（2）支持生成完善的前端代码，包括HTML、CSS、JS等，且能有效利用到开发环境中；

（3）支持导入以前项目的开发模板，套用原有的模型样式；

（4）前端代码快速生成工具本身要入门简单、上手快；

（5）支持进行页面样式的具体设计和排版；

（6）支持团队合作的开发模式。

在得出了明确的需求之后，利用各种渠道搜索市面上口碑较好的前端代码快速生成工具，并简单对比后，选出了八种可以大致符合以上需求的产品，并简单将其根据各自的特点和用法等方面，进行初步的分类，以便于之后的具体了解使用以及对比分析。其中Vue CLI和懒猴子CG由于都重点生成前端脚手架项目而分为一组；LayoutIt、ibootstrap、GrapesJS、magicalcoder都是基本基于图形页面、拖拽组件排版生成前端页面，分为一组；Yeoman和JHipster由于都是基于命令的、又可以生成优秀代码框架的前端代码快速生成工具而分为一组。

三、工具对比与分析

（一）Vue CLI和懒猴子CG

Vue CLI是Vue 项目脚手架，支持自定义脚手架内容，它是用于快速Vue.js开发的完整系统，提供运行时依赖项、丰富的官方插件集合和完整的图形用户界面等服务，还可以开发并引入CLI插件，为项目添加额外的功能。直接下载并运行vue-cli初始hello-world示例项目可以得到一个结构完整的脚手架项目。

懒猴子CG采用四个阶段的预编译和两个阶段的生成来实现跨语言的代码生成场景。用户可以根据喜好和需求选择技术栈来生成框架，或者在已有的系统代码基础上进行快速开发，也可以选择自定义一个模板帮助完成重复工作、保证代码规范和技术栈统一。在线生成框架方面，主要支持生成Java、JavaScript、Vue三大类。

通过对比生成的脚手架项目代码文件结构可以看出，同样是简单代码生成器，懒猴子的文件结构更加规范完整，但生成代码量较小[4-5]。

（二）LayoutIt、ibootstrap、GrapesJS、magicalcoder

LayoutIt官网提供了拖拽Bootstrap组件生成前端页面的Bootstrap构建器，它简化了Bootstrap组件的使用，只需要简单的拖拽就可以绘制出一个前端界面的样式模型，这不仅可以利用于前端代码的快速生成，还可以用于项目经理构建项目样式模型，这样生成的模型代码下载后很大程度上的一部分可以利用到前端页面的开发中。

ibootstrap与LayoutIt的Bootstrap构建器基本一样，均为拖拽组件生成页面，不同的是LayoutIt的组件无法完成交互，而ibootstrap的组件可以完成交互，不足之处是生成代码仅有html代码，且需要复制粘贴到自己的项目中。

GrapesJS结合了不同的工具和功能，同样采用拖放的形式，主要针对于内容的编辑而不是结构框架的构建。可用官网的网页版的demo以及通讯版的demo，也可以选择跟着文档自己构建一个编辑器。但自己绘制画布无形中增加了上手难度。

magicalcoder的功能包括一个基于JS的动态可视化H5布局器，能够支持当前互联网上开源UI或者用户定制的任何JS组件的可视化开发；另一个功能叫做代码生成器，主要用于连接数据库获取数据库结构字段后自动生成基本的增删改查接口，便于用户在生成代码的基础上继续开发，大大缩短项目的开发周期。布局器内可选择的组件类型有Element、Layui、AntDesgin、Bootstrap4等，充分满足不同语言不同开发习惯的不同需求。

通过对比可以看出，这四种前端代码快速生成工具都存在一个共同的不足：无法下载完整代码。其中LayoutIt下载的CSS和JS文件有部分加密；ibootstrap和magicalcoder只能下载HTML代码，GrapesJS无法下载JS代码。

（三）Yeoman和JHipster

Yeoman提供了灵活创建、开发、编译和调试脚手架新途径，支持使用各种不同的工具和接口协同优化项目的生成，意在精简开发过程。在Yeoman官网上可以看到详细的起步方法和教程，其中教程非常详细的讲述了如何构建一个todo list程序、运行、测试并实现本地储存和交付生产的步骤，同时也简单介绍了生成的项目的文件结构，方便使用者快速掌握并开始开发代码。

JHipster可快速生成、开发和部署现代Web应用程序和微服务架构，是可以快速投入开发使用的样板，它支持许多前端技术，包括Angular，React和Vue等等，用户可安装官方蓝图选择生成spring-boot+Vue等多种前后端组合的项目蓝图，并利用这个蓝图生成带有一定页面逻辑样式的样板代码。

通过对比Yeoman和JHipster这两种工具，可以明显感觉到JHipster在生成代码的完整性方面占有很大的优势。只需在官方提供的蓝图基础上修改UI与基本逻辑代码，即可生成简单增删改查页面与接口都配置完整、风格统一的前端框架，直接进行复杂页面功能的开发即可。

四、本地化开发

通过对八种工具的横向与纵向对比，可以得出结论，还是JHipster的各方面的都较为符合当前的项目研发模式，尤其是其Vue+ts的技术框架十分有利于软件开发入门人员快速养成良好代码习惯、规范代码格式[6]。但JHipster若要自己定义蓝图进行项目生成，就需要一个比较好的页面模型来支撑，这时可以引入其他的针对内容的前端代码快速生成工具来完善其页面样式，做到取长补短。如图1所示。

由于当前开发的项目前端大都是用Vue来实现，所以选择根据JHipster官网提供的Vue+Spring-Boot模板即Vuejs蓝图模板，更改了相关的配置并导入设计好的数据库JDL，就可以得到一个拥有完整增删改查逻辑的模板项目。在这个模板项目的基础上，可以加入自己需要的组件应用、更改API配置、页面模型、实体类生成逻辑等等，这无疑让蓝图的功能进一步扩充，生成自定义蓝图，让JHipster的功能也变得更加强大，更加符合既具备企业风格UI又与应用集成平台对接完善的实际需求。由自定义蓝图可快速生成功能完备的系统代码。

应用至具体系统开发中流程如下：

（1）下载官方蓝图；（2）根据具体的需求更改蓝图的生成页面样式、组件布局、跳转逻辑、登录鉴权、API接口规范、ci配置文件、前端依赖等内容；（3）发布自定义蓝图；（4）利用自定义蓝图生成初始项目；（5）设计系统数据库并编写JDL；（6）将设计好的JDL文件引入初始项目，生成对应数据库表的前后端代码；（7）根据其余复杂的需求完善系统功能和页面样式。

五、实际应用效果

目前基于本蓝图开发的信息系统已有近10套，均反馈能有效提升开发效率，规范代码格式。其中电工材料系统页面功能简单、算法复杂，项目组基本完全使用蓝图生成的前端代码，着重开发算法模块，仅用1个半月时间就完成了系统开发上线工作；

土地信息系统由于功能点重复性较高，在原自定义蓝图的基础上进行二次开发，再快速生成代码，最终仅用2个月时间就完成了20余项功能点的开发工作，且代码符合标准规范，风格高度统一，为后期运维工作奠定了良好基础；

开发钻井甲供料系统仅用4个月时间就完成了全部36个功能点的敏捷迭代开发工作，上线后从系统功能、页面交互等方面均收获了用户好评，年登录次数超2万次，提升工作效率30%。

六、结语

经过进一步的实际使用，JHipster的蓝图在本地化开发后确实给开发初期生成项目的代码框架模板起到了积极推动的作用，极大的提升了开发效率，节约了重复劳动时间至少50%。在实际使用中，针对JHipster的自定义蓝图在需要自己设计页面的样式模的部分，可进一步优化，引入magicalcoder等其他页面内容类型的代码生成工具，会进一步缩短蓝图开发时间，使工具变得更加简单易用，增删改查逻辑也仅需集中开发一次自定义蓝图，效率方面也不存在问题。

本文认为该代码生成工具已具备了很大推广价值并已在团队内部得到广泛应用。但是，本地化的蓝图开发本身就存在一定技术难度，且只能生成固定模板的前端代码，需进一步增强其易用性和灵活性，以满足企业的实际需求。未来，这种工具和开发机制也会不断的在实践中被考验和锤炼，一定可以真正应用于企业自主研发工作中去。H

参考文献

[1]方敏，应晶等.基于模板工程的软件开发自动化框架研究[J].浙江大学学报（工学版），2007（03）：396-401+417.

[2]张志飞.前端工程化的研究与实践[J].电脑知识与技术，2016，12（25）：224-226.

[3]Azat Mardan. Node.js项目实践构建可扩展的 Web 应用[M].北京： 电子工业出版社，2015.

[4]王博，舒新峰，王小银，等.自动代码生成技术的发展现状与趋势[J].西安邮电大学学报，2018，23（03）：1-12.

[5]吕亮亮.微服务在石油化工企业的多平台整合中的应用[J].电子技术与软件工程，2019（01）：63-64.

[6]徐勇.Web前端代码生成技术研究与系统实现[D].扬州大学，2021.