CN114115883B

CN114115883B - 一种使用中台业务能力快速构建前端应用的方法

Info

Publication number: CN114115883B
Application number: CN202210088705.8A
Authority: CN
Inventors: 李楠; 陈新宇; 蒋卫星; 曹青
Original assignee: Guangzhou Yunxi Technology Co ltd
Current assignee: Guangzhou Yunxi Technology Co ltd
Priority date: 2022-01-26
Filing date: 2022-01-26
Publication date: 2022-06-03
Anticipated expiration: 2042-01-26
Also published as: CN114115883A

Abstract

本发明公开了一种使用中台业务能力快速构建前端应用的方法，包含以下步骤：中台业务能力产出数据对象，通过R2M2模型转换为前端所识别的渲染语言；创建应用，用于建立后续设计过程中产生资源的归属关系；创建页面，进行页面设计：从组件库面板拖拽所需组件到渲染器，将组件与数据对象以及R2M2模型关联，并通过配置器来设置组件的参数；保存页面渲染语言，完成前端应用的构建；通过页面动态路由进行访问。本发明使用中台业务生产的数据对象+R2M2映射模型+多端同构组件的新思想来重塑前端应用的开发流程，以此方法来达到减少工作量、规范开发过程、提高代码质量以及降低维护成本的目的。

Description

一种使用中台业务能力快速构建前端应用的方法

技术领域

本发明涉及及应用软件设计领域，特别涉及一种使用中台业务能力快速构建前端应用的方法。

背景技术

数字化时代企业对软件开发的需求越来越多，变化越来越快速，响应要求越来越敏捷，同时成本要求越来越低，传统的开发模式或旧有的开发平台已不足以支撑新时代的要求，我们必须寻求新的解决方案。在这过程中，软件开发逐渐发展出两种模式：后端基于中台的开发模式和前端表单驱动的低代码开发模式。但是，上述两者独立发展，各自有各自的问题。

首先，中台目前只提供了一堆中心和一堆API，很难系统化且直观地展现中台的能力，导致在使用中台的过程中以及基于中台开发前端应用时仍需很多的开发工作。

其次，从前端应用开发来看，表单驱动的低代码构建平台没有有效地借助中台提供的服务能力来快速编排页面逻辑。此外，平台本身在界面交互的灵活性方面还有所欠缺，仅提供几套固化的界面交互模板，不可扩展和定制，对应用的交互方式设计支持较差，不能满足愈加丰富的前端应用界面展示形式和交互能力。

针对上述问题，本发明提供一种兼蓄二者优势，避免二者劣势的快速构建前端应用的解决方案：本发明技术方案中，页面既能灵活的设计，又能适应中台能力的快速变化，从而将中台能力直接透出到前端融为一体来提升软件的开发效率。

发明内容

本发明的目的在于克服现有技术的缺点与不足，提供一种使用中台业务能力快速构建前端应用的方法，该方法既可提高应用软件交互界面的开发效率，又可以灵活响应中台业务需求的变化。

本发明的目的通过以下的技术方案实现：

一种使用中台业务能力快速构建前端应用的方法，包含以下步骤：

中台业务能力产出数据对象，通过R2M2（Request-Response Model Mapping）模型转换为前端所识别的页面渲染语言；所述数据对象包括一组对特定对象操作的API；

创建应用，用于建立后续设计过程中产生资源的归属关系；

创建页面，进行页面设计：从组件库面板拖拽所需组件到渲染器，将组件与数据对象以及R2M2模型关联，并通过配置器修改组件的参数；

保存页面渲染语言，所述渲染语言（渲染语言是组件属性字典的索引、参数和参数值，参数包含了节点/区块、样式、R2M2模型、布局以及交互数据），完成前端应用的构建；

通过页面动态路由（即渲染引擎路由加上页面ID）进行访问。

所述中台业务能力，其设计方法包括以下步骤：

创建新应用或者导入已有应用，用于建立后续所有数据的归属关系；

在应用工程，对API进行数据对象标记；

提供扫描插件进行代码扫描，获取数据对象以及API信息进行存储；

获取API的DTO信息进行存储，所述DTO信息为API的入参和返回值；

API以及DTO作为中台业务能力的具象化供其他开发环节使用。

所述使用中台业务能力快速构建前端应用的方法，采用多端同构设计：以数据模型驱动为基础，通过对页面进行布局与编排，保存为页面渲染语言；结合前端组件库（包含端无关组件库及APP、小程序、H5的各端具体实现组件库），可实现多端同构，只需要进行一次页面编排设计，即可同时生成APP、小程序、H5三种形态的前端应用。

所述使用中台业务能力快速构建前端应用的方法，采用数据模型以及API驱动进行页面设计：通过创建数据模型即可生成RESTful规范API，由API的入参及返回值来定义页面组件的字段和描述；再结合R2M2模型映射即可生成一个具备完整功能的页面，所述完整功能包括页面布局、用户交互、业务逻辑、接口请求。

所述使用中台业务能力快速构建前端应用的方法，为闭环的方法：中台业务能力生产数据对象，所述数据对象是由一组API封装而成；定义与前端组件匹配的R2M2模型；使用R2M2模型将中台数据对象转换成前端所需数据结构，转换结果是可被保存到数据库的结构化数据；中台资源中心可管理这些数据的可见权限范围；再由渲染器读取并解析页面渲染语言从而渲染出前端页面。

所述页面设计，是通过可视化的页面编辑器，支持引入多种Web开发语言所实现的渲染器，加上与之匹配的前端组件库完成的。

所述组件库以场景划分，逻辑自洽；所述渲染器机制高扩展性；所述组件库形成及更新步骤为：

（1）将中台业务进行解构，形成抽象组件。所述抽象组件包括：功能组件/基础组件/通用组件动作/通用系统行为；

（2）抽象组件向上拼装，形成场景组件；

（3）重复步骤（1）、（2），不断进行新的解构和重新拼装，完成组件库的更新；

（4）所述组件库通过封装，把组件抽象为属性字典来描述。

所述通过组件库设计页面的步骤为：

（1）拖拽组件设计页面，组合出所需的页面效果，并生成页面的渲染语言；

（2）页面渲染语言可以保存到数据库，在访问页面时读取并交由渲染引擎解析，并动态设置组件的参数值，从而渲染出页面。

本发明与现有技术相比，具有如下优点和有益效果：

本发明使用中台生产的数据对象+R2M2映射模型+多端同构组件的新思想来重塑整个前端应用的开发流程，而不是局限于只构建一个具体的页面功能。本发明意图通过这种方式，把需要人工开发代码的过程变成对数据的配置，以此来达到减少工作量、规范开发过程、提高代码质量以及降低维护成本的目的。

附图说明

图1为本发明所述使用中台数据对象到构建前端应用的示意图。

图2为本发明所述中台前端开发架构图。

图3为本发明所述使用中台业务能力快速构建前端应用的方法的流程图。

图4为本发明所述页面渲染过程图。

具体实施方式

下面结合实例及附图对本发明作进一步详细的描述，但本发明的实施方式不限于此。

如图1，所述使用中台业务能力快速构建前端应用的方法，为闭环的方法：中台业务能力生产数据对象，所述数据对象是由一组API封装而成；定义与前端组件匹配的R2M2模型；使用R2M2模型将中台数据对象转换成前端所需数据结构，转换结果是可被保存到数据库的结构化数据；中台资源中心可管理这些数据的可见权限范围；再由渲染器渲染出经过规划后的前端页面。

如图2、3，一种使用中台业务能力快速构建前端应用的方法，包括以下步骤：

S1、创建应用，用于建立后续设计过程中产生资源的归属关系；例如创建一个页面，页面归属于某个应用；

S2、定义数据对象；所述定义数据对象是通过中台业务能力生成；例如中台会员中心将产生会员对象，所述对象元数据信息,包括id、会员名称name、年龄age等，以及针对会员对象的增删改查、批量增删改查等通用及特定的业务操作即API；

S3、创建页面，从组件面板拖拽所需组件到渲染器，选择数据对象，获取数据对象描述的一组API以及DTO，将这些API和DTO与组件约定的标准行为进行绑定，快速生成一个页面，并通过配置器来设置组件的参数。例如拖一个“查询表格”组件到渲染器，选择数据对象“会员”，获取会员增删改查API，根据组件的预先设计约定，会自动将“查询表格”的查询操作与查询API绑定，新增操作与新增API绑定，删除操作与删除API绑定，编辑操作与修改API绑定，与此同时，查询API的入参既决定了查询的条件，而查询API的返回值就成为了列表中默认可展示的字段，从而快速生成一个会员的数据管理列表页面。然后，通过配置器对快速匹配生成的页面进行适当地稍稍调整，比如修改组件的参数：“是否开启数据列复选框”、“表头是否固定”等，即可完成页面的开发以满足需求。

S4、保存页面渲染语言。

S5、通过页面动态路由进行访问。

该构建方法通过创建数据模型即可生成RESTful规范API，由API的入参及返回值来定义页面组件的字段和描述；在编辑页面时只需选择对应的数据模型，通过R2M2模型映射即可生成一个具备完整功能的页面，所述完整功能包括页面布局、用户交互、业务逻辑、接口请求。

该构建方法以数据模型以及API驱动为基础，使用页面编辑器对页面布局设计与编排，保存为页面渲染语言；编排时使用端无关组件库，而打包前端应用时，则关联各端具体实现组件，从而达到只需要进行一次页面编排即可实现多端同构，如：H5，小程序，APP（iOS，Android）。

通过所述组件库设计页面，进行以下动作：

所述渲染语言包括组件属性字典的索引、参数和参数值，所述参数包含了节点/区块、样式、R2M2模型、布局以及交互数据；

（2）所述页面的渲染语言可以保存到数据库，在访问页面时读取并交由渲染引擎解析，并动态设置组件的参数值，从而渲染出页面，如图4所示。

上述实施例为本发明较佳的实施方式，但本发明的实施方式并不受上述实施例的限制，其他的任何未背离本发明的精神实质与原理下所作的改变、修饰、替代、组合、简化，均应为等效的置换方式，都包含在本发明的保护范围之内。

Claims

1.一种使用中台业务能力快速构建前端应用的方法，其特征在于，包含以下步骤：

中台业务能力产出数据对象，通过R2M2模型转换为前端所识别的页面渲染语言，所述数据对象包括一组对特定对象操作的API；

所述中台业务能力，其设计方法包括以下步骤：

创建新应用或者导入已有应用，用于建立后续产生数据的归属关系；

在应用工程，对API进行数据对象标记；

API以及DTO作为中台业务能力的具象化供其他开发环节使用；

创建应用，用于建立后续设计过程中产生资源的归属关系；

创建页面，进行页面设计：从组件库面板拖拽所需组件到渲染器，将组件与数据对象以及R2M2模型关联，并通过配置器设置组件的参数；

保存页面渲染语言，所述页面渲染语言包括配置结果，所述配置结果包括组件的布局、样式、数据对象、R2M2模型，完成前端应用的构建；

通过页面动态路由进行访问；所述页面动态路由是指渲染引擎路由加上页面ID；

所述组件库以场景划分，逻辑自洽；所述组件库形成及更新步骤为：

（1）将中台业务进行解构，形成抽象组件；所述抽象组件包括：功能组件/基础组件/通用组件动作/通用系统行为；

（2）抽象组件向上拼装，形成场景组件；

（4）所述组件库通过封装，把组件抽象为属性字典来描述。

2.根据权利要求1所述使用中台业务能力快速构建前端应用的方法，其特征在于，采用多端同构设计：以数据模型驱动为基础，通过对页面进行布局与编排，保存为页面渲染语言；结合前端组件库，可实现多端同构，只需要进行一次页面编排设计，即可同时生成APP、小程序、H5三种形态的前端应用；所述组件库包含端无关组件库及APP、小程序、H5的各端具体实现组件库。

3.根据权利要求1所述使用中台业务能力快速构建前端应用的方法，其特征在于，所述页面设计是采用数据模型以及API驱动来完成的：通过创建数据模型即可生成RESTful规范API，由API的入参及返回值来定义页面组件的字段和描述；再结合R2M2模型映射即可生成一个具备完整功能的页面，所述完整功能包括页面布局、用户交互、业务逻辑、接口请求。

4.根据权利要求1所述使用中台业务能力快速构建前端应用的方法，其特征在于，该方法为闭环的方法：中台业务能力生产数据对象，所述数据对象是由一组API封装而成；定义与前端组件匹配的R2M2模型；使用R2M2模型将中台数据对象转换成前端所需数据结构，转换结果是可被保存到数据库的结构化数据；中台资源中心可管理这些数据的可见权限范围；再由渲染器读取并解析页面渲染语言从而渲染出前端页面。

5.根据权利要求1所述使用中台业务能力快速构建前端应用的方法，其特征在于，所述页面设计，是通过可视化的页面编辑器支持引入多种Web开发语言所实现的渲染器，加上与之匹配的前端组件库完成的。

6.根据权利要求1所述使用中台业务能力快速构建前端应用的方法，其特征在于，通过所述组件库设计页面，进行以下动作：

（1）拖拽组件设计页面，组合出所需的页面效果，并生成页面的渲染语言；所述页面渲染语言包括组件属性字典的索引、参数和参数值，所述参数包含了节点/区块、样式、R2M2模型、布局以及交互数据；

（2）所述页面渲染语言保存到数据库，在访问页面时读取并交由渲染引擎解析，并动态设置组件的参数值，从而渲染出页面。