CN107678745A - 基于页面组件化的***和方法 - Google Patents

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

Info

Publication number
CN107678745A
CN107678745A CN201710872501.2A CN201710872501A CN107678745A CN 107678745 A CN107678745 A CN 107678745A CN 201710872501 A CN201710872501 A CN 201710872501A CN 107678745 A CN107678745 A CN 107678745A
Authority
CN
China
Prior art keywords
page
component
module
service
definition
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.)
Granted
Application number
CN201710872501.2A
Other languages
English (en)
Other versions
CN107678745B (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 LLC
Original Assignee
Nanjing Sinovatio Technology LLC
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 LLC filed Critical Nanjing Sinovatio Technology LLC
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

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.一种基于页面组件化的***，其特征在于：包括：
组件封装模块，用于将页面常用控件封装成各组件；
组件定义模块，用于为每个组件设置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 true CN107678745A (zh) 2018-02-09
CN107678745B 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)

Cited By (9)

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

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前端框架***及架构方法

Cited By (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109086042B (zh) * 2018-06-27 2022-05-10 南京中新赛克科技有限责任公司 基于算子及控件的业务界面开发方法
CN109086042A (zh) * 2018-06-27 2018-12-25 南京中新赛克科技有限责任公司 基于算子及控件的业务界面开发方法
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组件配置管理、请求转发方法和请求处理装置
CN110896407A (zh) * 2018-09-13 2020-03-20 亿阳信通股份有限公司 一种nfvo组件配置管理、请求转发方法和请求处理装置
CN109783155A (zh) * 2018-12-27 2019-05-21 北京奇安信科技有限公司 业务组件管理方法、装置、电子设备及存储介质
CN110187931B (zh) * 2019-05-17 2022-05-17 北京百度网讯科技有限公司 小程序的运行方法及装置
CN110187931A (zh) * 2019-05-17 2019-08-30 北京百度网讯科技有限公司 小程序的运行方法及装置
CN110989976A (zh) * 2019-11-29 2020-04-10 北京美络克思科技有限公司 基于J2EE的Web应用的组件化开发方法、存储介质和电子设备
CN112631573A (zh) * 2020-12-25 2021-04-09 平安银行股份有限公司 组件添加方法、装置、设备及计算机可读存储介质
CN112631573B (zh) * 2020-12-25 2024-05-10 平安银行股份有限公司 组件添加方法、装置、设备及计算机可读存储介质
CN117130692A (zh) * 2023-10-23 2023-11-28 成都赛力斯科技有限公司 应用管理方法、装置、电子设备及存储介质
CN117130692B (zh) * 2023-10-23 2024-01-23 成都赛力斯科技有限公司 应用管理方法、装置、电子设备及存储介质

Also Published As

Publication number Publication date
CN107678745B (zh) 2021-04-13

Similar Documents

Publication Publication Date Title
CN107678745A (zh) 基于页面组件化的***和方法
CN102279905B (zh) 一种电网故障诊断中的数据流快速约简方法
CN101819529A (zh) 用于实现工作流任务界面可视化开发的***和方法
CN103677779A (zh) 一种灵活的页面配置展现方法
CN103605525A (zh) 桌面应用程序的实现方法和装置
CN103383691A (zh) 一种网页的在线编辑方法和装置
CN104123125A (zh) 网页资源的获取方法及装置
CN106776074A (zh) 一种基于http的web插件调用方法及***
CN109815387B (zh) 一种基于脚本的网页采集服务方法和***
CN110045950A (zh) 基于nodejs的静态页面开发脚手架方法
CN102662962B (zh) 一种基于网页元素的动态展示方法
CN104133686B (zh) 一种可快速模块化配置的web界面构建方法
CN102306163A (zh) 一种基于b2b平台的动态集成技术
CN103067511A (zh) 一种http请求处理的控制方法
CN103365859B (zh) 处理网页鼠标点击事件的方法
CN103561113B (zh) Web Service接口的生成方法及装置
CN106598829A (zh) 一种网页自动化测试方法及装置
CN104216694B (zh) 一种业务表单页面与工作流页面的融合方法及***
CN105512350A (zh) 一种网站多级内容管理方法及装置
CN104361121B (zh) 一种web报表***公式的批量解析方法
CN102073694A (zh) 原译文多页面审校方法
CN103365831A (zh) 一种为文本添加超级链接的方法和装置
CN105183709A (zh) 一种excel概预算表格排版方法
CN107436927A (zh) 一种ui组件的应用方法和***
CN104391897B (zh) 一种基于标签的jsp页面预览方法及装置

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