摘要：元數據是業務流中前端和業務側實現共同使用的一種規範，是溝通先後端的橋樑，其經過統一的數據格式進行約束，從而約定先後端傳參。使用元數據，大幅提高了開發效率，又下降了維護及二次開發成本。
1 ROMA 業務流簡介
ROMA 業務流（如下簡稱「業務流」）是一個基於ROMA Connect平臺的應用集成與數據開放服務，適用於跨實例、跨應用的企業系統集成場景。業務流支持經過可視化UI界面來建立任務，從而下降了不一樣經驗背景的用戶的開發門檻。前端
圖1-1 業務流demo後端
2 元數據概述
Metadata（如下稱做「元數據」）是業務流的一個重要概念，用於約束前端生成的數據模型，同時驅動業務的邏輯實現，是前端頁面和後端業務共同使用的一種規範。前端框架
在前端的實現中，元數據負責驅動前端框架，用於構建一個徹底由元數據建模動態生成的界面。在業務流開發過程當中，只需添加新的Json格式的元數據便可添加新的組件，而無需再進行前端開發，這實現了快速開發、減小維護的目標。框架
在業務側，處理程序是按照元數據模型實現的，這也就意味着用戶將會在前端輸入足夠執行業務側的數據從而正確運行業務邏輯。dom
並不是爲前端服務ui
須要注意的是，元數據並非之前端開發爲中心，它主要是爲模型的生成器和模型消費者提供一致的通用建模。在業務流中，前端框架只是嚴格按照建模的概念生成業務數據模型。可是業務側不該受到前端的限制，應當適用於任何能夠符合元數據正確生成數據模型的前端框架。spa
元數據的另外一個核心用法是「驗證」，在後端服務中，服務應該在部署業務側以前利用元數據模型來驗證服務請求是否合法。3d
圖2-1 元數據驅動模型code
3 元數據屬性
3.1 組件
組件是業務流任務中的基本單元，每一個組件都有特定的功能，如「Open API」組件用於定義和開放一個API、「數據源」類型組件用於選擇數據源用於數據遷移或者數據開放、「腳本處理」組件用於使用腳本處理數據等，用戶經過配置和鏈接各類類型的組件進行業務編排。下圖是當前業務流提供的組件。component
圖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 業務流元數據實踐分享》，原文做者：中間件小哥。