关于前端:前端开发还可以这么玩元数据实践分享

1 ROMA 业务流简介

ROMA 业务流（以下简称“业务流”）是一个基于ROMA Connect平台的利用集成与数据凋谢服务，实用于跨实例、跨利用的企业系统集成场景。业务流反对通过可视化UI界面来创立工作，从而升高了不同教训背景的用户的开发门槛。

图1-1 业务流demo

2 元数据概述

Metadata（以下称作“元数据”）是业务流的一个重要概念，用于束缚前端生成的数据模型，同时驱动业务的逻辑实现，是前端页面和后端业务独特应用的一种标准。

在前端的实现中，元数据负责驱动前端框架，用于构建一个齐全由元数据建模动静生成的界面。在业务流开发过程中，只需增加新的Json格局的元数据即可增加新的组件，而无需再进行前端开发，这实现了疾速开发、缩小保护的指标。

在业务侧，处理程序是依照元数据模型实现的，这也就意味着用户将会在前端输出足够执行业务侧的数据从而正确运行业务逻辑。

并非为前端服务

须要留神的是，元数据并不是以前端开发为核心，它次要是为模型的生成器和模型消费者提供统一的通用建模。在业务流中，前端框架只是严格依照建模的概念生成业务数据模型。然而业务侧不应受到前端的限度，该当实用于任何能够合乎元数据正确生成数据模型的前端框架。

元数据的另一个外围用法是“验证”，在后端服务中，服务应该在部署业务侧之前利用元数据模型来验证服务申请是否非法。

图2-1 元数据驱动模型

3 元数据属性

3.1 组件

组件是业务流工作中的根本单元，每个组件都有特定的性能，如“Open API”组件用于定义和凋谢一个API、“数据源”类型组件用于抉择数据源用于数据迁徙或者数据凋谢、“脚本解决”组件用于应用脚本解决数据等，用户通过配置和连贯各种类型的组件进行业务编排。下图是以后业务流提供的组件。

图3-1 业务流组件

3.2 组件元数据

开发过程中，通过增加新的“组件元数据”即可生成新的组件。“组件元数据”模型蕴含前端辅助数据和业务侧依赖的属性。“组件元数据”的要害属性如下表所示。

表3-1 “组件元数据”属性

通过定义上述属性，咱们能够疾速在前端增加新的组件。以下为一个类型为“sample_component”的元数据组件的示例。

{    "type":"sample_component",    "categories":["sample"],     "display":"sample component",    "description":"Input types illustration sample component",    "iconURL":"",    "inputs":[         {            "key":"parameter01",             "display":"parameter 1",             "type":"text",             "placeholder":"A input hint message here.",            "default":"default_value",            "required":true        },       {            "key":"parameter02",            "display":"parameter 2",             "type":"text",             "placeholder":"A input hint message here.",            "default":"default_value",             "required":true         }      ]}

根据上述元数据，前端渲染出的组件成果如下图所示。

图3-2 “sample_component”组件成果

点击“sample_component”组件后，组件配置如下图所示。

图3-3 “sample_component”组件配置

用户配置实现该组件并启动业务流后，业务侧将对接管的元数据进行解析。其中，业务侧将依据“type”字段来确定执行逻辑。

{    "id": "UUID",    "name": "name",    "category": "sample",    "description": "description"    "metadata": {        "type": "sample_component",        "configuration": {            "parameter01": "parameter01 value",            "parameter02": "parameter02 value"           }    }}

3.3 输出元数据

“组件元数据”的“inputs”属性，代表了以后组件的输出信息，其通过“输出元数据”来定义。

“输出元数据”是输出参数的汇合，它使得开发者能够用起码的代码来提供业务解决所需的信息。“输出元数据”根本属性如下表所示。

表3-2 “输出元数据”根本属性

务流的元数据框架中，以后反对多种“输出源数据”的参数类型，而且大多数类型都具备附加属性。接下来将对局部“输出源数据”的参数类型做简要介绍。

3.3.1 Text

通用的的纯文本输出类型。附加属性包含“maxlength”和“pattern”。

“Text”类型输出参数的示例如下所示。

{    "key":"text_sample",    "display":"Text Input",    "type":"text",    "placeholder":"A input hint message here.",    "default":"default input",    "required":true,    "maxlength":20,    "pattern":"/.+"}

前端渲染成果如下图所示。

图3-4 “Text”类型输出参数示例

3.3.2 TextArea

多行文本区域输出类型。附加属性为“maxlength”。

“TextArea”类型输出参数的示例如下所示。

{    "key":"textarea_sample",    "display":"Text Area Input",    "type":"textarea",    "placeholder":"A input hint message here.",    "required":true,    "maxlength":100}

前端渲染成果如下图所示。

图3-5 “TextArea”类型输出参数示例

3.3.3 Number

具备范畴和步长反对的数字输出字段。附加属性包含“min”、“max”和“step”。

“Number”类型输出参数的示例如下所示。

{    "key":"number_sample",    "display":"Numeric Input",    "type":"number",    "default":50,    "min":"0",    "max":"100",    "step":"1",    "required":true}

前端渲染成果如下图所示。

图3-6 “Number”类型输出参数示例

3.3.4 Password

带掩码的文本输出类型，用于明码文本等输出。

“Password”类型输出参数的示例如下所示。

{    "key":"password_sample",    "display":"Password Input",    "type":"password",    "default":"default",    "required":true}

前端渲染成果如下图所示。

图3-7 “Password”类型输出参数示例

3.3.5 Selection

“Selection”代表下拉抉择列表，分为“动态抉择”和“动静抉择”。

1. 动态抉择

预约义值的动态抉择列表。附加属性为“choices”。

“动态抉择”类型输出参数的示例如下所示。

{    "key":"selection_sample",    "display":"Static Selection Sample",    "type":"selection",    "default":"default_value",    "required":true,    "choices":[        {            "display":"item_1",            "value":"1"        },               {            "display":"item_2",            "value":"2"        },        {            "display":"item_default",            "value":"default_value"         }    ]}

前端渲染成果如下图所示。

图3-8 “动态抉择”类型输出参数示例

2. 动静抉择

运行时应用内部REST API的申请后果作为抉择列表。附加属性如下表所示。

表3-3

“动静抉择”类型输出参数的示例如下所示。

{    "key":"selection_sample",    "display":"Dynamic Selection Sample",    "type":"selection",    "required":true,    "selector":{        "uri":"http://my.domain.com/v1/samples",        "method":"GET",        "placeholder":"loading...",        "selector_display":"$.samples[*].sample_name",        "selector_value":"$.samples[*].sample_id"    }}

点击该组件时，将主动调用“http://my.domain.com/v1/samples”的申请，并将申请后果放入抉择列表。申请后果如下所示。

{    "samples":[        {            "sample_name":"sample01",            "sample_id":"01"        },        {            "sample_name":"sample02",            "sample_id":"02"        },        {            "sample_name":"sample03",            "sample_id":"03"        }    ]}

前端渲染成果如下图所示。

图3-9 “动静抉择”类型输出参数示例

3.3.6 Tableinput

表格输出。附加属性为“columns”。

“columns”类型输出参数的示例如下所示。{    "key":"tableinput_sample",    "display":"Table Input Sample",    "description":"Table with custom columns",    "required":true,    "type":"tableinput",    "columns":[        {            "key":"key-1",            "display":"col-1",            "default":"",            "type":"text",            "required":true        },        {            "key":"key-2",            "display":"col-2",            "default":"default_value",            "type":"text",            "required":true        },        {            "key":"key-3",            "display":"col-3",            "placeholder":"a placeholder message",            "type":"text",            "required":true        }    ]}

前端渲染成果如下图所示。

图3-10 “Tableinput”类型输出参数示例

4 结语

元数据是业务流中前端和业务侧实现独特应用的一种标准，是沟通前后端的桥梁，其通过对立的数据格式进行束缚，从而约定前后端传参。应用元数据，大幅晋升了开发效率，又升高了保护及二次开发老本。正是通过元数据渲染的形式，助力业务流服务的疾速倒退，帮忙企业疾速、简略的联接云上云下，打消数字鸿沟，构建业务敏捷性，驱动数字化转型。

分享自华为云社区《前端开发还能够这么玩？ROMA 业务流元数据实际分享》