CN113742615A - 实现动态数据组件应用的系统及方法、装置、处理器及其计算机可读存储介质 - Google Patents
实现动态数据组件应用的系统及方法、装置、处理器及其计算机可读存储介质 Download PDFInfo
- Publication number
- CN113742615A CN113742615A CN202111070358.8A CN202111070358A CN113742615A CN 113742615 A CN113742615 A CN 113742615A CN 202111070358 A CN202111070358 A CN 202111070358A CN 113742615 A CN113742615 A CN 113742615A
- Authority
- CN
- China
- Prior art keywords
- component
- data
- module
- service
- dynamic data
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 41
- 238000011161 development Methods 0.000 claims abstract description 30
- 238000004806 packaging method and process Methods 0.000 claims abstract description 24
- 238000012545 processing Methods 0.000 claims abstract description 13
- 238000009877 rendering Methods 0.000 claims description 21
- 230000006870 function Effects 0.000 claims description 9
- 230000003993 interaction Effects 0.000 claims description 9
- 238000012827 research and development Methods 0.000 claims description 5
- 230000000007 visual effect Effects 0.000 claims description 5
- 230000009471 action Effects 0.000 claims description 4
- 238000004590 computer program Methods 0.000 claims description 4
- 238000012795 verification Methods 0.000 claims description 4
- 230000002093 peripheral effect Effects 0.000 abstract description 8
- 230000008878 coupling Effects 0.000 abstract description 4
- 238000010168 coupling process Methods 0.000 abstract description 4
- 238000005859 coupling reaction Methods 0.000 abstract description 4
- 238000012800 visualization Methods 0.000 abstract description 4
- 230000002452 interceptive effect Effects 0.000 abstract 1
- 238000007726 management method Methods 0.000 description 30
- 230000018109 developmental process Effects 0.000 description 25
- 238000010586 diagram Methods 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 230000008569 process Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000012937 correction Methods 0.000 description 2
- 230000007547 defect Effects 0.000 description 2
- 230000001419 dependent effect Effects 0.000 description 2
- 210000001503 joint Anatomy 0.000 description 2
- 238000009825 accumulation Methods 0.000 description 1
- 238000007792 addition Methods 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000002955 isolation Methods 0.000 description 1
- 238000003032 molecular docking Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000011218 segmentation Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
本发明涉及一种实现动态数据组件应用的系统，包括数据服务模块，进行数据处理及逻辑处理，支撑组件业务数据；组件库模块，开发功能组件，提供底层组件库；场景管理模块，提供选择组件和配置白名单；内容发布模块，为场景管理模块提供接口服务，为使用者提供在线打包服务。本发明还涉及一种实现动态数据组件应用的方法、装置、处理器及其计算机可读存储介质。采用了本发明的实现动态数据组件应用的系统及方法、装置、处理器及其计算机可读存储介质，基于Vue Web Component模式，将带有业务数据逻辑、交互逻辑等组件包裹并注册为一个自定义html元素。本发明一方面减轻了外围使用方重复开发工作量，另一方面减少了业务逻辑上多处耦合，大大提升了数据服务上的可视化、一致性。
Description
技术领域
本发明涉及前端Vue的自定义组件内容发布领域，具体是指一种实现动态数据组件应用的系统及方法、装置、处理器及其计算机可读存储介质。
背景技术
数据中台是将所有的数据汇聚，为业务提供速度更快的服务，每个应用服务无论是指标和分析类的、用户画像等统统从数据中台获取数据。同时H5具有迭代速度快、兼容性强、传播途径广、用户使用成本低、开发成本低等特点，在用户应用服务上占有半壁江山，现有前端框架vue、react、angular等框架对于开发者是存在专业门槛的，页面开发除了对接数据接口，还有一些界面细节、体验的开发，数据中台研发一个功能数据后，将把数据发布到各个应用服务开发团队，每个团队相同的功能存在重复工作、效率低下。在相对长的时间积累，由于业务应用场景不断增加、变迁，数据中台就会面临一个不可维护的问题，如何向不同团体提供可解释的业务逻辑和数据，甚至出现牵一发动全身的问题，例如A应用需要增加数据逻辑，但是B应用也使用相同数据，如果B应用没有及时跟进就会出现应用缺陷。如何确保数据使用一致性，且又避免多方应用持续跟进带来的重复开发工作，是不可避免要思考的问题。
发明内容
本发明的目的是克服了上述现有技术的缺点，提供了一种满足数据一致性好、便捷性好、适用范围较为广泛的实现动态数据组件应用的系统及方法、装置、处理器及其计算机可读存储介质。
为了实现上述目的，本发明的实现动态数据组件应用的系统及方法、装置、处理器及其计算机可读存储介质如下：
该实现动态数据组件应用的系统，其主要特点是，所述的系统包括：
数据服务模块，用于进行数据处理及逻辑处理，提供数据接口，支撑组件业务数据；
组件库模块，与所述的数据服务模块相连接，用于根据标签库实现业务逻辑渲染及前端交互，开发功能组件，提供底层组件库；
场景管理模块，与所述的组件库模块相连接，用于提供选择组件和配置白名单，在线及可视化地对使用的渠道、组件、白名单的信息进行运营管理；
内容发布模块，与所述的场景管理模块相连接，用于为场景管理模块提供接口服务，为使用者提供在线打包服务。
较佳地，所述的场景管理模块包括：
组件预览单元，与所述的组件库模块相连接，用于可视化展示动态数据组件；
组件选择单元，与所述的组件预览单元相连接，用于为使用者登记使用渠道，并挑选需使用的组件；
组件打包单元，与所述的组件选择单元和内容发布模块相连接，与内容发布模块通过rest http请求通信，将使用者选择的组件在线打包；
依赖包管理单元，与所述的组件打包单元相连接，用于将打包后的数据表发布至线上平台，通过自定义html标签进行功能开发。
较佳地，所述的数据服务模块对接多个数据源，整合数据，研发业务逻辑，提供外网可访问的数据接口。
较佳地，所述的组件库模块对接http接口获取数据，进行数据渲染和动作交互，集成动态数据组件。
较佳地，所述的内容发布模块根据使用者的渠道信息，查询到该渠道勾选的组件列表，进行打包，上传至服务器；内容发布模块对多个组件入口进行后台打包，提供http接口服务。
该利用上述系统实现动态数据组件应用的方法，其主要特点是，所述的方法包括以下步骤：
(1)所述的数据服务模块获取业务新需求；
(2)判断组件库是否已经存在，如果是，则继续步骤(4)；否则，继续步骤(3)；
(3)所述的组件库模块研发增加相应组件，进行数据接口研发和自定义标签组件研发；
(4)所述的场景管理模块进行场景管理，选择需使用的组件，登记白名单使用来源域名和IP地址；
(5)所述的内容发布模块点击打包组件库。
较佳地，所述的方法还包括研发中使用组件的步骤，具体包括以下处理过程：
(6)获取组件库js包，引用组件库js包，使用组件自定义html标签，配置在研发前端中；
(7)打包发布前端应用；
(8)进行前端展示，进行组件库js包渲染和浏览器渲染；
(9)发送动态组件数据请求，发送http请求；
(10)数据服务模块接收到http请求，查询该使用方登记的白名单，若验证通过，则返回对应数据；否则，不返回数据；
(11)根据数据渲染内容展示动态组件。
该实现动态数据组件应用的装置，其主要特点是，所述的装置包括：
处理器，被配置成执行计算机可执行指令；
存储器，存储一个或多个计算机可执行指令，所述计算机可执行指令被所述处理器执行时，实现上述的实现动态数据组件应用的方法的各个步骤。
该实现动态数据组件应用的处理器，其主要特点是，所述的处理器被配置成执行计算机可执行指令，所述的计算机可执行指令被所述的处理器执行时，实现上述的实现动态数据组件应用的方法的各个步骤。
该计算机可读存储介质，其主要特点是，其上存储有计算机程序，所述的计算机程序可被处理器执行以实现上述的实现动态数据组件应用的方法的各个步骤。
采用了本发明的实现动态数据组件应用的系统及方法、装置、处理器及其计算机可读存储介质，基于Vue Web Component模式将带有业务数据逻辑、交互逻辑等组件包裹并注册为一个自定义html元素，系统将这些自定义html标签内容运营发布，支持外围前端系统使用，基于原生html标签模式，支持跨vue、react、angular等多个框架，在组件管理上支持使用者灵活选择、在线打包。本发明一方面减轻了外围使用方重复开发工作量，另一方面减少了业务逻辑上多处耦合，避免了底层基础数据变动引来了上层使用多处整改、遗漏出错等，大大提升了数据服务上的可视化、一致性，提升了数据服务的可拓展性、可维护性。
附图说明
图1为本发明的实现动态数据组件应用的系统的模块示意图。
图2为本发明的实现动态数据组件应用的方法的应用场景使用服务数据流示意图。
图3为本发明的实现动态数据组件应用的方法的底层开发原理示意图。
图4为本发明的实现动态数据组件应用的方法的应用实施例示意图。
具体实施方式
为了能够更清楚地描述本发明的技术内容，下面结合具体实施例来进行进一步的描述。
本发明的该实现动态数据组件应用的系统，其中包括：
数据服务模块，用于进行数据处理及逻辑处理，提供数据接口，支撑组件业务数据；
组件库模块，与所述的数据服务模块相连接，用于根据标签库实现业务逻辑渲染及前端交互，开发功能组件，提供底层组件库；
场景管理模块，与所述的组件库模块相连接，用于提供选择组件和配置白名单，在线及可视化地对使用的渠道、组件、白名单的信息进行运营管理；
内容发布模块，与所述的场景管理模块相连接，用于为场景管理模块提供接口服务，为使用者提供在线打包服务。
作为本发明的优选实施方式，所述的场景管理模块包括：
组件预览单元，与所述的组件库模块相连接，用于可视化展示动态数据组件；
组件选择单元，与所述的组件预览单元相连接，用于为使用者登记使用渠道，并挑选需使用的组件；
组件打包单元，与所述的组件选择单元和内容发布模块相连接，与内容发布模块通过rest http请求通信，将使用者选择的组件在线打包；
依赖包管理单元，与所述的组件打包单元相连接，用于将打包后的数据表发布至线上平台，通过自定义html标签进行功能开发。
作为本发明的优选实施方式，所述的数据服务模块对接多个数据源，整合数据，研发业务逻辑，提供外网可访问的数据接口。
作为本发明的优选实施方式，所述的组件库模块对接http接口获取数据，进行数据渲染和动作交互，集成动态数据组件。
作为本发明的优选实施方式，所述的内容发布模块根据使用者的渠道信息，查询到该渠道勾选的组件列表，进行打包，上传至服务器；内容发布模块对多个组件入口进行后台打包，提供http接口服务。
本发明的该利用上述系统实现动态数据组件应用的方法，其中包括以下步骤：
(1)所述的数据服务模块获取业务新需求；
(2)判断组件库是否已经存在，如果是，则继续步骤(4)；否则，继续步骤(3)；
(3)所述的组件库模块研发增加相应组件，进行数据接口研发和自定义标签组件研发；
(4)所述的场景管理模块进行场景管理，选择需使用的组件，登记白名单使用来源域名和IP地址；
(5)所述的内容发布模块点击打包组件库；
(6)获取组件库js包，引用组件库js包，使用组件自定义html标签，配置在研发前端中；
(7)打包发布前端应用；
(8)进行前端展示，进行组件库js包渲染和浏览器渲染；
(9)发送动态组件数据请求，发送http请求；
(10)数据服务模块接收到http请求，查询该使用方登记的白名单，若验证通过，则返回对应数据；否则，不返回数据；
(11)根据数据渲染内容展示动态组件。
本发明的该实现动态数据组件应用的装置，其中，所述的装置包括：
处理器，被配置成执行计算机可执行指令；
存储器，存储一个或多个计算机可执行指令，所述计算机可执行指令被所述处理器执行时，实现上述的实现动态数据组件应用的方法的各个步骤。
本发明的该实现动态数据组件应用的处理器，其中，所述的处理器被配置成执行计算机可执行指令，所述的计算机可执行指令被所述的处理器执行时，实现上述的实现动态数据组件应用的方法的各个步骤。
本发明的该计算机可读存储介质，其中，其上存储有计算机程序，所述的计算机程序可被处理器执行以实现上述的实现动态数据组件应用的方法的各个步骤。
本发明的具体实施方式中，本发明面向业务中后台数据能力输出，公开了一种基于Vue的动态数据组件应用系统及方法，采用基于WebComponent的自定义标签模式，使得中后台系统可以将数据及逻辑的可视化组件内容打包成js组件库、线上发布，下游多个使用方可直接通过iframe或者html标签引用，降低开发成本，也解决了由于中后台长期积累数据业务耦合度高的问题。本发明的基于自定义标签html模式，可支持Vue、React、Angular和原生等多个前端框架，也很好解决iframe模式带来的浏览器硬隔离、内存变量不共享等问题。此外，本发明也支持灵活选择组件、在线打包，支持使用方按需使用，避免引用依赖包过大。
本发明的技术方案是实现一套基于Vue WebComponent的动态数据组件应用系统，见附图1，系统包括：数据服务模块，涵盖业务用户等数据、逻辑处理，为上层每个组件提供数据支撑；数据组件库模块，基于功能颗粒度切分、标准化UI设计的WebComponent html标签库，每个组件均实现业务逻辑渲染、前端交互等，是独立可展示的功能组件；场景管理模块，支持外围使用方灵活选择组件、配置白名单等能力，也支持每个功能组件里跳转连接、标题等配置运营；内容发布模块，支持外围使用方实时、在线打包选取的组件，输出依赖组件库js包，并发布到CDN等线上平台。
本发明的数据组件基于vue/web-component-wrapper，创建WebComponent，按照常规vue技术栈封装数据获取、逻辑处理、组件渲染等，将动态数据组件完整开发完毕，随后采用Vue Cli3打包编译构建成独立的web component组件包。本发明也将Vue-cli-service接口外露封装，新颖的建设了内容发布后台，支持使用方在管理页面上可视化选择、打包和使用。核心研发流程如图3所示。
在组件使用上，本发明提供统一、标准化的动态组件库，使用者为外围前端应用，本发明为使用者提供场景管理模块，该模块可视化展示所有动态数据组件，使用者在该模块登记使用渠道、挑选需使用的组件，同时登记组件应用的网站便于本发明进行基于HttpReferer校验。该模块与内容发布模块以rest http请求通信，支持使用者勾选需用的组件后在线打包，将打包后的lib包发布到CDN等线上平台，使用者在自己系统上，通过引用lib包、vue库包，即可使用自定义html标签完成功能开发。这种引用可兼容原生、不同前端框架，极大避免了多个使用方重复开发。
如图1所示为本发明系统模块，其中数据服务系统模块采用基于Java+Springboot研发，提供http rest数据接口，支撑组件业务数据；组件库模块，研发采用Vue+webpack+scss框架，该模块主要范围是功能组件的开发，提供底层组件库；场景管理模块，采用Vue+Java+Springboot技术栈，实现使用者对在线、可视化对使用的渠道、组件、白名单等信息运营管理；内容发布模块，采用Node+Express，对Vue-cli-service的定制开发，为场景管理模块提供接口服务，支持使用者在线灵活打包。
本发明提供基于Vue WebComponent的动态数据组件应用系统及方法，具体流程如下步骤S101-S109：
S101：数据服务模块，对接mysql、redis、接口等多个数据源，整合数据、研发业务逻辑，提供外网可访问的restful http接口；
S102：组件库模块，基于Vue web-component-wrapper创建web components，对接http接口获取数据、数据渲染、动作交互等，集成动态数据组件；
S103：场景管理模块，接入mysql，实现组件管理增删改查，登记组件库信息，包括组件名称、简介、别名、业务范围等；
S104：场景管理模块提供使用者管理能力，涵盖使用者渠道、使用组件、域名白名单等信息，并存入mysql；
S105：使用者在场景管理模块，根据自身需求，登记使用渠道、组件，登记组件将使用的网站信息；
S106：内容发布模块，将vue-clli-service暴露、定制开发，支持多个组件入口后台打包，基于node+express提供http接口服务，供场景管理模块使用；
S107：使用者在场景管理模块中点击组件打包，调用内容发布模块的http接口；
S108：内容发布模块根据使用者的渠道信息，对接mysql查询到该渠道勾选的组件列表，执行vue-cli-service打包生成js库，上传到CDN服务器，返回依赖地址；
S109：使用者拿到js库地址，可在场景管理模块查看使用文档，即可在使用者开发场景中使用动态组件标签。
通过上述步骤，完成动态数据组件库研发和内容发布，下面介绍使用者如何在研发中使用本发明组件，如步骤S201-S210：
S201：通过上述S105和S109环节拿到需要的组件库js包；
S202：研发中引用vue.min.js和组件库js包，使用组件自定义html标签，如lxzj-component，直接配置在研发前端中；
S203：使用者打包发布前端应用；
S204：用户前端展示，组件库js包渲染，将lxzj-component注册到window的customelement；
S205：浏览器渲染<lxzj-component></lxzj-component>；
S206：动态组件数据请求，发送http请求；
S207：数据服务接收到http请求，查询该使用方登记的白名单，验证http referer是否通过，返回对应数据；
S208：浏览器，动态组件根据数据渲染html内容，展示完毕。
在使用流程中，基于动态组件实现的功能模块，是不需要重复开发、直接内嵌使用，在统一设计UI、中后台复杂的系统中是非常适用，避免数据过度依赖、减少前端重复工作。最终本发明的应用场景如图4，系统后台提供一系列动态组件卡片，其中有市场热点功能组件lxzj-scrd，客服作为使用方登记渠道为lxkf，并选择了该组件，在线打包生成lxzj-lxkf-scrd组件包，在其H5页面内嵌该组件，即可展示市场热点，该组件每次渲染均可获取最新数据。通过该模式，系统不需要关系该卡片内部实现逻辑和对接数据源，仅需引用动态组件卡片即可，减轻多使用方开发工作量；同时如果该卡片数据源或逻辑存在变动，仅需投顾中台开发即可，很好提升了数据服务上的可视化、一致性，提升了数据服务的可拓展性、可维护性。
本实施例的具体实现方案可以参见上述实施例中的相关说明，此处不再赘述。
可以理解的是，上述各实施例中相同或相似部分可以相互参考，在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。
需要说明的是，在本发明的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。此外，在本发明的描述中，除非另有说明，“多个”的含义是指至少两个。
流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。
应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行装置执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。
本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，相应的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。
此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。
上述提到的存储介质可以是只读存储器、磁盘、光盘或者U盘等。
在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
采用了本发明的实现动态数据组件应用的系统及方法、装置、处理器及其计算机可读存储介质，基于Vue Web Component模式将带有业务数据逻辑、交互逻辑等组件包裹并注册为一个自定义html元素，系统将这些自定义html标签内容运营发布，支持外围前端系统使用，基于原生html标签模式，支持跨vue、react、angular等多个框架，在组件管理上支持使用者灵活选择和在线打包。本发明一方面减轻了外围使用方重复开发工作量，另一方面减少了业务逻辑上多处耦合，避免了底层基础数据变动引来了上层使用多处整改、遗漏出错等，大大提升了数据服务上的可视化、一致性，提升了数据服务的可拓展性、可维护性。
在此说明书中，本发明已参照其特定的实施例作了描述。但是，很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此，说明书和附图应被认为是说明性的而非限制性的。
Claims (10)
1.一种实现动态数据组件应用的系统，其特征在于，所述的系统包括：
数据服务模块，用于进行数据处理及逻辑处理，提供数据接口，支撑组件业务数据；
组件库模块，与所述的数据服务模块相连接，用于根据标签库实现业务逻辑渲染及前端交互，开发功能组件，提供底层组件库；
场景管理模块，与所述的组件库模块相连接，用于提供选择组件和配置白名单，在线及可视化地对使用的渠道、组件、白名单的信息进行运营管理；
内容发布模块，与所述的场景管理模块相连接，用于为场景管理模块提供接口服务，为使用者提供在线打包服务。
2.根据权利要求1所述的实现动态数据组件应用的系统，其特征在于，所述的场景管理模块包括：
组件预览单元，与所述的组件库模块相连接，用于可视化展示动态数据组件；
组件选择单元，与所述的组件预览单元相连接，用于为使用者登记使用渠道，并挑选需使用的组件；
组件打包单元，与所述的组件选择单元和内容发布模块相连接，与内容发布模块通过rest http请求通信，将使用者选择的组件在线打包；
依赖包管理单元，与所述的组件打包单元相连接，用于将打包后的数据表发布至线上平台，通过自定义html标签进行功能开发。
3.根据权利要求1所述的实现动态数据组件应用的系统，其特征在于，所述的数据服务模块对接多个数据源，整合数据，研发业务逻辑，提供外网可访问的数据接口。
4.根据权利要求1所述的实现动态数据组件应用的系统，其特征在于，所述的组件库模块对接http接口获取数据，进行数据渲染和动作交互，集成动态数据组件。
5.根据权利要求1所述的实现动态数据组件应用的系统，其特征在于，所述的内容发布模块根据使用者的渠道信息，查询到该渠道勾选的组件列表，进行打包，上传至服务器；内容发布模块对多个组件入口进行后台打包，提供http接口服务。
6.一种利用权利要求1所述的系统实现动态数据组件应用的方法，其特征在于，所述的方法包括以下步骤：
(1)所述的数据服务模块获取业务新需求；
(2)判断组件库是否已经存在，如果是，则继续步骤(4)；否则，继续步骤(3)；
(3)所述的组件库模块研发增加相应组件，进行数据接口研发和自定义标签组件研发；
(4)所述的场景管理模块进行场景管理，选择需使用的组件，登记白名单使用来源域名和IP地址；
(5)所述的内容发布模块点击打包组件库。
7.根据权利要求3所述的实现动态数据组件应用的方法，其特征在于，所述的方法还包括研发中使用组件的步骤，具体包括以下处理过程：
(6)获取组件库js包，引用组件库js包，使用组件自定义html标签，配置在研发前端中；
(7)打包发布前端应用；
(8)进行前端展示，进行组件库js包渲染和浏览器渲染；
(9)发送动态组件数据请求，发送http请求；
(10)数据服务模块接收到http请求，查询该使用方登记的白名单，若验证通过，则返回对应数据；否则，不返回数据；
(11)根据数据渲染内容展示动态组件。
8.一种实现动态数据组件应用的装置，其特征在于，所述的装置包括：
处理器，被配置成执行计算机可执行指令；
存储器，存储一个或多个计算机可执行指令，所述计算机可执行指令被所述处理器执行时，实现权利要求6至7中任一项所述的实现动态数据组件应用的方法的各个步骤。
9.一种实现动态数据组件应用的处理器，其特征在于，所述的处理器被配置成执行计算机可执行指令，所述的计算机可执行指令被所述的处理器执行时，实现权利要求6至7中任一项所述的实现动态数据组件应用的方法的各个步骤。
10.一种计算机可读存储介质，其特征在于，其上存储有计算机程序，所述的计算机程序可被处理器执行以实现权利要求6至7中任一项所述的实现动态数据组件应用的方法的各个步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111070358.8A CN113742615A (zh) | 2021-09-13 | 2021-09-13 | 实现动态数据组件应用的系统及方法、装置、处理器及其计算机可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111070358.8A CN113742615A (zh) | 2021-09-13 | 2021-09-13 | 实现动态数据组件应用的系统及方法、装置、处理器及其计算机可读存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113742615A true CN113742615A (zh) | 2021-12-03 |
Family
ID=78738434
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111070358.8A Pending CN113742615A (zh) | 2021-09-13 | 2021-09-13 | 实现动态数据组件应用的系统及方法、装置、处理器及其计算机可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113742615A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114296834A (zh) * | 2021-12-31 | 2022-04-08 | 树根互联股份有限公司 | 组件处理方法、装置及服务器 |
Citations (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107015791A (zh) * | 2016-10-28 | 2017-08-04 | 阿里巴巴集团控股有限公司 | 一种生成图表组件系统的处理方法、装置及系统 |
| CN107305494A (zh) * | 2017-06-28 | 2017-10-31 | 户帮户（杭州）科技有限公司 | 一种企业级系统研发框架 |
| CN107832038A (zh) * | 2017-10-27 | 2018-03-23 | 中航信移动科技有限公司 | 组件库的实现方法及装置 |
| CN108628598A (zh) * | 2018-05-03 | 2018-10-09 | 山东浪潮通软信息科技有限公司 | 一种组件化的web开发方法及装置 |
| CN108958714A (zh) * | 2018-07-02 | 2018-12-07 | 平安科技（深圳）有限公司 | 业务组件式开发方法、装置、计算机设备及存储介质 |
| CN109324793A (zh) * | 2018-10-24 | 2019-02-12 | 北京奇虎科技有限公司 | 支持算法组件化的处理系统及方法 |
| CN109901838A (zh) * | 2019-01-17 | 2019-06-18 | 平安证券股份有限公司 | 基于组件化的前端开发方法、装置、设备及存储介质 |
| CN110780868A (zh) * | 2019-10-10 | 2020-02-11 | 北大方正集团有限公司 | 基于组件化模板的网站开发方法、装置、设备和存储介质 |
| CN110851114A (zh) * | 2019-10-24 | 2020-02-28 | 山东中创软件工程股份有限公司 | 一种业务系统开发方法、装置及电子设备和存储介质 |
| CN111435300A (zh) * | 2019-01-15 | 2020-07-21 | 北大方正信息产业集团有限公司 | web系统开发方法、装置、设备及存储介质 |
| CN111949261A (zh) * | 2020-07-13 | 2020-11-17 | 福建天泉教育科技有限公司 | 高复用的应用开发配置方法及其系统 |
| CN112612629A (zh) * | 2020-12-28 | 2021-04-06 | 广东广宇科技发展有限公司 | 一种组件式的数据接口实现方法与系统 |
| CN113220295A (zh) * | 2021-04-26 | 2021-08-06 | 深圳市云网万店科技有限公司 | 前端组件动态扩展的方法、系统及计算机可读存储介质 |
-
2021
- 2021-09-13 CN CN202111070358.8A patent/CN113742615A/zh active Pending
Patent Citations (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107015791A (zh) * | 2016-10-28 | 2017-08-04 | 阿里巴巴集团控股有限公司 | 一种生成图表组件系统的处理方法、装置及系统 |
| CN107305494A (zh) * | 2017-06-28 | 2017-10-31 | 户帮户（杭州）科技有限公司 | 一种企业级系统研发框架 |
| CN107832038A (zh) * | 2017-10-27 | 2018-03-23 | 中航信移动科技有限公司 | 组件库的实现方法及装置 |
| CN108628598A (zh) * | 2018-05-03 | 2018-10-09 | 山东浪潮通软信息科技有限公司 | 一种组件化的web开发方法及装置 |
| CN108958714A (zh) * | 2018-07-02 | 2018-12-07 | 平安科技（深圳）有限公司 | 业务组件式开发方法、装置、计算机设备及存储介质 |
| CN109324793A (zh) * | 2018-10-24 | 2019-02-12 | 北京奇虎科技有限公司 | 支持算法组件化的处理系统及方法 |
| CN111435300A (zh) * | 2019-01-15 | 2020-07-21 | 北大方正信息产业集团有限公司 | web系统开发方法、装置、设备及存储介质 |
| CN109901838A (zh) * | 2019-01-17 | 2019-06-18 | 平安证券股份有限公司 | 基于组件化的前端开发方法、装置、设备及存储介质 |
| CN110780868A (zh) * | 2019-10-10 | 2020-02-11 | 北大方正集团有限公司 | 基于组件化模板的网站开发方法、装置、设备和存储介质 |
| CN110851114A (zh) * | 2019-10-24 | 2020-02-28 | 山东中创软件工程股份有限公司 | 一种业务系统开发方法、装置及电子设备和存储介质 |
| CN111949261A (zh) * | 2020-07-13 | 2020-11-17 | 福建天泉教育科技有限公司 | 高复用的应用开发配置方法及其系统 |
| CN112612629A (zh) * | 2020-12-28 | 2021-04-06 | 广东广宇科技发展有限公司 | 一种组件式的数据接口实现方法与系统 |
| CN113220295A (zh) * | 2021-04-26 | 2021-08-06 | 深圳市云网万店科技有限公司 | 前端组件动态扩展的方法、系统及计算机可读存储介质 |
Non-Patent Citations (4)
| Title |
|---|
| 严仲兴: "《PHP框架技术研究与应用实践》", 31 May 2021, 黑龙江人民出版社, pages: 116 * |
| 徐鹏涛: "基于Vue的前端开发框架的设计与实现", 《中国优秀硕士学位论文全文数据库信息科技辑》, 15 October 2020 (2020-10-15), pages 17 - 31 * |
| 徐鹏涛: "基于Vue的前端开发框架的设计与实现", 《中国优秀硕士学位论文全文数据库信息科技辑》, pages 17 - 31 * |
| 赵海锋: "《白帽子安全开发实战》", 30 December 2020, 机械工业出版社, pages: 266 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114296834A (zh) * | 2021-12-31 | 2022-04-08 | 树根互联股份有限公司 | 组件处理方法、装置及服务器 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP6629848B2 (ja) | モバイルアプリ用ページ処理 | |
| CN107451162B (zh) | 网络资源访问设备、混合设备及方法 | |
| US7970944B2 (en) | System and method for platform and language-independent development and delivery of page-based content | |
| US20170185609A1 (en) | Universal adaptor for rapid development of web-based data visualizations | |
| KR101660148B1 (ko) | 애플리케이션 서버 상에서 구동되는 애플리케이션의 콤포넌트에 의한 서비스에 대한 콜을 최적화하기 위한 장치, 방법 및 머신-판독가능 저장 매체 | |
| US8930441B2 (en) | Architecture for modeled pattern based user interfaces | |
| US20110022943A1 (en) | Document object model (dom) application framework | |
| US20140372974A1 (en) | Providing design time projections for a visual program | |
| CN110263070A (zh) | 事件上报方法及装置 | |
| US20230418835A1 (en) | Systems and methods for presenting web application content | |
| CN113900636A (zh) | 一种自助化渠道业务流程开发系统及其开发方法 | |
| CN113742615A (zh) | 实现动态数据组件应用的系统及方法、装置、处理器及其计算机可读存储介质 | |
| CN105204832A (zh) | 一种实现脚本引擎的系统及方法 | |
| CN116719523A (zh) | 页面渲染方法及电子设备 | |
| CN110807535A (zh) | 统一预约平台的构建方法、构建装置和统一预约平台系统 | |
| CN110888794A (zh) | 接口测试方法和装置 | |
| CN112486482A (zh) | 一种页面展示方法和装置 | |
| US11843679B2 (en) | Automated dependency management based on page components | |
| CN116301730A (zh) | 一种基于SaaS平台的生成应用程序的方法及设备 | |
| CN113760279A (zh) | 一种生成页面的方法和装置 | |
| CN114817379A (zh) | 基于Qunee的配置项关系可视化方法、系统、设备及介质 | |
| CN113885996A (zh) | 用户界面的生成方法及装置 | |
| CN113704664A (zh) | 生成用于访问页面的路由地址的方法和装置 | |
| CN113254019A (zh) | 注册前端数据流状态文件的方法和装置 | |
| CN112230913A (zh) | 富文本内容的处理方法与装置、存储介质、电子设备 |
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 |