深入理解baidu/amis中的数据映射功能

深入理解baidu/amis中的数据映射功能

amis 前端低代码框架，通过 JSON 配置就能生成各种页面。 项目地址: https://gitcode.com/gh_mirrors/am/amis

什么是数据映射

在baidu/amis框架中，数据映射是一种强大的功能，它允许开发者通过简单的语法${xxx}或$xxx来获取当前数据链中的变量值。这种机制为模板字符串渲染、API请求数据格式定制等场景提供了极大的灵活性。

基础用法

模板字符串渲染

最基本的用法是在模板字符串中引用变量：

{
  "type": "tpl",
  "tpl": "Hello, ${name}!"
}

当数据中存在name变量时，模板会被渲染为对应的值。

转义特殊字符

如果需要原样输出${xxx}这样的字符串，而不是进行变量替换，可以使用转义字符\：

{
  "type": "tpl",
  "tpl": "This is a literal string: \\${name}"
}

链式取值

数据映射支持通过点号.进行链式取值，方便访问嵌套的对象属性：

{
  "type": "tpl",
  "tpl": "Company: ${company.name}, Department: ${company.department}"
}

高级应用场景

自定义API请求数据格式

amis默认的表单提交数据格式可能与后端接口要求不符，这时可以使用数据映射来定制：

{
  "api": {
    "url": "/api/submit",
    "data": {
      "userName": "${name}",
      "userEmail": "${email}"
    }
  }
}

这样就能将表单中的name和email字段映射为后端需要的userName和userEmail字段。

复杂数据结构处理

展开对象属性

使用&符号可以展开对象的属性：

{
  "api": {
    "data": {
      "basicInfo": "${basic}",
      "&": "${additionalInfo}"
    }
  }
}

这会将additionalInfo对象的所有属性展开合并到请求数据中。

数组处理

可以从数组中提取特定字段组成新数组：

{
  "api": {
    "data": {
      "items": {
        "$table": {
          "id": "${id}",
          "name": "${name}"
        }
      }
    }
  }
}

数据过滤器

amis提供了丰富的数据过滤器，可以对映射的数据进行各种处理：

常用过滤器示例

1. 日期格式化：

   "${createTime|date:YYYY-MM-DD}"
   

2. 数字处理：

   "${price|number}"  // 添加千分位
   "${score|round:1}" // 四舍五入保留1位小数
   

3. 字符串处理：

   "${content|truncate:50}"  // 截断长文本
   "${tags|join:'|'}"        // 用竖线连接数组
   

4. 空值处理：

   "${description|default:'暂无描述'}"
   

过滤器链式调用

过滤器可以串联使用，形成处理流水线：

"${createTime|toDate:YYYY-MM-DD|dateModify:add:1:day|date:YYYY-MM-DD}"

这个例子中，我们：

1. 先将字符串转为日期对象
2. 然后增加1天
3. 最后格式化为YYYY-MM-DD格式

命名空间访问

从1.1.6版本开始，amis支持通过命名空间访问特定数据源：

• window：访问全局变量
• ls：访问localStorage
• ss：访问sessionStorage
• cookie：访问cookies

使用示例：

"${window:document.title}"
"${ls:userInfo.name}"

最佳实践建议

1. 安全性考虑：使用raw过滤器输出HTML时要格外小心，避免XSS攻击
2. 性能优化：对于复杂的数据处理，考虑在后端完成
3. 可读性：过长的过滤器链可以拆分为多个步骤
4. 错误处理：为可能为空的数据设置默认值

通过合理运用数据映射功能，开发者可以轻松实现各种复杂的数据展示和交互需求，大大提升开发效率。

amis 前端低代码框架，通过 JSON 配置就能生成各种页面。 项目地址: https://gitcode.com/gh_mirrors/am/amis