“互联网+”时代推动了互联网与各行各业之间的紧密联系,Web应用的需求量也日益增长。对于每个Web应用,其后台管理系统是不可或缺的。这类系统所需求的前端功能大部分比较相似,页面结构相对固定,整体需求数量庞大,UI样式要求不高。系统功能主要为数据的展示和管理,以及用户权限的管理,本质是针对数据的增、删、改、查操作,在开发的过程中存在很多重复性工作。在传统的前端网页构造流程中,首先由美工设计界面原型图,然后开发者根据设计图编程生成静态网页,再编写逻辑代码生成动态网页,并且在开发的任何阶段可能会根据用户的需求变化进行修改。因此网页的开发过程当中存在很多制约效率的问题。为了提升开发效率,自动化开发成为前端页面开发的一个重要方向,而后台管理系统页面的自动化构建,有利于解决此类网页开发效率低下的弊病,对互联网的发展有重要的意义。本文针对后台管理系统网页的功能和结构的固定性,以提升系统前端的开发效率为出发点,深入调研了现有网页构建工具的发展现状,提出了一种后台管理页面可视化自动构建的解决方案。本文首先基于React框架开发系统前端,并采用Ant Design Pro脚手架搭建后台管理控制台,构建可视化交互操作界面。其次以组件化的开发方式,分析整理后台管理系统的通用功能,运用ECharts图表库和Ant Design UI组件样式库开发成低耦合、可复用、能交互的前端组件库。设计实现组件的拖拽、缩放、增删功能,基于响应式的流式网格布局,使组件能够在页面上灵活排列,从而生成个性化的页面布局。并且系统还具有导航路由和访问权限的自动配置、组件可视化动态编辑、后端数据接口绑定和交互、数据操作项设置、配置数据自动生成和保存、跨设备响应等功能。本系统能够以可视化的操作方式,结合自动化的开发流程,构建出满足功能需求的后台管理页面。系统屏蔽了 Web网页代码编写的细节,致力于前端开发的简化,提高效率,缩减成本,有利于应对当下互联网蓬勃发展所带来的源源不断的后台管理页面需求。