低代码中的数据源

数据源：

在低代码平台中，组件的渲染的值，例如图片的src，文字等，这些都是静态数据，均被保存在dsl数据中，这是较基础的功能。我们经常需要异步拉取一些数据，例如榜单数据，用户的头像等信息。数据源就是在低代码中提供一个异步接口请求发起的功能，从而能够实时展示最新的功能。

tmagic-editor数据源json:

"items":[
{
    "id": "datasourcecomp_xxx",
    "type": "datasourcecomp",
    "style": {
        "width": "90",
        "height": "127",
        "borderRadius": "",
        "position": "absolute",
        "left": 19,
        "top": 100,
        "display": "",
        "bottom": ""
    },
    "name": "数据源图片",
    "dataSourceStatus": "loading",
    "src": "${ds_xxx.stage1}",
    "displayConds": []
    }
],
"dataSources": [
    {
        "id": "ds_xxx",
        "type": "http",
        "title": "HTTP",
        "description": "",
        "autoFetch": true,
        "options": {
            "url": "",
            "method": "GET",
            "params": {},
            "data": {},
            "headers": {}
        },
        "fields": [
            {
                "type": "string",
                "name": "stage1",
                "title": "stage1",
                "description": "",
                "defaultValue": "",
                "enable": true,
                "fields": []
            },
        ],
        "mocks": [],
        "afterResponse": ""
    }
 ],
"dataSourceDeps": {
    "ds_xxx": {
        "datasourcecomp_xxx": {
            "name": "数据源图片",
            "keys": [
                "src"
            ]
        },
    }
},
"dataSourceCondDeps": {
    "ds_xxx": {}
}

数据源组件:

一个组件绑定了数据源的值，它在dsl中的值为"${ds_xxx.stage1}"，如下图所示，所以现在的问题就是两点

• 在B端编辑器的时候，该组件的src如何取值
• 在C端渲染时，该组件的src如何取值

b端/c端展示：

1. 根据dataSourceDeps从dsl中取出绑定数据源的组件的dsl，对其进行遍历，依次替换各节点绑定数据源的值。（即对"src": "${ds_xxx.stage1}"进行替换，在compiledNode中实现）
2. b端渲染时（编辑器），此时值为json中的mockdata||defaultValue
3. c端渲染和b端一样，会先显示默认值，再显示网络请求得到的数据