【推荐】强大的中后台开发框架 - Amis，使用 JSON 即可完成网站搭建

[TaroXin]

amis

Github | 官方文档

项目分类：开发框架
开发团队：百度

简介

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率。

强大的配置项页面生成让它适用于标准化的中台项目以及通用后台管理项目，在效率提升上可谓是独占鳌头；amis 也有其劣势，较低的可定制型，固化主题都成为限制项目发展的一道坎坷，但就小型后台2B项目而言，业务明显比UI要更重要一些，快速的迭代业务功能才是 amis 所建立的初衷。

特性

• 提供完整的界面解决方案：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能；
• 内置 100+ 种 UI 组件：包括其它 UI 框架都会不提供的富文本编辑器、代码编辑器等，能满足各种页面组件展* 现的需求，而且对于特殊的展现形式还可以通过 自定义组件 来扩充；
• 容器支持无限级嵌套：可以通过组合来满足各种布局需求；
• 经历了长时间的实战考验：amis 在百度内部得到了广泛使用，在 4 年多的时间里创建了 3 万+ 页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求。

组件介绍

以下提供几个 amis 组件使用案例

Page 组件

Page 组件是 amis 页面 JSON 配置中，唯一的 顶级容器组件，是整个页面配置的入口组件。

使用案例：

{
  "type": "page",
  "aside": [{
    "type": "tpl",
    "tpl": "这是侧边栏部分"
  }],
  "toolbar": [{
    "type": "tpl",
    "tpl": "这是工具栏部分"
  }],
  "body": [{
    "type": "tpl",
    "tpl": "这是内容区域"
  }]
}

演示结果：

Action 行为按钮(Button)

Action 按钮是触发页面行为的主要方法之一，type: button 的声明方式是 action 的别名

使用案例：

{
  "type": "page",
  "body": {
    "type": "button-toolbar",
    "buttons": [
      {
        "type": "action",
        "label": "默认"
        "actionType": "dialog",
        "dialog": {
            "title": "弹框",
            "body": "这是个简单的弹框。"
        }
      },
      {
        "type": "action",
        "label": "主要",
        "level": "primary"
      },
      {
        "type": "action",
        "label": "次要",
        "level": "secondary"
      },
      {
        "type": "action",
        "label": "成功",
        "level": "success"
      },
      {
        "type": "action",
        "label": "警告",
        "level": "warning"
      },
      {
        "type": "action",
        "label": "危险",
        "level": "danger"
      },
      {
        "type": "action",
        "label": "浅色",
        "level": "light"
      },
      {
        "type": "action",
        "label": "深色",
        "level": "dark"
      },
      {
        "type": "action",
        "label": "链接",
        "level": "link"
      }
    ]
  }
}

演示结果：

Icon 图标

使用案例：

{
  "type": "page",
  "body": {
    "type": "icon",
    "icon": "cloud"
  }
}

Form 表单

表单是任何一个框架的核心组件之一

使用案例：

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "https://houtai.baidu.com/api/mock2/form/saveForm",
    "controls": [
      {
        "type": "text",
        "name": "name",
        "label": "姓名："
      },
      {
        "name": "email",
        "type": "email",
        "label": "邮箱："
      }
    ]
  }
}

演示结果：

Tab 选项卡

使用案例：

{
  "type": "page",
  "body": {
    "type": "tabs",
    "mode": "card",
    "tabs": [
      {
        "title": "选项卡1",
        "body": "选项卡内容1"
      },
      {
        "title": "选项卡2",
        "body": "选项卡内容2"
      },
      {
        "title": "选项卡3",
        "body": "选项卡内容3"
      }
    ]
  }
}

演示结果：

更多使用方案请参考 amis 快速开始

入门案例

amis 提供了两种使用方式，一种是基于 React 项目的 npm 包，一种是基于普通前端项目的 JS SDK
以下是一些 amis 入门使用的案例

Amis 官方示例
Amis Admin
Amis 可视化编辑器

推荐理由

• 框架简单且易上手，熟悉JSON即可进行建站操作
• Amis 的主题和思维更有利于后台及中台项目结构搭建
• 100+ 组件，完全适用于大部分页面建设
• 大厂维护，稳定更新
• 标准化文档与示例，意外之喜是竟然顺便提供了可视化编辑器

适用团队

• 项目迭代周期快，需求多
• UI 定制化要求不高
• 缺少专业前端团队，中后台项目无人开发
• 对可视化编辑需求较高，但无相关经验