CN110515606A - 一种基于区块的组件开发方法 - Google Patents

Abstract

本发明公开了一种基于区块的组件开发方法，其特征在于：包括区块开发、区块设置和区块渲染三个步骤，具体如下：步骤一，首先对开发好的区块进行审核发布，审核完成后会生成当前区块对应的版本号；步骤二，将当前区块的最新版本对应的默认展示渲染到页面上，通过节点的外围包裹div上的属性来识别区块上的节点，将当前区块对应的版本设置为当前区块最新版本；步骤三，根据自定义标签以及版本号去获取渲染模板，并将最终的html代码返回到浏览器中展示出来。达到能够满足客户的美观需求，开发简单，同种需求下，比常规组件的开发周期要短，能够重复利用平台中已有的组件，设置要比原先的组件设置简单明了的需求的效果。

Description

一种基于区块的组件开发方法

技术领域

本发明涉及计算机数据处理领域，特别是涉及一种基于区块的组件开发方法。

背景技术

某公司营销平台是一款基于Saas模式的云建站工具，平台上有很多积木组件，客户可以通过一个或多个组件组合成网页的一行，客户页面由这些行组合成，这样客户就能够很轻松的通过拖拽组件生成自己想要的页面。但是随着公司业务的快速发展，客户的需求也越来越多，只通过组件的形式来创建客户的网站会出现一些局限性：组件设计是满足12栅格模式的，这样的设计能够很方便的让开发者开发出响应式的组件，12栅格生成的网站一般比较规整，如果客户有一些特殊的需求，用12栅格模式就难以满足；虽然组件多种多样，但是随着客户量的几何增长，客户的需求点也越来越多，经常会创建新的组件来满足需求，但是开发新组件的周期比较长，需要开发组件设置页面、组件渲染页面；组件拖拽虽然能够很方便的构建页面的一行，但是调整行里面各组件之间的布局，依然相对比较麻烦；组件的代码层级比较深，导致网站代码量比较大。

基于上述情况，我们需要开发一种特殊的“组件”，这种“组件”可以满足组合起来能够满足客户的美观需求，开发简单，同种需求下，比常规组件的开发周期要短，能够重复利用平台中已有的组件，设置要比原先的组件设置简单明了的需求。

发明内容

本发明所要解决的技术问题是克服现有技术的不足，提供一种基于区块的组件开发方法。

为解决上述技术问题，本发明提供一种基于区块的组件开发方法，其特征在于，包括区块开发、区块设置和区块渲染三个步骤，具体如下：

步骤一，区块开发：首先开发者命名区块、选择区块所对应的分类、以及区块的预览截图，保存后生成区块的唯一标示，然后开发者识别要开发的区块中的节点数量，节点的外围包裹边界的html为<div data-wrap-type＝"1"></div>，将开发者开发的渲染页面html保存到数据库存储介质中时，系统检测区块各个节点的设置是否正确，并识别开发者开发的html，将各个节点内容提取出来并在原先的外围包裹div标签上自动生成并添加一个新的属性data-auto_uuid作为节点的唯一标示，同时并将外围包裹中的html数据存储到存储介质中，并生成一条对应的自定义标签，所述自定义标签用于获取客户设置的节点内容并将其数据渲染成浏览器可识别的html，对开发好的区块进行审核发布，审核完成后会生成当前区块对应的版本号；

步骤二，区块设置：当区块被应用时，先将区块的唯一标示、用户网站的唯一标示以及区块最新的版本号插入到存储介质中，将当前区块的最新版本对应的默认展示渲染到页面上，通过节点的外围包裹div上的属性来识别区块上的节点，并调用对应的设置页面进行设置，设置完成保存时会在区块设置表中将当前区块对应的版本设置为当前区块最新版本；

步骤三，区块渲染：当区块渲染时，通过节点的唯一标示、节点的版本号获取区块当前版本号下的模板，然后加载区块开发中各个节点中对应生成的自定义标签，根据自定义标签以及版本号去获取渲染模板，通过节点的uuid获取客户设置的数据并整合生成对应的html，将生成的html替换回各自对应的节点外围包裹框中，并将最终的html代码返回到浏览器中展示出来。

所述步骤一中，首先判断要开发的区块是新增区块还是在原有区块基础上进行修改的区块，对于新增区块，依次进行命名、选择区块所对应的区块分类、上传区块预览图和填写区块附加信息的操作，所述节点包括动态节点和静态节点，区分动态节点和静态节点，如果为动态节点，则在外围包裹上加上“data-storage”属性，并且指定当前节点对应的组件或者节点模板对应的id属性“data-relate-appid”,如果为静态节点，则填写上系统支持的data-blocksEditor-type属性，所述系统检测区块各个节点的设置是否正确的操作包括系统会检测静态节点的节点type是否正确；对于在原有区块基础上进行修改的区块审核发布时，可以选择新生成版本或者是在原有的版本上修改，选择新生成版本则生成新的版本号并将区块页面插入到存储介质中，如果是选择在已有的版本上修改，则根据版本号和区块ID将开发好的区块页面信息更新到对应的存储介质中。

所述步骤二中，通过节点的外围包裹div上的data属性来识别区块上的节点为动态节点还是静态节点，当识别为静态节点时，会识别当前节点的data-blocksEditor-type属性，然后调用对应的设置页面进行设置，设置后生成的代码为html结构；当识别为动态节点时，会识别节点包裹div上的data-relate-appid属性值，然后调用对应的页面设置页面进行设置，设置后的存储的代码为json结构，每个节点保存到存储介质的中数据唯一key为开发区块时生成的data-auto_uuid对应的值。

所述步骤三中，所述自定义标签包含能够识别当前区块和节点的唯一标示，然后根据这两个唯一标示去获取渲染模板，具体为，通过自定义标签上的uuid、区块的唯一标示以及区块版本号去查询存储介质中对应的区块节点模板数据，然后根据区块节点的uuid、区块设置的唯一标示去查询区块节点设置数据，如果查询不到区块节点的设置数据则将区块模板数据中的默认数据作为节点设置数据；判断区块节点是静态节点还是动态节点，如果为静态节点则直接返回上一步中获取的节点设置数据，如果为动态节点，则通过区块节点模板数据和步骤二中获取的节点设置json数据组合渲染成静态html数据进行返回。

本发明所达到的有益效果:

1、不再受12栅格展示限制，一个区块既是一个行，行中由多个节点组成，这些节点不受12栅格限制可自由组合(由开发者控制)，可满足客户多种多样的展示需求。

2、开发的简便性，区块中的静态节点设置页面已经通过系统统一生成设置页面不需要再一次开发，动态节点的设置页面可以使用已有的组件的设置页面或者开发者已经开发好的动态模板设置页面，这样大部分开发者只需要去开发渲染页面即可不需要再去处理设置页面。

3、网站代码结构简化：比原先的栅格结构组成的页面代码层级减少了2个层级，代理层级更加清晰，有利于网站的SEO，提高网站在搜索引擎的排名结果(栅格结构的一行结构是：外部容器>行>列>布局>组件，使用区块后的一行的结构：外部容器>区块>节点)。

4、开发者修改已有的区块，可选择是否对已经使用当前区块的客户产生的影响，开发者在区块上开发新功能时可选择产生新版本对已使用的区块不产生影响；如果是修改最新版本的区块BUG时，开发者可通过选择对最新版本进行修改来修改最新版本的数据对已经使用最新版本区块的客户网站进行修复。

附图说明

图1为本发明的示例性实施例中的区块开发流程简图；

图2为本发明的示例性实施例区块渲染页面保存时节点处理流程简图；

图3为本发明的示例性实施例中的区块设置流程示意图；

图4为本发明的示例性实施例中的区块节点设置流程示意图；

图5为本发明的示例性实施例中的区块渲染流程示意图；

图6为本发明的示例性实施例中的区块内节点的渲染流程示意图。

具体实施方式

区块的开发是基于在线的形式进行开发，每个区块就是原先组件组合中的一行，一个区块由一个或者多个节点组成，节点分为静态节点和动态节点(节点是让客户自定义自己的选项的，如静态节点为图片类型，则客户可以上传图片)。

静态节点：保存到存储介质的代码跟渲染到浏览器上的代码一致，无需再通过中间程序渲染的节点(比如：图片、文字等等)，客户设置后保存到存储介质的数据为html结构。

动态节点：保存到存储介质中的代码跟渲染到浏览器上的代码不一致，需要通过中间程序进行中转渲染的节点，动态节点的设置以及数据获取可以复用已经开发的一些组件数据，客户保存到存储介质中的数据结构为json结构(如产品列表、文章列表等等)。

本发明提供一种基于区块的组件开发方法，其特征在于，包括区块开发、区块设置和区块渲染三个步骤，具体如下：

步骤一，区块开发：首先开发者命名区块、选择区块所对应的分类、以及区块的预览截图，保存后生成区块的唯一标示，然后开发者识别要开发的区块中的节点数量，节点的外围包裹边界的html为<div data-wrap-type＝"1"></div>，将开发者开发的渲染页面html保存到数据库存储介质中时，系统检测区块各个节点的设置是否正确，并识别开发者开发的html，将各个节点内容提取出来并在原先的外围包裹div标签上自动生成并添加一个新的属性data-auto_uuid作为节点的唯一标示，同时并将外围包裹中的html数据存储到存储介质中，并生成一条对应的自定义标签，所述自定义标签用于获取客户设置的节点内容并将其数据渲染成浏览器可识别的html，对开发好的区块进行审核发布，审核完成后会生成当前区块对应的版本号；

步骤二，区块设置：当区块被应用时，先将区块的唯一标示、用户网站的唯一标示以及区块最新的版本号插入到存储介质中，将当前区块的最新版本对应的默认展示渲染到页面上，通过节点的外围包裹div上的属性来识别区块上的节点，并调用对应的设置页面进行设置，设置完成保存时会在区块设置表中将当前区块对应的版本设置为当前区块最新版本；

步骤三，区块渲染：当区块渲染时，通过节点的唯一标示、节点的版本号获取区块当前版本号下的模板，然后加载区块开发中各个节点中对应生成的自定义标签，根据自定义标签以及版本号去获取渲染模板，通过节点的uuid获取客户设置的数据并整合生成对应的html，将生成的html替换回各自对应的节点外围包裹框中，并将最终的html代码返回到浏览器中展示出来。

所述步骤一中，首先判断要开发的区块是新增区块还是在原有区块基础上进行修改的区块，对于新增区块，依次进行命名、选择区块所对应的区块分类、上传区块预览图和填写区块附加信息的操作，所述节点包括动态节点和静态节点，区分动态节点和静态节点，如果为动态节点，则在外围包裹上加上“data-storage”属性，并且指定当前节点对应的组件或者节点模板对应的id属性“data-relate-appid”,如果为静态节点，则填写上系统支持的data-blocksEditor-type属性，所述系统检测区块各个节点的设置是否正确的操作包括系统会检测静态节点的节点type是否正确；对于在原有区块基础上进行修改的区块审核发布时，可以选择新生成版本或者是在原有的版本上修改，选择新生成版本则生成新的版本号并将区块页面插入到存储介质中，如果是选择在已有的版本上修改，则根据版本号和区块ID将开发好的区块页面信息更新到对应的存储介质中。

所述步骤二中，通过节点的外围包裹div上的data属性来识别区块上的节点为动态节点还是静态节点，当识别为静态节点时，会识别当前节点的data-blocksEditor-type属性，然后调用对应的设置页面进行设置，设置后生成的代码为html结构；当识别为动态节点时，会识别节点包裹div上的data-relate-appid属性值，然后调用对应的页面设置页面进行设置，设置后的存储的代码为json结构，每个节点保存到存储介质的中数据唯一key为开发区块时生成的data-auto_uuid对应的值。

所述步骤三中，所述自定义标签包含能够识别当前区块和节点的唯一标示，然后根据这两个唯一标示去获取渲染模板，具体为，通过自定义标签上的uuid、区块的唯一标示以及区块版本号去查询存储介质中对应的区块节点模板数据，然后根据区块节点的uuid、区块设置的唯一标示去查询区块节点设置数据，如果查询不到区块节点的设置数据则将区块模板数据中的默认数据作为节点设置数据；判断区块节点是静态节点还是动态节点，如果为静态节点则直接返回上一步中获取的节点设置数据，如果为动态节点，则通过区块节点模板数据和步骤二中获取的节点设置json数据组合渲染成静态html数据进行返回。

下面结合附图和示例性实施例对本发明作进一步的说明：

以下为区块开发、区块设置以及区块渲染阶段具体实现：

如图1所示的区块开发流程：

开发者开发一个区块，会判断是新增区块还是再原有的区块基础上进行修改。如果是新增，开发者需要给新开发的区块命名，然后选择区块所对应的区块分类，最后再上传区块的预览图以及填写区块的一些附加信息，保存后会进入到区块的页面开发阶段，开发者开发完成区块后，会提交审核发布区块，提交审核发布区块时，开发者可以选择是新生成版本还是再原有的版本上修改(如果是新增的区块则只有新生成版本)，如果选择新生成版本则生成新的版本号并将区块页面插入到存储介质中，如果是选择在已有的版本上修改，则根据版本号跟区块ID将开发好的区块页面信息更新到对应的存储介质中。

如图2所示的区块页面保存时节点处理流程：

开发者开发好开发的区块的html后会点击保存将开发者开发的html保存到数据库存储介质中时，首先系统会检测区块各节点的设置是否正确(如静态节点的节点type是否正确等等)，系统将会识别开发者开发的html，将各个节点内容提取出来并在原先的外围包裹div标签上自动生成并添加一个新的属性data-auto_uuid(这个data-auto_uuid非常重要，它作为节点的唯一标示，在后面渲染阶段获取客户自己设置的数据既是通过它获取)，同时并将外围包裹中间的html数据存储到存储介质中，并生成一条对应的自定义标签(该标签的作用是获取客户设置的节点内容并将其数据渲染成浏览器可识别的html)。

如图3所示的区块设置流程处理：

当客户应用某个区块时，会先将区块的唯一标示、用户网站的唯一标示以及区块最新的版本号插入到存储介质中，然后将区块的默认展示页面渲染到浏览器上。

如图4所示的客户设置区块汇总节点流程：

此时客户鼠标移动动区块的某个节点时会出现设置按钮，当客户点击设置按钮时，程序将通过节点包裹div上的data-storage属性来识别当前节点为动态节点还是静态节点，当程序识别为静态节点时，会识别当前节点的data-blocksEditor-type属性,然后调用对应的设置模块展示给客户对应设置页面进行设置，客户设置后生成的代码为html结构；当客户识别为动态节点时会识别节点包裹div上的data-relate-appid属性值，然后调用后台程序展示对应的页面设置页面进行设置，客户设置后的存储的代码为json结构，每个节点保存到存储介质的中数据唯一key为开发区块时生成的data-auto_uuid对应的值

如图5所示的区块渲染流程处理：

当区块渲染时，程序会通过节点的唯一标示、节点的版本号获取区块当前版本号下的模板，然后根据区块模板中在开发过程中生成的节点自定义标签去生成对应的区块节点html，然后将区块节点渲染的html分别替换这些标签最后渲染到浏览器端。

如图6所示的是区块内节点渲染流程处理：

当程序识别到区块节点的自定义标签时，会通过自定义标签上的uuid、区块的唯一标示以及区块版本号去查询存储介质中对应的区块节点模板数据，然后根据区块节点的uuid、区块设置的唯一标示去查询区块节点设置数据，如果查询不到区块节点的设置数据则将区块模板数据中的默认数据作为节点设置数据；判断区块节点是静态节点还是动态节点，如果为静态节点则直接返回上一步中获取的节点设置数据，如果为动态节点，则通过区块节点模板数据和上一步中获取的节点设置json数据组合渲染成静态html(渲染引擎渲染如：freemarker)数据进行返回。

本发明主要用于提供一种基于区块的组件开发方法，其有益效果在于：

1、不再受12栅格展示限制，一个区块既是一个行，行中由多个节点组成，这些节点不受12栅格限制可自由组合(由开发者控制)，可满足客户多种多样的展示需求；

2、开发的简便性，区块中的静态节点设置页面已经通过系统统一生成设置页面不需要再一次开发，动态节点的设置页面可以使用已有的组件的设置页面或者开发者已经开发好的动态模板设置页面，这样大部分开发者只需要去开发渲染页面即可不需要再去处理设置页面；

3、网站代码结构简化：比原先的栅格结构组成的页面代码层级减少了2个层级，代理层级更加清晰，有利于网站的SEO，提高网站在搜索引擎的排名结果(栅格结构的一行结构是：外部容器>行>列>布局>组件，使用区块后的一行的结构：外部容器>区块>节点)。

4、开发者修改已有的区块，可选择是否对已经使用当前区块的客户产生的影响，开发者在区块上开发新功能时可选择产生新版本对已使用的区块不产生影响；如果是修改最新版本的区块BUG时，开发者可通过选择对最新版本进行修改来修改最新版本的数据对已经使用最新版本区块的客户网站进行修复。

以上实施例不以任何方式限定本发明，凡是对以上实施例以等效变换方式做出的其它改进与应用，都属于本发明的保护范围。

Claims (4)

1.一种基于区块的组件开发方法，其特征在于：包括区块开发、区块设置和区块渲染三个步骤，具体如下：

步骤一，区块开发：首先开发者命名区块、选择区块所对应的分类、以及区块的预览截图，保存后生成区块的唯一标示，然后开发者识别要开发的区块中的节点数量，节点的外围包裹边界的html为<div data-wrap-type＝"1"></div>，将开发者开发的渲染页面html保存到数据库存储介质中时，系统检测区块各个节点的设置是否正确，并识别开发者开发的html，将各个节点内容提取出来并在原先的外围包裹div标签上自动生成并添加一个新的属性data-auto_uuid作为节点的唯一标示，同时并将外围包裹中的html数据存储到存储介质中，并生成一条对应的自定义标签，所述自定义标签用于获取客户设置的节点内容并将其数据渲染成浏览器可识别的html，对开发好的区块进行审核发布，审核完成后会生成当前区块对应的版本号；

步骤二，区块设置：当区块被应用时，先将区块的唯一标示、用户网站的唯一标示以及区块最新的版本号插入到存储介质中，将当前区块的最新版本对应的默认展示渲染到页面上，通过节点的外围包裹div上的属性来识别区块上的节点，并调用对应的设置页面进行设置，设置完成保存时会在区块设置表中将当前区块对应的版本设置为当前区块最新版本；

步骤三，区块渲染：当区块渲染时，通过节点的唯一标示、节点的版本号获取区块当前版本号下的模板，然后加载区块开发中各个节点中对应生成的自定义标签，根据自定义标签以及版本号去获取渲染模板，通过节点的uuid获取客户设置的数据并整合生成对应的html，将生成的html替换回各自对应的节点外围包裹框中，并将最终的html代码返回到浏览器中展示出来。

2.如权利要求1所述的一种基于区块的组件开发方法，其特征在于：所述步骤一中，首先判断要开发的区块是新增区块还是在原有区块基础上进行修改的区块，对于新增区块，依次进行命名、选择区块所对应的区块分类、上传区块预览图和填写区块附加信息的操作，所述节点包括动态节点和静态节点，区分动态节点和静态节点，如果为动态节点，则在外围包裹上加上“data-storage”属性，并且指定当前节点对应的组件或者节点模板对应的id属性“data-relate-appid”,如果为静态节点，则填写上系统支持的data-blocksEditor-type属性，所述系统检测区块各个节点的设置是否正确的操作包括系统会检测静态节点的节点type是否正确；对于在原有区块基础上进行修改的区块审核发布时，可以选择新生成版本或者是在原有的版本上修改，选择新生成版本则生成新的版本号并将区块页面插入到存储介质中，如果是选择在已有的版本上修改，则根据版本号和区块ID将开发好的区块页面信息更新到对应的存储介质中。

3.如权利要求2所述的一种基于区块的组件开发方法，其特征在于：所述步骤二中，通过节点的外围包裹div上的data属性来识别区块上的节点为动态节点还是静态节点，当识别为静态节点时，会识别当前节点的data-blocksEditor-type属性，然后调用对应的设置页面进行设置，设置后生成的代码为html结构；当识别为动态节点时，会识别节点包裹div上的data-relate-appid属性值，然后调用对应的页面设置页面进行设置，设置后的存储的代码为json结构，每个节点保存到存储介质的中数据唯一key为开发区块时生成的data-auto_uuid对应的值。

4.如权利要求3所述的一种基于区块的组件开发方法，其特征在于：所述步骤三中，所述自定义标签包含能够识别当前区块和节点的唯一标示，然后根据这两个唯一标示去获取渲染模板，具体为，通过自定义标签上的uuid、区块的唯一标示以及区块版本号去查询存储介质中对应的区块节点模板数据，然后根据区块节点的uuid、区块设置的唯一标示去查询区块节点设置数据，如果查询不到区块节点的设置数据则将区块模板数据中的默认数据作为节点设置数据；判断区块节点是静态节点还是动态节点，如果为静态节点则直接返回上一步中获取的节点设置数据，如果为动态节点，则通过区块节点模板数据和步骤二中获取的节点设置json数据组合渲染成静态html数据进行返回。