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

正确定位 發表於 2020-12-8 14:15:00

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

<blockquote>摘要：元数据是业务流中前端和业务侧实现共同使用的一种规范，是沟通前后端的桥梁，其通过统一的数据格式进行约束，从而约定前后端传参。使用元数据，大幅提升了开发效率，又降低了维护及二次开发成本。</blockquote>
<h2>1 ROMA 业务流简介</h2>
ROMA 业务流（以下简称“业务流”）是一个基于ROMA Connect平台的应用集成与数据开放服务，适用于跨实例、跨应用的企业系统集成场景。业务流支持通过可视化UI界面来创建任务，从而降低了不同经验背景的用户的开发门槛。
图1-1 业务流demo
<div class="RichText-gifPlaceholder">
<div class="GifPlayer" data-size="normal" data-za-detail-view-path-module="GifItem"><img class="ztext-gif lazyload" data-thumbnail="https://pic4.zhimg.com/v2-9456f632c6fb66c68e79a5828f3883df_b.jpg" data-size="normal" data-src="https://pic4.zhimg.com/v2-9456f632c6fb66c68e79a5828f3883df_b.jpg"></div>
</div>
<h2>2 元数据概述</h2>
Metadata（以下称作“元数据”）是业务流的一个重要概念，用于约束前端生成的数据模型，同时驱动业务的逻辑实现，是前端页面和后端业务共同使用的一种规范。
在前端的实现中，元数据负责驱动前端框架，用于构建一个完全由元数据建模动态生成的界面。在业务流开发过程中，只需添加新的Json格式的元数据即可添加新的组件，而无需再进行前端开发，这实现了快速开发、减少维护的目标。
在业务侧，处理程序是按照元数据模型实现的，这也就意味着用户将会在前端输入足够执行业务侧的数据从而正确运行业务逻辑。
并非为前端服务
需要注意的是，元数据并不是以前端开发为中心，它主要是为模型的生成器和模型消费者提供一致的通用建模。在业务流中，前端框架只是严格按照建模的概念生成业务数据模型。但是业务侧不应受到前端的限制，应当适用于任何可以符合元数据正确生成数据模型的前端框架。
元数据的另一个核心用法是“验证”，在后端服务中，服务应该在部署业务侧之前利用元数据模型来验证服务请求是否合法。
图2-1 元数据驱动模型
<img width="619" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="619" data-rawheight="510" data-original="https://pic4.zhimg.com/v2-8ac1f855d5bc8e21a8fffc58c8115af7_r.jpg" data-actualsrc="https://pic4.zhimg.com/v2-8ac1f855d5bc8e21a8fffc58c8115af7_b.jpg" data-lazy-status="ok" data-src="https://pic4.zhimg.com/80/v2-8ac1f855d5bc8e21a8fffc58c8115af7_720w.jpg">
<h2>3 元数据属性</h2>
<h3>3.1 组件</h3>
组件是业务流任务中的基本单元，每个组件都有特定的功能，如“Open API”组件用于定义和开放一个API、“数据源”类型组件用于选择数据源用于数据迁移或者数据开放、“脚本处理”组件用于使用脚本处理数据等，用户通过配置和连接各种类型的组件进行业务编排。下图是当前业务流提供的组件。
图3-1 业务流组件
<img width="243" class="content_image lazy lazyload" data-caption="" data-size="normal" data-rawwidth="243" data-rawheight="731" data-actualsrc="https://pic4.zhimg.com/v2-6b4a8c54851d49a86ea7830a8e605cc3_b.jpg" data-lazy-status="ok" data-src="https://pic4.zhimg.com/80/v2-6b4a8c54851d49a86ea7830a8e605cc3_720w.jpg">
<h3>3.2 组件元数据</h3>
开发过程中，通过添加新的“组件元数据”即可生成新的组件。“组件元数据”模型包含前端辅助数据和业务侧依赖的属性。“组件元数据”的关键属性如下表所示。
表3-1 “组件元数据”属性
<img width="772" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="772" data-rawheight="212" data-original="https://pic2.zhimg.com/v2-9d6ea13cf6833e5687e4f512a7ae7211_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-9d6ea13cf6833e5687e4f512a7ae7211_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-9d6ea13cf6833e5687e4f512a7ae7211_720w.jpg">
通过定义上述属性，我们可以快速在前端添加新的组件。以下为一个类型为“sample_component”的元数据组件的示例。
<div class="highlight">
<div class="cnblogs_code">
<pre>{
"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
 }
 ]
}</pre>
</div>
</div>
根据上述元数据，前端渲染出的组件效果如下图所示。
图3-2 “sample_component”组件效果
<img width="423" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="423" data-rawheight="104" data-original="https://pic3.zhimg.com/v2-85bd724c77522331e816f16b7732caaa_r.jpg" data-actualsrc="https://pic3.zhimg.com/v2-85bd724c77522331e816f16b7732caaa_b.jpg" data-lazy-status="ok" data-src="https://pic3.zhimg.com/80/v2-85bd724c77522331e816f16b7732caaa_720w.jpg">
点击“sample_component”组件后，组件配置如下图所示。
图3-3 “sample_component”组件配置
<img width="494" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="494" data-rawheight="151" data-original="https://pic2.zhimg.com/v2-e00f487d2d86992b255ec6b20b89867d_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-e00f487d2d86992b255ec6b20b89867d_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-e00f487d2d86992b255ec6b20b89867d_720w.jpg">
用户配置完成该组件并启动业务流后，业务侧将对接收的元数据进行解析。其中，业务侧将根据“type”字段来确定执行逻辑。
<div class="highlight">
<div class="cnblogs_code">
<pre>{
"id": "UUID",
"name": "name",
"category": "sample",
"description": "description"
"metadata": {
 "type": "sample_component",
 "configuration": {
 "parameter01": "parameter01 value",
 "parameter02": "parameter02 value"
 }
}
}</pre>
</div>
</div>
<h3>3.3 输入元数据</h3>
“组件元数据”的“inputs”属性，代表了当前组件的输入信息，其通过“输入元数据”来定义。
“输入元数据”是输入参数的集合，它使得开发者可以用最少的代码来提供业务处理所需的信息。“输入元数据”基本属性如下表所示。
表3-2 “输入元数据”基本属性
<img width="770" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="770" data-rawheight="165" data-original="https://pic1.zhimg.com/v2-8618e4c79e09882e021dc1c55ea04c78_r.jpg" data-actualsrc="https://pic1.zhimg.com/v2-8618e4c79e09882e021dc1c55ea04c78_b.jpg" data-lazy-status="ok" data-src="https://pic1.zhimg.com/80/v2-8618e4c79e09882e021dc1c55ea04c78_720w.jpg">
务流的元数据框架中，当前支持多种“输入源数据”的参数类型，而且大多数类型都具有附加属性。接下来将对部分“输入源数据”的参数类型做简要介绍。
<h4>3.3.1 Text</h4>
通用的的纯文本输入类型。附加属性包括“maxlength”和“pattern”。
<img width="768" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="768" data-rawheight="75" data-original="https://pic1.zhimg.com/v2-89cec08b5f7099cbb08d8139279560cc_r.jpg" data-actualsrc="https://pic1.zhimg.com/v2-89cec08b5f7099cbb08d8139279560cc_b.jpg" data-lazy-status="ok" data-src="https://pic1.zhimg.com/80/v2-89cec08b5f7099cbb08d8139279560cc_720w.jpg">
“Text”类型输入参数的示例如下所示。
<div class="highlight">
<div class="cnblogs_code">
<pre>{
"key":"text_sample",
"display":"Text Input",
"type":"text",
"placeholder":"A input hint message here.",
"default":"default input",
"required":true,
"maxlength":20,
"pattern":"/.+"
}</pre>
</div>
</div>
前端渲染效果如下图所示。
图3-4 “Text”类型输入参数示例
<img width="484" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="484" data-rawheight="54" data-original="https://pic1.zhimg.com/v2-1932b7e73b6a4a0cea5b46f448157850_r.jpg" data-actualsrc="https://pic1.zhimg.com/v2-1932b7e73b6a4a0cea5b46f448157850_b.jpg" data-lazy-status="ok" data-src="https://pic1.zhimg.com/80/v2-1932b7e73b6a4a0cea5b46f448157850_720w.jpg">
<h4>3.3.2 TextArea</h4>
多行文本区域输入类型。附加属性为“maxlength”。
<img width="767" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="767" data-rawheight="54" data-original="https://pic3.zhimg.com/v2-b82729dd2c3755518f60cd706a828162_r.jpg" data-actualsrc="https://pic3.zhimg.com/v2-b82729dd2c3755518f60cd706a828162_b.jpg" data-lazy-status="ok" data-src="https://pic3.zhimg.com/80/v2-b82729dd2c3755518f60cd706a828162_720w.jpg">
“TextArea”类型输入参数的示例如下所示。
<div class="highlight">
<div class="cnblogs_code">
<pre>{
"key":"textarea_sample",
"display":"Text Area Input",
"type":"textarea",
"placeholder":"A input hint message here.",
"required":true,
"maxlength":100
}</pre>
</div>
</div>
前端渲染效果如下图所示。
图3-5 “TextArea”类型输入参数示例
<img width="638" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="638" data-rawheight="232" data-original="https://pic2.zhimg.com/v2-c4f70f658b401d6d02ab15f23eba19dd_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-c4f70f658b401d6d02ab15f23eba19dd_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-c4f70f658b401d6d02ab15f23eba19dd_720w.jpg">
<h4>3.3.3 Number</h4>
具有范围和步长支持的数字输入字段。附加属性包括“min”、“max”和“step”。
<img width="775" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="775" data-rawheight="101" data-original="https://pic2.zhimg.com/v2-b028eadc9425260484f8a0cf6e82f9dd_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-b028eadc9425260484f8a0cf6e82f9dd_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-b028eadc9425260484f8a0cf6e82f9dd_720w.jpg">
“Number”类型输入参数的示例如下所示。
<div class="highlight">
<div class="cnblogs_code">
<pre>{
"key":"number_sample",
"display":"Numeric Input",
"type":"number",
"default":50,
"min":"0",
"max":"100",
"step":"1",
"required":true
}</pre>
</div>
</div>
前端渲染效果如下图所示。
图3-6 “Number”类型输入参数示例
<img width="413" class="content_image lazy lazyload" data-caption="" data-size="normal" data-rawwidth="413" data-rawheight="50" data-actualsrc="https://pic2.zhimg.com/v2-6aa12ed6f22067c1d93aa34fb9196dc9_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-6aa12ed6f22067c1d93aa34fb9196dc9_720w.jpg">
<h4>3.3.4 Password</h4>
带掩码的文本输入类型，用于密码文本等输入。
“Password”类型输入参数的示例如下所示。
<div class="highlight">
<div class="cnblogs_code">
<pre>{
"key":"password_sample",
"display":"Password Input",
"type":"password",
"default":"default",
"required":true
}</pre>
</div>
</div>
前端渲染效果如下图所示。
图3-7 “Password”类型输入参数示例
<img width="492" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="492" data-rawheight="50" data-original="https://pic2.zhimg.com/v2-2cc74fc20cb1031ef1c034ebfd140321_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-2cc74fc20cb1031ef1c034ebfd140321_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-2cc74fc20cb1031ef1c034ebfd140321_720w.jpg">
<h4>3.3.5 Selection</h4>
“Selection”代表下拉选择列表，分为“静态选择”和“动态选择”。
<ul>
<li>1. 静态选择</li>
</ul>
预定义值的静态选择列表。附加属性为“choices”。
<img width="775" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="775" data-rawheight="56" data-original="https://pic3.zhimg.com/v2-203b178dc830ff2ba7d38bb096c98546_r.jpg" data-actualsrc="https://pic3.zhimg.com/v2-203b178dc830ff2ba7d38bb096c98546_b.jpg" data-lazy-status="ok" data-src="https://pic3.zhimg.com/80/v2-203b178dc830ff2ba7d38bb096c98546_720w.jpg">
“静态选择”类型输入参数的示例如下所示。
<div class="highlight">
<div class="cnblogs_code">
<pre>{
"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"
 }
]
}</pre>
</div>
</div>
前端渲染效果如下图所示。
图3-8 “静态选择”类型输入参数示例
<div class="RichText-gifPlaceholder">
<div class="GifPlayer" data-size="normal" data-za-detail-view-path-module="GifItem"><img class="ztext-gif lazyload" data-thumbnail="https://pic3.zhimg.com/v2-5725a119de79107e15ff982346f2b006_b.jpg" data-size="normal" data-src="https://pic3.zhimg.com/v2-5725a119de79107e15ff982346f2b006_b.jpg"></div>
</div>
<ul>
<li>2. 动态选择</li>
</ul>
运行时使用外部REST API的请求结果作为选择列表。附加属性如下表所示。
表3-3
<img width="769" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="769" data-rawheight="236" data-original="https://pic1.zhimg.com/v2-e854474090e68f377180f176fecb16b8_r.jpg" data-actualsrc="https://pic1.zhimg.com/v2-e854474090e68f377180f176fecb16b8_b.jpg" data-lazy-status="ok" data-src="https://pic1.zhimg.com/80/v2-e854474090e68f377180f176fecb16b8_720w.jpg">
“动态选择”类型输入参数的示例如下所示。
<div class="highlight">
<div class="cnblogs_code">
<pre>{
"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"
}
}</pre>
</div>
</div>
点击该组件时，将自动调用“http://my.domain.com/v1/samples”的请求，并将请求结果放入选择列表。请求结果如下所示。
<div class="highlight">
<div class="cnblogs_code">
<pre>{
"samples":[
 {
 "sample_name":"sample01",
 "sample_id":"01"
 },
 {
 "sample_name":"sample02",
 "sample_id":"02"
 },
 {
 "sample_name":"sample03",
 "sample_id":"03"
 }
]
}</pre>
</div>
</div>
前端渲染效果如下图所示。
图3-9 “动态选择”类型输入参数示例
<div class="RichText-gifPlaceholder">
<div class="GifPlayer" data-size="normal" data-za-detail-view-path-module="GifItem"><img class="ztext-gif lazyload" data-thumbnail="https://pic2.zhimg.com/v2-2b46720f99a842ba6f35e0fc54377099_b.jpg" data-size="normal" data-src="https://pic2.zhimg.com/v2-2b46720f99a842ba6f35e0fc54377099_b.jpg"></div>
</div>
<h4>3.3.6 Tableinput</h4>
表格输入。附加属性为“columns”。
<img width="771" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="771" data-rawheight="52" data-original="https://pic2.zhimg.com/v2-612f601b67d6ef6d6ab97f915c26d21d_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-612f601b67d6ef6d6ab97f915c26d21d_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-612f601b67d6ef6d6ab97f915c26d21d_720w.jpg">
<div class="highlight">
<pre><code class="language-text">“columns”类型输入参数的示例如下所示。</code></pre>
<div class="cnblogs_code">
<pre>{
"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
 }
]
}</pre>
</div>
<pre><code class="language-text"> </code></pre>
</div>
前端渲染效果如下图所示。
图3-10 “Tableinput”类型输入参数示例
<img width="644" class="origin_image zh-lightbox-thumb lazy lazyload" data-caption="" data-size="normal" data-rawwidth="644" data-rawheight="142" data-original="https://pic2.zhimg.com/v2-4806f4c6a70644b221b8b45776634371_r.jpg" data-actualsrc="https://pic2.zhimg.com/v2-4806f4c6a70644b221b8b45776634371_b.jpg" data-lazy-status="ok" data-src="https://pic2.zhimg.com/80/v2-4806f4c6a70644b221b8b45776634371_720w.jpg">
<h2>4 结语</h2>
元数据是业务流中前端和业务侧实现共同使用的一种规范，是沟通前后端的桥梁，其通过统一的数据格式进行约束，从而约定前后端传参。使用元数据，大幅提升了开发效率，又降低了维护及二次开发成本。正是通过元数据渲染的方式，助力业务流服务的快速发展，帮助企业快速、简单的联接云上云下，消除数字鸿沟，构建业务敏捷性，驱动数字化转型。
<blockquote>本文分享自华为云社区《前端开发还可以这么玩？ROMA 业务流元数据实践分享》，原文作者：中间件小哥。</blockquote>
 
点击关注，第一时间了解华为云新鲜技术~ 
来源：https://www.cnblogs.com/huaweiyun/p/14102385.html

頁: [1]

琼殿技术论坛's Archiver

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