112 lines
2.3 KiB
Markdown
112 lines
2.3 KiB
Markdown
---
|
||
title: 动态数据
|
||
---
|
||
|
||
除了渲染静态页面及表单，amis 还能渲染动态数据，比如下面这个表格数据是来自 api 这个接口的请求
|
||
|
||
```json
|
||
{
|
||
"type": "crud",
|
||
"api": " http://xxx/api/sample",
|
||
"columns": [
|
||
{
|
||
"name": "engine",
|
||
"label": "引擎"
|
||
},
|
||
{
|
||
"name": "browser",
|
||
"label": "浏览器"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
amis 期望这个 api 接口返回的是如下的格式：
|
||
|
||
```json
|
||
{
|
||
"status": 0,
|
||
"msg": "",
|
||
"data": {
|
||
"items": [
|
||
{
|
||
"engine": "Trident",
|
||
"browser": "IE 9"
|
||
},
|
||
{
|
||
"engine": "Gecko",
|
||
"browser": "Firefox 70"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
下面是具体介绍
|
||
|
||
### 整体格式
|
||
|
||
要求每个接口都返回 `status` 字段用来表示成功还是失败，如果失败了，通过 `msg` 字段来说明失败原因。当然如果成功 `msg` 也可以用来设置提示信息。
|
||
|
||
```json
|
||
{
|
||
"status": 0, // 0 表示成功，非0 表示失败
|
||
"msg": "", // 提示信息 包括失败和成功
|
||
"data": {
|
||
// ...
|
||
// 具体的数据
|
||
}
|
||
}
|
||
```
|
||
|
||
如果你的系统有自己的规范，可以在 fetcher 统一进行适配，如：
|
||
|
||
```js
|
||
{
|
||
renderAmis(
|
||
{
|
||
// 这里是 amis 的 Json 配置。
|
||
type: 'page',
|
||
title: '简单页面',
|
||
body: '内容'
|
||
},
|
||
{
|
||
// props
|
||
},
|
||
{
|
||
// 忽略别的设置项
|
||
fetcher: function (api) {
|
||
// 适配这种格式 {"code": 0, "message": "", "result": {}}
|
||
return axios(config).then(response => {
|
||
let payload = {
|
||
status: response.data.code,
|
||
msg: response.data.message,
|
||
data: response.data.result
|
||
};
|
||
|
||
return {
|
||
...response,
|
||
data: payload
|
||
};
|
||
});
|
||
}
|
||
}
|
||
);
|
||
}
|
||
```
|
||
|
||
### 具体要求
|
||
|
||
每个渲染的接口返回都有自己的格式要求，主要体现在 data 字段内部，具体请参考每个渲染的接口说明。
|
||
|
||
- [Page](./renderers/Page.md#接口说明)
|
||
- [CRUD](./renderers/CRUD.md#接口说明)
|
||
- [Form](./renderers/Form/Form.md#接口说明)
|
||
- [Select](./renderers/Form/Select.md#接口说明)
|
||
- [Checkboxes](./renderers/Form/Checkboxes.md#接口说明)
|
||
- [Radios](./renderers/Form/Radios.md#接口说明)
|
||
- [List](./renderers/Form/List.md#接口说明)
|
||
- [Wizard](./renderers/Wizard.md#接口说明)
|
||
|
||
`TBD`
|