编排与配置可复用的交互框架构建方法及系统与流程

1.本技术涉及浏览器网页应用领域，具体而言，涉及一种编排与配置可复用的交互框架构建方法及系统。


背景技术：

2.在现有的常规前端工程中，一个工程通常只包含一个应用项目，而组件复用的常规的做法是，把这些组件抽离放到一个公用的目录中，然后在需要使用这些组件时，从页面中去引用它们，页面和组件是直接耦合，图1示出现有的一个前端项目中组件被多页面复用示意图。
3.而对于多页面的网页端来说，组件的引用会更复杂。以基于软件运营服务（saas，software as a service）的直播网页端为例，通常包括一个pc直播发起端、一个pc直播观看端和一个wap直播观看端：因为很多组件三端复用，如果也采用组件复用方式，公用组件会被放在更上一层的目录中，在多个端的应用项目的多个页面中去引用，也就意味着，增加或删除一个组件，需要同时去这三端的应用项目的页面中进行处理，于是，复杂度明显提高，维护成本增加。图2示出现有的常规的多前端项目中多组件被多页面复用结构示例图。一个组件被多个应用中的多页面引用。如果一个应用涉及到几十上百个组件，会大大增加复杂度，产生操作不够灵活，维护困难的问题。
4.因此，需要提出一种编排与配置可复用的交互框架构建方法及系统，解决多项目多页面与多组件直接耦合，导致结构复杂、维护不方便的问题。
5.在所述背景技术部分公开的上述信息仅用于加强对本技术的背景的理解，因此它可以包括不构成对本领域普通技术人员已知的现有技术的信息。


技术实现要素：

6.为了解决上述问题，本技术提出一种编排与配置可复用的交互框架构建方法及系统。
7.根据本技术的第一方面，提出一种编排与配置可复用的交互框架构建方法，包括：根据项目中需要使用的组件进行全局注册；编写所述项目中各页面的配置文件并导出；根据所述各页面的配置文件加载配置内容；根据所述配置文件与所述配置内容，进行前端路由设置，加载配置并展示页面。
8.根据一些实施例，所述配置文件中的内容包括多个键值对。
9.根据一些实施例，所述方法还包括：在各组件中全局混入标识码；所述键值对中的键与所述标识码对应，所述键值对中的值包括类注解和数组，其中：所述类注解与所述各页面中需要使用的组件分别对应；
所述数组包括该类注解对应的组件下的子组件。
10.根据一些实施例，所述根据所述各页面的配置文件加载配置内容，包括：导入所述配置文件。
11.根据一些实施例，所述根据所述各页面的配置文件加载配置内容，包括：从根节点递归遍历所述数组，获得该组件的树形结构；所述根节点为所述标识码；编译所述树形结构，获得所述页面的所述配置内容。
12.根据一些实施例，所述根据所述配置文件与所述配置内容，进行前端路由设置，加载配置并展示页面，包括：根据所述配置文件增加页面子属性，使得各页面与所述配置内容建立联系；使用路由的全局导航守卫方法拦截处理；加载不同的页面配置。
13.根据本技术的第二方面，提出一种编排与配置可复用的交互框架构建系统，包括：全局注册单元，用于根据项目中需要使用的组件进行全局注册；文件配置单元，用于编写所述项目中各页面的配置文件并导出；配置内容加载单元，用于根据所述各页面的配置文件加载配置内容；配置展示单元，用于根据所述配置文件与所述配置内容，进行前端路由设置，加载配置并展示页面。
14.根据一些实施例，所述系统还包括全局混入单元，用于在各组件中全局混入标识码；所述配置文件中的内容包括多个键值对，键与所述标识码对应，值包括类注解和数组；所述配置内容加载单元还用于：从根节点递归遍历所述数组，获得该组件的树形结构；所述根节点为所述标识码；编译所述树形结构，获得所述页面的所述配置内容。
15.根据一些实施例，所述配置内容加载单元还用于导入所述配置文件。
16.根据一些实施例，所述配置展示单元还用于：根据所述配置文件增加页面子属性，使得各页面与所述配置内容建立联系；使用路由的全局导航守卫方法拦截处理；加载不同的页面配置。
17.本技术提出一种编排与配置可复用的交互框架构建方法及系统，通过设置页面的配置文件中与组件的对应信息，在页面编排与配置时只需要根据识别码即可实现加载页面配置，在后期修改时也只需要找到对应页面的配置文件进行修改，简化流程，使得编排与配置页面具有较高的灵活度，降低页面中各组件之间的耦合度，降低维护难度应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本技术。
附图说明
18.通过参照附图详细描述其示例实施例，本技术的上述和其它目标、特征及优点将变得更加显而易见。下面描述的附图仅仅是本技术的一些实施例，而不是对本技术的限制。
19.图1示出现有的一个前端项目中组件被多页面复用示意图；图2示出现有的常规的多前端项目中多组件被多页面复用结构示例图；图3示出一示例性实施例的编排与配置可复用的交互框架构建方法流程图；图4示出一示例性实施例的编排与配置可复用的交互框架构建系统示意图。
具体实施方式
20.现在将参考附图更全面地描述示例实施例。然而，示例实施例能够以多种形式实施，且不应被理解为限于在此阐述的实施例；相反，提供这些实施例使得本技术将全面和完整，并将示例实施例的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。
21.所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本公开的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而没有这些特定细节中的一个或更多，或者可以采用其它的方式、组元、材料、装置等。在这些情况下，将不详细示出或描述公知结构、方法、装置、实现、材料或者操作。
22.附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。
23.本技术的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其他步骤或单元。
24.本领域技术人员可以理解，附图只是示例实施例的示意图，附图中的模块或流程并不一定是实施本技术所必须的，因此不能用于限制本技术的保护范围。
25.图3示出一示例性实施例的编排与配置可复用的交互框架构建方法流程图。
26.s101，根据项目中需要使用的组件进行全局注册。
27.根据示例实施例，本技术以业务线为单位，一条业务线是一个工程，一个工程下包括多个web端应用。以saas业务线为例：一个saas工程下面包含pc发起端、pc观看端以及wap观看端三个应用。
28.根据示例实施例，一个端应用为一个项目，确定各项目分别需要使用的组件，在入口文件初始化时，通过import导入并使用vue.use进行全局注册。
29.s102，在各组件中全局混入标识码。
30.根据示例实施例，在入口文件初始化时，使用vue.mixin的方法全局混入标识码，其中，标识码为混入到每个组件的props属性中的一个cuid属性。
31.s103，编写项目中各页面的配置文件并导出。
32.根据示例实施例，一个项目包括多个页面，给每一个页面编写一个对应的配置文件并导出。
33.根据示例实施例，配置文件中的内容包括多个key-value形式的键值对，其中，键
值对中的键key是开发人员自定义的组件id，与各组件中混入的标识码对应，键值对中的值value是一个对象，包括类注解component，数组children以及其它属性，其中：类注解component与各页面中需要使用的组件分别对应；数组children包括该类注解component对应的组件下的子组件。
34.根据示例实施例，每个组件的props属性中的一个cuid属性，与配置文件中的key对应。
35.s104，根据各页面的配置文件加载配置内容。
36.根据示例实施例，在入口文件初始化时，通过import导入编排的页面的配置文件，并命名为pageconfig，通过读取pageconfig[pagekey]的方式获取某个页面的配置内容。
[0037]
根据示例实施例，在render函数中，通过cuid属性找到对应的页面的配置信息，然后读取数组children中的子组件信息，最后把子组件进行挂载渲染。
[0038]
根据示例实施例，在views目录找到要展示的页面文件，加入vmp-air-container标签，设置属性cuid为配置文件中的根节点，从根节点递归遍历数组，获得该组件的树形结构，子组件也都通过vmp-air-container标签传入cuid属性进行自动渲染；编译树形结构，获得页面的配置内容；其中，根节点为标识码。
[0039]
s105，根据配置文件与配置内容，进行前端路由设置，加载配置并展示页面。
[0040]
根据示例实施例，每个前端路由对应一个页面，根据配置文件在meta属性中增加页面page子属性，对应值是配置文件的名称，使得各页面与配置内容建立联系；再使用路由的全局导航守卫beforeeach方法拦截处理；根据不同的页面，动态加载不同的页面配置。
[0041]
根据一些实施例，在不需要某些组件或者要更换组件位置的时候，只需要从页面和配置page-config中找到对应页面的配置文件进行修改即可。
[0042]
本技术提出一种编排与配置可复用的交互框架构建方法，通过设置页面的配置文件中与组件的对应信息，在页面编排与配置时只需要根据识别码即可实现加载页面配置，在后期修改时也只需要找到对应页面的配置文件进行修改，简化流程，使得编排与配置页面具有较高的灵活度，降低页面中各组件之间的耦合度，降低维护难度。
[0043]
图4示出一示例性实施例的编排与配置可复用的交互框架构建系统示意图。
[0044]
如图4所示，编排与配置可复用的交互框架构建系统包括全局注册单元201，文件配置单元203，配置内容加载单元205，配置展示单元207和全局混入单元209。
[0045]
根据示例实施例，全局注册单元201，用于根据项目中需要使用的组件进行全局注册。
[0046]
根据示例实施例，本技术以业务线为单位，一条业务线是一个工程，一个工程下包括多个web端应用。以saas业务线为例：一个saas工程下面包含pc发起端、pc观看端以及wap观看端三个应用。
[0047]
根据示例实施例，一个端应用为一个项目，全局注册单元201确定各项目分别需要使用的组件，在入口文件初始化时，全局注册单元201通过import导入并使用vue.use进行全局注册。
[0048]
根据示例实施例，全局混入单元209，用于在各组件中全局混入标识码。
[0049]
根据示例实施例，在入口文件初始化时，全局混入单元209使用vue.mixin的方法全局混入标识码，其中，标识码为混入到每个组件的props属性中的一个cuid属性。
[0050]
根据示例实施例，文件配置单元203，用于编写项目中各页面的配置文件并导出。
[0051]
根据示例实施例，一个项目包括多个页面，文件配置单元203给每一个页面编写一个对应的配置文件并导出。
[0052]
根据示例实施例，配置文件中的内容包括多个key-value形式的键值对，其中，键值对中的键key是开发人员自定义的组件id，与各组件中混入的标识码对应，键值对中的值value是一个对象，包括类注解component，数组children以及其它属性，其中：类注解component与各页面中需要使用的组件分别对应；数组children包括该类注解component对应的组件下的子组件。
[0053]
根据示例实施例，每个组件的props属性中的一个cuid属性，与配置文件中的key对应。
[0054]
根据示例实施例，配置内容加载单元205，用于根据各页面的配置文件加载配置内容。
[0055]
根据示例实施例，在入口文件初始化时，配置内容加载单元205通过import导入编排的页面的配置文件，并命名为pageconfig，配置内容加载单元205通过读取pageconfig[pagekey]的方式获取某个页面的配置内容。
[0056]
根据示例实施例，在render函数中，配置内容加载单元205通过cuid属性找到对应的页面的配置信息，然后读取数组children中的子组件信息，最后把子组件进行挂载渲染。
[0057]
根据示例实施例，配置内容加载单元205在views目录找到要展示的页面文件，加入vmp-air-container标签，设置属性cuid为配置文件中的根节点，从根节点递归遍历数组，获得该组件的树形结构，子组件也都通过vmp-air-container标签传入cuid属性进行自动渲染；编译树形结构，获得页面的配置内容；其中，根节点为标识码。
[0058]
根据示例实施例，配置展示单元207，用于根据所述配置文件与所述配置内容，进行前端路由设置，加载配置并展示页面。
[0059]
根据示例实施例，每个前端路由对应一个页面，配置展示单元207根据配置文件在meta属性中增加页面page子属性，对应值是配置文件的名称，使得各页面与配置内容建立联系；再使用路由的全局导航守卫beforeeach方法拦截处理；根据不同的页面，动态加载不同的页面配置。
[0060]
根据一些实施例，在不需要某些组件或者要更换组件位置的时候，只需要从页面和配置page-config中找到对应页面的配置文件进行修改即可。
[0061]
本技术提出一种编排与配置可复用的交互框架构建系统，通过设置页面的配置文件中与组件的对应信息，在页面编排与配置时只需要根据识别码即可实现加载页面配置，在后期修改时也只需要找到对应页面的配置文件进行修改，简化流程，使得编排与配置页面具有较高的灵活度，降低页面中各组件之间的耦合度，降低维护难度。
[0062]
应清楚地理解，本技术描述了如何形成和使用特定示例，但本技术不限于这些示例的任何细节。相反，基于本技术公开的内容的教导，这些原理能够应用于许多其它实施例。
[0063]
此外，需要注意的是，上述附图仅是根据本技术示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。
[0064]
以上具体地示出和描述了本技术的示例性实施例。应可理解的是，本技术不限于这里描述的详细结构、设置方式或实现方法；相反，本技术意图涵盖包含在所附权利要求的精神和范围内的各种修改和等效设置。