amis:amis编辑器生成JSON使用方法。
上一篇文章我们讲到 amis如何让用户自由更改的方法，不通过起前端同学重新更改代码打包部署的操作。https://blog.csdn.net/Alan0728/article/details/119213559?spm=1001.2014.3001.5502
这篇文章我们看一下amis如何生成JSON
首先打开amis 可视化编辑器, 在线体验：http://aisuda.github.io/amis-editor-demo
点击进去后
左侧是组件 通过托拉拽到中间内容部分，完成一个布局上的操作。右侧是一些常规性的配置，接口字段样式等等的一些配置。当配置完成后点击左侧组件下的<代码> 生成的是JSON格式。
结合上一篇文章，直接复制生成的JSON，通过接口保存到数据库，完成整个页面的渲染。这种操作对用户来说是一个零代码的开发。
下面是我拉的一个简单的后台管理系统的集合，有兴趣的话可以体验一下
{
"type": "page",
"title": "增删改查示例",
"body": [
{
"type": "crud",
"draggable": true,
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample?waitSeconds=1",
"perPage": 15,
"keepItemSelectionOnPageChange": true,
"maxKeepItemSelectionLength": 11,
"labelTpl": "${id} ${engine}",
"filter": {
"title": "条件搜索",
"submitText": "",
"body": [
{
"type": "input-text",
"name": "keywords",
"placeholder": "通过关键字搜索",
"addOn": {
"label": "搜索",
"type": "submit"
}
},
{
"type": "plain",
"text": "这里的表单项可以配置多个"
}
]
},
"bulkActions": [
{
"label": "批量删除",
"actionType": "ajax",
"api": "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/${ids|raw}",
"confirmText": "确定要批量删除?"
},
{
"label": "批量修改",
"actionType": "dialog",
"dialog": {
"title": "批量编辑",
"name": "sample-bulk-edit",
"body": {
"type": "form",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/bulkUpdate2",
"body": [
{
"type": "hidden",
"name": "ids"
},
{
"type": "input-text",
"name": "engine",
"label": "Engine"
}
]
}
}
}
],
"quickSaveApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/bulkUpdate",
"quickSaveItemApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/$id",
"filterTogglable": true,
"headerToolbar": [
"filter-toggler",
"bulkActions",
{
"type": "tpl",
"tpl": "定制内容示例：当前有 ${count} 条数据。",
"className": "v-middle"
},
{
"type": "columns-toggler",
"align": "right"
},
{
"type": "drag-toggler",
"align": "right"
},
{
"type": "pagination",
"align": "right"
}
],
"footerToolbar": [
"statistics",
"switch-per-page",
"pagination"
],
"columns": [
{
"name": "id",
"label": "ID",
"width": 20,
"sortable": true,
"type": "text",
"toggled": true,
"remark": "Bla bla Bla"
},
{
"name": "engine",
"label": "Rendering engine",
"sortable": true,
"searchable": true,
"popOver": {
"body": "Popover 内容：${platform}",
"trigger": "hover"
},
"popOverEnableOn": "this.id === 1",
"type": "text",
"toggled": true
},
{
"name": "browser",
"label": "Browser",
"sortable": true,
"type": "text",
"toggled": false
},
{
"name": "platform",
"label": "Platform(s)",
"popOver": {
"body": "Popover 内容：${platform}"
},
"sortable": true,
"type": "text",
"toggled": true
},
{
"name": "version",
"label": "Engine version",
"quickEdit": true,
"type": "text",
"toggled": true,
"filterable": {
"options": [
{
"label": "4",
"value": "4"
},
{
"label": "5",
"value": "5"
},
{
"label": "6",
"value": "6"
}
]
}
},
{
"type": "text",
"name": "grade",
"label": "CSS grade",
"quickEdit": {
"saveImmediately": true,
"mode": "inline",
"type": "select",
"options": [
"A",
"B",
"C",
"D",
"X"
]
}
},
{
"type": "operation",
"label": "操作",
"width": 100,
"buttons": [
{
"type": "button",
"icon": "fa fa-eye",
"actionType": "dialog",
"tooltip": "查看",
"dialog": {
"title": "查看",
"body": {
"type": "form",
"body": [
{
"type": "static",
"name": "engine",
"label": "Engine"
},
{
"type": "divider"
},
{
"type": "static",
"name": "browser",
"label": "Browser"
},
{
"type": "divider"
},
{
"type": "static",
"name": "platform",
"label": "Platform(s)"
},
{
"type": "divider"
},
{
"type": "static",
"name": "version",
"label": "Engine version"
},
{
"type": "divider"
},
{
"type": "static",
"name": "grade",
"label": "CSS grade"
},
{
"type": "divider"
},
{
"type": "html",
"html": "添加其他 Html 片段 需要支持变量替换（todo）.
"
}
]
}
}
},
{
"type": "button",
"icon": "fa fa-pencil",
"tooltip": "编辑",
"actionType": "drawer",
"drawer": {
"position": "left",
"size": "lg",
"title": "编辑",
"body": {
"type": "form",
"name": "sample-edit-form",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/$id",
"body": [
{
"type": "input-text",
"name": "engine",
"label": "Engine",
"required": true
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "browser",
"label": "Browser",
"required": true
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "platform",
"label": "Platform(s)",
"required": true
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "version",
"label": "Engine version"
},
{
"type": "divider"
},
{
"type": "select",
"name": "grade",
"label": "CSS grade",
"options": [
"A",
"B",
"C",
"D",
"X"
]
}
]
}
}
},
{
"type": "button",
"icon": "fa fa-times text-danger",
"actionType": "ajax",
"tooltip": "删除",
"confirmText": "您确认要删除?",
"api": "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/$id"
}
],
"toggled": true
}
]
}
],
"remark": "bla bla bla",
"toolbar": [
{
"type": "button",
"actionType": "dialog",
"label": "新增",
"icon": "fa fa-plus pull-left",
"primary": true,
"dialog": {
"title": "新增",
"body": {
"type": "form",
"name": "sample-edit-form",
"api": "post:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample",
"body": [
{
"type": "input-text",
"name": "engine",
"label": "Engine",
"required": true
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "browser",
"label": "Browser",
"required": true
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "platform",
"label": "Platform(s)",
"required": true
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "version",
"label": "Engine version"
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "grade",
"label": "CSS grade"
}
]
}
}
}
]
}