CN107678745B - 基于页面组件化的系统和方法 - Google Patents

基于页面组件化的系统和方法 Download PDF

Info

Publication number
CN107678745B
CN107678745B CN201710872501.2A CN201710872501A CN107678745B CN 107678745 B CN107678745 B CN 107678745B CN 201710872501 A CN201710872501 A CN 201710872501A CN 107678745 B CN107678745 B CN 107678745B
Authority
CN
China
Prior art keywords
page
service
component
module
componentization
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201710872501.2A
Other languages
English (en)
Other versions
CN107678745A (zh
Inventor
金路
石新新
陈璐
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
NANJING SINOVATIO TECHNOLOGY CO LTD
Original Assignee
NANJING SINOVATIO TECHNOLOGY CO LTD
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by NANJING SINOVATIO TECHNOLOGY CO LTD filed Critical NANJING SINOVATIO TECHNOLOGY CO LTD
Priority to CN201710872501.2A priority Critical patent/CN107678745B/zh
Publication of CN107678745A publication Critical patent/CN107678745A/zh
Application granted granted Critical
Publication of CN107678745B publication Critical patent/CN107678745B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F11/00—Error detection; Error correction; Monitoring
    • G06F11/36—Preventing errors by testing or debugging software
    • G06F11/362—Software debugging

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Computer Hardware Design (AREA)
  • Quality & Reliability (AREA)
  • Stored Programmes (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

基于页面组件化的系统和方法
技术领域
本发明涉及一种基于页面组件化的系统和方法，属于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为本发明的组件页面控件布局示意图；
图3为本发明组件对话框ID和Json协议设置示意图；
图4为本发明组件页面效果示意图。
具体实施方式
以下结合附图和实施例对本发明专利做进一步说明。参考附图描述的实施例是示例性的，仅用于解释本发明，而不能理解为对本发明的限制。
本实施例的一种基于页面组件化的系统，包括组件封装模块，用于将页面常用控件封装成各组件；组件定义模块，用于为每个组件设置Json协议、定义对应属性及与其他组件之间的联通关系；界面编辑模块，用于为定义好的组件设置编辑对话框，定义控件ID文本框以及按照业务逻辑参考组件开发文档定义的事件、方法、属性和对应的后台业务流程ID来定义Json协议多行文本框；业务调试模块，将经过界面编辑模块定义完成的业务页面发布到业务设计页面进行业务调试。
其中，本实施例采用前端Angularjs框架，BootStrap框架以及JavaScript技术将页面常用控件封装成各个组件。
参考图1至图4，本实施例实现方式如下：采用前端Angularjs框架，BootStrap框架以及JavaScript技术将页面常用控件封装成各个组件，通过组件定义模块为各组件设置Json协议、定义对应属性及与其他组件之间的联通关系，将定义好的组件拖拽到界面编辑模块中，点击每个组件的编辑对话框设置对应的控件ID文本框以及按照业务逻辑参考组件开发文档定义的事件、方法、属性、对应的后台业务流程ID定义Json协议多行文本框，这样业务人员就可以通过拖拽使用新定义的组件完成业务功能；通过拖拽各个组件形成业务页面，通过ajax模块调用后台http接口传递页面输入参数，将定义好的业务页面进行保存，通过对应业务流程引擎计算出结果并将其发布到业务设计页面进行业务调试，确认页面满足业务的操作需求和数据展示返回给页面进行展现。

Claims (6)

1.一种基于页面组件化的系统，其特征在于：包括：
组件封装模块，用于采用前端Angularjs框架，BootStrap框架以及JavaScript技术将页面常用控件封装成各个组件；
组件定义模块，用于为每个组件设置Json协议、定义对应属性及与其他组件之间的联通关系；
界面编辑模块，用于为定义好的组件设置编辑对话框，定义控件ID文本框以及按照业务逻辑参考组件开发文档定义的事件、方法、属性和对应的后台业务流程ID来定义Json协议多行文本框；和
业务调试模块，将经过界面编辑模块定义完成的业务页面发布到业务设计页面进行业务调试。
2.根据权利要求1所述的一种基于页面组件化的系统，其特征在于：所述界面编辑模块中通过ajax模块调用后台http接口传递页面输入参数。
3.根据权利要求1所述的一种基于页面组件化的系统，其特征在于：所述业务调试模块中通过对应业务流程引擎计算出结果并将其结果发布到业务设计页面进行业务调试。
4.采用权利要求1至3中任意一项所述的一种基于页面组件化的系统的方法，其特征在于：包括以下步骤：
步骤1、将页面常用控件封装成各个组件；
步骤2、通过组件定义模块为各组件设置Json协议、定义对应属性及与其他组件之间的联通关系；
步骤3、将定义好的组件拖拽到界面编辑模块中，点击每个组件的编辑对话框设置对应的控件ID文本框以及按照业务逻辑参考组件开发文档定义的事件、方法、属性、对应的后台业务流程ID定义Json协议多行文本框；
步骤4、将定义好的业务页面进行保存，通过对应业务流程引擎计算出结果并将其发布到业务设计页面进行业务调试，确认页面满足业务的操作需求和数据展示返回给页面进行展现。
5.根据权利要求4所述的一种基于页面组件化的方法，其特征在于：所述步骤1中采用前端Angularjs框架，BootStrap框架以及JavaScript技术将页面常用控件封装成各个组件。
6.根据权利要求4所述的一种基于页面组件化的方法，其特征在于：所述步骤3中通过ajax模块调用后台http接口传递页面输入参数进行编辑。
CN201710872501.2A 2017-09-25 2017-09-25 基于页面组件化的系统和方法 Active CN107678745B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710872501.2A CN107678745B (zh) 2017-09-25 2017-09-25 基于页面组件化的系统和方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710872501.2A CN107678745B (zh) 2017-09-25 2017-09-25 基于页面组件化的系统和方法

Publications (2)

Publication Number Publication Date
CN107678745A CN107678745A (zh) 2018-02-09
CN107678745B true CN107678745B (zh) 2021-04-13

Family

ID=61136988

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710872501.2A Active CN107678745B (zh) 2017-09-25 2017-09-25 基于页面组件化的系统和方法

Country Status (1)

Country Link
CN (1) CN107678745B (zh)

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109086042B (zh) * 2018-06-27 2022-05-10 南京中新赛克科技有限责任公司 基于算子及控件的业务界面开发方法
CN109343915A (zh) * 2018-08-01 2019-02-15 平安科技（深圳）有限公司 图片列表展现方法、装置、终端设备及存储介质
CN109240688A (zh) * 2018-08-13 2019-01-18 重庆金融资产交易所有限责任公司 界面开发方法、电子装置及可读存储介质
CN110896407B (zh) * 2018-09-13 2023-03-10 亿阳信通股份有限公司 一种nfvo组件配置管理、请求转发方法和请求处理装置
CN109783155A (zh) * 2018-12-27 2019-05-21 北京奇安信科技有限公司 业务组件管理方法、装置、电子设备及存储介质
CN110187931B (zh) * 2019-05-17 2022-05-17 北京百度网讯科技有限公司 小程序的运行方法及装置
CN110989976A (zh) * 2019-11-29 2020-04-10 北京美络克思科技有限公司 基于J2EE的Web应用的组件化开发方法、存储介质和电子设备
CN112631573B (zh) * 2020-12-25 2024-05-10 平安银行股份有限公司 组件添加方法、装置、设备及计算机可读存储介质
CN117130692B (zh) * 2023-10-23 2024-01-23 成都赛力斯科技有限公司 应用管理方法、装置、电子设备及存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102495735A (zh) * 2011-12-14 2012-06-13 方正国际软件有限公司 web 端UI组件应用框架系统
KR20140019627A (ko) * 2012-08-06 2014-02-17 인크로스 주식회사 웹 어플리케이션 저작도구 및 저작 방법
CN104317595A (zh) * 2014-10-28 2015-01-28 艾普工华科技（武汉）有限公司 基于svg的后台推送的组件化图形监控装置及其运行方法
CN105260345A (zh) * 2015-10-09 2016-01-20 北京金山安全软件有限公司 一种颜文字构建方法、装置及电子设备
CN106775751A (zh) * 2016-12-30 2017-05-31 深圳中顺易金融服务有限公司 一种web前端框架系统及架构方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102495735A (zh) * 2011-12-14 2012-06-13 方正国际软件有限公司 web 端UI组件应用框架系统
KR20140019627A (ko) * 2012-08-06 2014-02-17 인크로스 주식회사 웹 어플리케이션 저작도구 및 저작 방법
CN104317595A (zh) * 2014-10-28 2015-01-28 艾普工华科技（武汉）有限公司 基于svg的后台推送的组件化图形监控装置及其运行方法
CN105260345A (zh) * 2015-10-09 2016-01-20 北京金山安全软件有限公司 一种颜文字构建方法、装置及电子设备
CN106775751A (zh) * 2016-12-30 2017-05-31 深圳中顺易金融服务有限公司 一种web前端框架系统及架构方法

Also Published As

Publication number Publication date
CN107678745A (zh) 2018-02-09

Similar Documents

Publication Publication Date Title
CN107678745B (zh) 基于页面组件化的系统和方法
SG126058A1 (en) System and method for applying development patterns for component based applications
CN102236734B (zh) 火电厂电源系统设计自动成图的方法
CN103761288A (zh) 可视化图表自定义生成系统及方法
CN104077671A (zh) 一种同步库存信息的方法和系统
CN102196000A (zh) 一种基于b/s结构的业务流程可视化方法及系统
CN104077120A (zh) 一种图文处理方法、系统及服务器
CN107766043A (zh) 一种基于大屏数据可视化的实现方法及系统
CN104135536A (zh) 一种基于json数据协议的Web管理系统数据交互方法
CN104216845A (zh) 一种面向工艺的复杂产品总装数据信息传递方法
CN111176627A (zh) 一种基于微服务的前后端分离的装置与方法
CN102375743B (zh) 一种基于模型和模板开发soa系统的方法
CN102426612A (zh) 条件对象查询方法及系统
CN108496154A (zh) 网站内容服务架构方法及系统
CN106776074A (zh) 一种基于http的web插件调用方法及系统
CN102662962B (zh) 一种基于网页元素的动态展示方法
CN102752332B (zh) 一种业务激活方法和装置
CN103067511A (zh) 一种http请求处理的控制方法
CN109388812B (zh) 一种基于云计算的模块化自动出图方法及系统
CN106598829A (zh) 一种网页自动化测试方法及装置
CN105302562A (zh) Android平台下基于模板设计的一种软件开发系统及方式
CN105338104B (zh) 业务请求响应方法、解析方法和系统
CN103885777A (zh) 一种银行自助系统跨浏览器插件的开发方法
CN102520893A (zh) 基于云网络的移动终端网页打印方法
CN105824642A (zh) 一种快速开发手机税务客户端申报表的js组件

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant