重慶分公司
重慶分公司，新征程啟航
為企業提供網站建設、域名注冊、服務器等服務
基于ts的動態接口數據配置的詳解
需求前景
專注于為中小企業提供成都網站建設、網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業興山免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了上1000+企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。
前端組件是可復用的，那么復用前端組件時從后端讀取的數據源同樣也需要可復用（后端api也要是配置化的方式進行），前端需要提供配置項給后端進行動態配置生成api。
具體實現流程
名詞解析
mock 規范約束
使用的ts的 interface 進行編譯前校驗，所有的組件接收的 mock 結構，都必須是該 Interface 的實現
解析器
將mock打平成 key,value 結構的工具
eg.
interface I_EchartOption {
series: {
data: {
name: string;
value: numberOrString;
unit?: string;
}[];
name?: string;
type: "pie";
}; // 數據集配置
}
const mock:I_EchartOption = {
series: [
{
type: "pie",
data: [
{
name: "中藥",
value: "2630",
unit: "家",
_viewData:{ // 通過組合的自定義屬性
}
},
]
}
]
}
const parsingMock=(mock:I_EchartOption):T_formInfo=>{}
parsingMock(mock)
// 返回一個 Mock 描述，見下文
mock 描述
mock 描述，功能有兩個
- 逆向生成 mock
- 接收后端傳遞的 build_option.options，渲染控制表單。
type T_formInfo = { // mock 描述的接口
key: string, // 值得路徑嵌套
value: string, // 解析出來的value
build_component: string, // 承載改配置項的表單組件
build_option: { // 傳遞給表單組件的參數
options: any[], // 通過請求后端，讓后端進行填充
[key: string]: any
},
}
[
{
"key": "series.0.data",
"build_component": "seriesData",
"build_option": {
"options":[]
"dataLength": 1
},
"formValue": "",
},
{
"key": "series.0.data.0._viewData",
"build_label": "副指標series.0.data.0._viewData",
"build_component": "viewData",
"build_option": {
"options":[]
"isShowTitle": false,
"_viewDataMaxLength": 1
},
},
{
"key": "series.0.type",
"value": "pie"
}
]
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。
分享標題：基于ts的動態接口數據配置的詳解
分享地址：http://www.xueling.net.cn/article/pdcpdd.html