随着前端技术的不断发展,前端页面开发工作越来越繁重,而传统代码开发方式存在效率低下、技术门槛高等问题,极大制约了前端开发者的工作效率。本文着眼于公司内部业务场景,通过平台化服务和可视化编辑框架的方式进行常规页面的快速开发,提高页面开发的效率和质量。本项目提供了可视化编辑的页面编排方案、优秀的UI组件、平台化服务来实现解决传统代码开发页面的缺陷。本文设计了全新的可视化编辑、动态表单&智能报表、快速搭建平台三个模块,以实现简单,高效,智能的页面服务。各模块主要工作如下:(1)鉴于HTML+CSS代码页面开发方式的效率低下,本文实现了可视化编辑模块进行页面在线可视化编辑,同时页面布局采用栅格化布局,用户不需要在页面调试和编排中花费大量的时间,极大提升了页面开发效率。(2)表单和报表页面往往具有特殊的布局和数据逻辑,例如label标签和内容区的并排布局、数据校验逻辑等,动态表单&智能报表模块通过React + Redux技术的封装,赋予了常规组件的条目布局、数据上下行、逻辑校验、属性设置等功能,同时通过渲染引擎快速渲染页面,使得用户只需要关注组件的属性设置和页面编排,而不用关注组件内部细节实现和数据管理逻辑,使得页面开发变得更加简单。(3)快速搭建平台模块采用Node.js + Egg.js + MySQL技术体系,提供了用户管理、工程管理、组件管理等平台化Web服务,降低开发过程中的项目和人员的管理成本。目前可视化页面编辑平台已经接入公司内部业务线,获得良好的运行效果和用户反馈,提高了业务线前端开发效率和质量,证明了本文研究对前端常规业务页面开发效率和质量提升的价值。