[发明专利]基于页面组件化的系统和方法

说明书

本发明公开了一种基于页面组件化的系统和方法，包括：组件封装模块，用于将页面常用控件封装成各组件；组件定义模块，用于为每个组件设置Json协议、定义对应属性及与其他组件之间的联通关系；界面编辑模块，用于为定义好的组件设置编辑对话框，定义控件ID文本框以及按照业务逻辑参考组件开发文档定义的事件、方法、属性和对应的后台业务流程ID来定义Json协议多行文本框；和业务调试模块，将经过界面编辑模块定义完成的业务页面发布到业务设计页面进行业务调试。

技术领域

本发明涉及一种基于页面组件化的系统和方法，属于Web前端技术领域。

背景技术

目前，绝大多数软件产品是追逐利润的，在产品目标确定的情况下，成本有两个途径来优化：减少部署成本，提高开发效率。

发明内容

本发明为提高开发效率，提出一种基于页面组件化的系统和方法。

本发明提供了一种基于页面组件化的系统，包括：

组件封装模块，用于将页面常用控件封装成各组件；

组件定义模块，用于为每个组件设置Json协议、定义对应属性及与其他组件之间的联通关系；

界面编辑模块，用于为定义好的组件设置编辑对话框，定义控件ID文本框以及按照业务逻辑参考组件开发文档定义的事件、方法、属性和对应的后台业务流程ID来定义Json协议多行文本框；和

业务调试模块，将经过界面编辑模块定义完成的业务页面发布到业务设计页面进行业务调试。

作为本发明进一步的优化，所述界面编辑模块中通过ajax模块调用后台http接口传递页面输入参数。

作为本发明进一步的优化，所述业务调试模块中通过对应业务流程引擎计算出结果并将其结果发布到业务设计页面进行业务调试。

本发明还公开了一种基于页面组件化的方法，包括以下步骤：

步骤1、将页面常用控件封装成各个组件；

步骤2、通过组件定义模块为各组件设置Json协议、定义对应属性及与其他组件之间的联通关系；

步骤3、将定义好的组件拖拽到界面编辑模块中，点击每个组件的编辑对话框设置对应的控件ID文本框以及按照业务逻辑参考组件开发文档定义的事件、方法、属性、对应的后台业务流程ID定义Json协议多行文本框；

步骤4、将定义好的业务页面进行保存，通过对应业务流程引擎计算出结果并将其发布到业务设计页面进行业务调试，确认页面满足业务的操作需求和数据展示返回给页面进行展现。

作为本发明进一步的优化，所述步骤1中采用前端Angularjs框架，BootStrap框架以及JavaScript技术将页面常用控件封装成各个组件。

作为本发明进一步的优化，所述步骤3中通过ajax模块调用后台http接口传递页面输入参数进行编辑。

本发明的有益效果是：本发明与现有技术相比：本发明利用前端angularjs框架定义的组件是一个个不可再被拆分的基本设计元素，例如一个Button、一个Input等，每一个组件都有自己的迭代和设计过程，通过定义组件的属性和方法，与业务设计互补，每次设计迭代也正是在迭代这一个个组件，业务人员通过拖拽各个组件组装成不同业务页面，并且将各个组件的属性和方法组装成Json协议绑定到各个组件上，最终实现由业务人员根据业务需求自行完成页面开发的目的，大大降低了部署成本，提高开发效率，降低耦合度。

附图说明

图1为本发明的组件页面与后台交互架构示意图；

图2为本发明的组件页面控件布局示意图；