百度 AMIS（Ant Design Pro）是一款由百度开源的前端 UI 组件库，主要用于构建快速开发的管理后台系统。AMIS（A Modular Interactive System)）提供了一整套高效、灵活的组件，可以通过 JSON 配置进行开发，特别适合数据密集型应用场景。
AMIS 的核心特点：
1. 零代码配置： AMIS 使用 JSON 配置来快速构建界面，降低了开发难度，使得非前端开发人员也能通过配置来构建复杂的页面和交互。
2. 组件丰富： 提供了大量的组件，如表格、图表、表单、搜索框、分页等，可以应对大部分管理后台的需求。
3. 可扩展性强： 尽管 AMIS 提供了高度的配置化界面，用户仍可以通过自定义组件来扩展和调整功能。
4. 与 Ant Design 无缝结合： AMIS 基于 Ant Design，因此界面风格与 Ant Design 一致，符合现代化管理后台的设计规范。
使用场景：
• 适用于后台管理系统、企业级应用、数据展示平台等需要快速搭建和高效开发的项目。
AMIS 的优势：
• 开发效率高：由于是基于 JSON 配置，开发者可以快速构建原型，不需要手动编写复杂的前端代码。
• 低门槛：对于非前端人员，AMIS 提供了一种直观的方式来构建界面。
• 适合大数据量展示：AMIS 在数据表格、图表和各种展示上有优化，适合需要处理大量数据的场景。
代码演示
{
"type": "page",
"title": "用户管理系统 CRUD 示例",
"body": [
{
"type": "crud",
"api": {
"url": "https://jsonplaceholder.typicode.com/users?_start=${(page-1)*perPage}&_limit=${perPage}",
"method": "get",
"dataType": "json",
"adaptor": "return {\n status: 0,\n msg: '',\n data: {\n items: payload,\n total: 10\n }\n}"
},
"columns": [
{
"name": "id",
"label": "ID",
"type": "text",
"width": 80
},
{
"name": "name",
"label": "姓名",
"type": "text",
"sortable": true,
"searchable": true
},
{
"name": "username",
"label": "用户名",
"type": "text",
"sortable": true
},
{
"name": "email",
"label": "邮箱",
"type": "email"
},
{
"name": "phone",
"label": "电话",
"type": "text"
},
{
"name": "website",
"label": "网站",
"type": "link",
"placeholder": "-"
},
{
"name": "company.name",
"label": "公司",
"type": "text"
},
{
"type": "operation",
"label": "操作",
"buttons": [
{
"type": "button",
"label": "编辑",
"actionType": "dialog",
"dialog": {
"title": "编辑用户",
"size": "lg",
"body": {
"type": "form",
"initApi": {
"method": "get",
"url": "https://jsonplaceholder.typicode.com/users/${id}",
"responseData": "data",
"adaptor": "return {\n status: 0,\n msg: '',\n data: payload\n}"
},
"api": {
"method": "put",
"url": "https://jsonplaceholder.typicode.com/users/${id}",
"dataType": "json",
"adaptor": "return {status: 0, msg: '修改成功', data: payload}"
},
"body": [
{
"type": "grid",
"columns": [
{
"md": 6,
"body": [
{
"name": "name",
"label": "姓名",
"type": "input-text",
"required": true
},
{
"name": "username",
"label": "用户名",
"type": "input-text",
"required": true
},
{
"name": "email",
"label": "邮箱",
"type": "input-text",
"required": true
}
]
},
{
"md": 6,
"body": [
{
"name": "phone",
"label": "电话",
"type": "input-text",
"required": true
},
{
"name": "website",
"label": "网站",
"type": "input-text"
},
{
"name": "company.name",
"label": "公司名称",
"type": "input-text"
}
]
}
]
}
]
}
}
},
{
"type": "button",
"label": "删除",
"actionType": "ajax",
"icon": "fa fa-trash",
"level": "danger",
"confirmText": "确认要删除该用户吗？",
"api": {
"method": "delete",
"url": "https://jsonplaceholder.typicode.com/users/${id}",
"dataType": "json",
"adaptor": "return {status: 0, msg: '删除成功'}"
}
}
]
}
],
"filter": {
"title": "搜索",
"body": [
{
"type": "group",
"body": [
{
"name": "name",
"label": "姓名",
"type": "input-text",
"placeholder": "请输入姓名"
},
{
"name": "email",
"label": "邮箱",
"type": "input-text",
"placeholder": "请输入邮箱"
},
{
"name": "company.name",
"label": "公司",
"type": "input-text",
"placeholder": "请输入公司名称"
}
]
}
],
"actions": [
{
"type": "reset",
"label": "重置"
},
{
"type": "submit",
"label": "搜索",
"level": "primary"
}
]
},
"headerToolbar": [
{
"type": "button",
"label": "新增用户",
"icon": "fa fa-plus",
"level": "primary",
"actionType": "dialog",
"dialog": {
"title": "新增用户",
"size": "lg",
"body": {
"type": "form",
"api": {
"method": "post",
"url": "https://jsonplaceholder.typicode.com/users",
"dataType": "json",
"adaptor": "return {status: 0, msg: '新增成功', data: payload}"
},
"body": [
{
"type": "grid",
"columns": [
{
"md": 6,
"body": [
{
"name": "name",
"label": "姓名",
"type": "input-text",
"required": true,
"validations": {
"minLength": 2
}
},
{
"name": "username",
"label": "用户名",
"type": "input-text",
"required": true,
"validations": {
"minLength": 3
}
},
{
"name": "email",
"label": "邮箱",
"type": "input-text",
"required": true,
"validations": {
"isEmail": true
}
}
]
},
{
"md": 6,
"body": [
{
"name": "phone",
"label": "电话",
"type": "input-text",
"required": true
},
{
"name": "website",
"label": "网站",
"type": "input-text"
},
{
"name": "company.name",
"label": "公司名称",
"type": "input-text"
}
]
}
]
}
]
}
}
},
"bulkActions",
"pagination"
],
"footerToolbar": [
"statistics",
"switch-per-page",
"pagination"
],
"perPage": 5,
"perPageAvailable": [5, 10, 20, 50, 100]
}
]
}效果如下图
