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": "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
                                        }
                                    ]
                                }
                            }
                        },
                        {
                            "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"
                        }
                    ]
                }
            }
        }
    ]
}