【JSON2WEB】01 WEB管理信息系统架构设计
【JSON2WEB】02 JSON2WEB初步UI设计
【JSON2WEB】03 go的模板包html/template的使用
【JSON2WEB】04 amis低代码前端框架介绍
【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成
【JSON2WEB】06 JSON2WEB前端框架搭建
【JSON2WEB】07 Amis可视化设计器CRUD增删改查
【JSON2WEB】08 Amis的事件和校验
用Amis-editor可视化编辑器开发的代码移植到JSON2WEB框架中。
1 Amis-editor复制代码
切换到代码模式，Ctrl+A全选，Ctrl+C复制代码
2 新建页面atop.json
VS打开json2web目录，在pages目录先新建atop.json
Ctrl+V源码复制到atop.json
3 新增导航项Atop
编辑/pages/site.json增加atop项
4 Atop.json源码
Atop.json页面的全部源码如下：
{
"type": "page",
"title": "A股TOP3",
"body": [
{
"id": "u:13d67a44214e",
"type": "crud2",
"mode": "table2",
"dsType": "api",
"syncLocation": true,
"primaryField": "p_id",
"loadType": "pagination",
"api": {
"url": "http://127.0.0.1:5217/rest/atop",
"method": "get"
},
"quickSaveItemApi": {
"url": "http://127.0.0.1:5217/rest/atop/?where=p_id=$P_ID",
"method": "put",
"requestAdaptor": "",
"adaptor": "",
"messages": {}
},
"filter": {
"type": "form",
"title": "条件查询",
"mode": "inline",
"columnCount": 5,
"clearValueOnHidden": true,
"behavior": [
"SimpleQuery"
],
"body": [
{
"name": "F_DM",
"label": "代码",
"type": "input-text",
"size": "full",
"required": false,
"behavior": "SimpleQuery",
"id": "u:ea7e71f84464"
},
{
"name": "S_MC",
"label": "名称",
"type": "input-text",
"size": "full",
"required": false,
"behavior": "SimpleQuery",
"id": "u:cf78c0661188"
},
{
"name": "S_CYM",
"label": "可转债名称",
"type": "input-text",
"size": "full",
"required": false,
"behavior": "SimpleQuery",
"id": "u:ea25b81754ff"
},
{
"name": "P_ID",
"label": "P_ID",
"type": "input-number",
"size": "full",
"required": false,
"behavior": "SimpleQuery",
"id": "u:009fb53620f7"
}
],
"actions": [
{
"type": "reset",
"label": "重置",
"id": "u:e1ba26b8764a"
},
{
"type": "submit",
"label": "查询",
"level": "primary",
"id": "u:06f82d3bd520"
}
],
"id": "u:ebd3542b3a47",
"feat": "Insert",
"persistData": "atop3",
"onEvent": {},
"resetAfterSubmit": false,
"submitOnChange": true,
"debug": false
},
"headerToolbar": [
{
"type": "flex",
"id": "u:c44a43de0a3b",
"direction": "row",
"justify": "flex-start",
"alignItems": "stretch",
"style": {
"position": "static"
},
"items": [
{
"type": "container",
"align": "left",
"behavior": [
"Insert",
"BulkEdit",
"BulkDelete"
],
"body": [
{
"type": "button",
"label": "新增",
"level": "primary",
"className": "m-r-xs",
"behavior": "Insert",
"onEvent": {
"click": {
"actions": [
{
"ignoreError": false,
"actionType": "drawer",
"drawer": {
"type": "drawer",
"title": "新增数据",
"body": [
{
"id": "u:daac807c186b",
"type": "form",
"title": "表单",
"mode": "horizontal",
"dsType": "api",
"feat": "Insert",
"body": [
{
"name": "P_ID",
"label": "P_ID",
"type": "input-number",
"id": "u:fc77c965f0f6",
"keyboard": true,
"step": 1,
"required": true,
"visible": true,
"hidden": false
},
{
"name": "F_DM",
"label": "代码",
"type": "input-text",
"id": "u:6b6edac15dd3",
"required": true
},
{
"name": "S_MC",
"label": "名称",
"type": "input-text",
"id": "u:460c838369ca",
"required": true,
"showCounter": false
},
{
"name": "S_CYM",
"label": "可转债名称",
"type": "input-text",
"id": "u:4db3b899eab3"
}
],
"api": {
"url": "http://127.0.0.1:5217/rest/atop",
"method": "post",
"requestAdaptor": "",
"adaptor": "",
"messages": {}
},
"actions": [
{
"type": "button",
"label": "取消",
"onEvent": {
"click": {
"actions": [
{
"actionType": "cancel",
"componentId": "u:daac807c186b"
}
]
}
},
"level": "default"
},
{
"type": "button",
"label": "提交",
"onEvent": {
"click": {
"actions": [
{
"actionType": "submit",
"componentId": "u:daac807c186b"
}
]
}
},
"level": "primary"
}
],
"reload": "u:13d67a44214e"
}
],
"showCloseButton": true,
"showErrorMsg": true,
"showLoading": true,
"className": "app-popover :AMISCSSWrapper",
"actions": [
{
"type": "button",
"actionType": "cancel",
"label": "取消",
"id": "u:0e64a08202c2"
},
{
"type": "button",
"actionType": "submit",
"label": "提交",
"primary": true,
"id": "u:7aeaadd96eec",
"onEvent": {
"click": {
"weight": 0,
"actions": [
{
"componentId": "u:13d67a44214e",
"actionType": "reload"
}
]
}
}
}
],
"id": "u:6c5ed0a5cbe4"
}
},
{
"componentId": "u:13d67a44214e",
"ignoreError": false,
"actionType": "reload"
}
]
}
},
"id": "u:ebec67ec558c"
}
],
"wrapperBody": false,
"style": {
"flexGrow": 1,
"flex": "1 1 auto",
"position": "static",
"display": "flex",
"flexBasis": "auto",
"flexDirection": "row",
"flexWrap": "nowrap",
"alignItems": "stretch",
"justifyContent": "flex-start"
},
"id": "u:488170b5ddbb"
},
{
"type": "container",
"align": "right",
"behavior": [
"FuzzyQuery"
],
"body": [],
"wrapperBody": false,
"style": {
"flexGrow": 1,
"flex": "1 1 auto",
"position": "static",
"display": "flex",
"flexBasis": "auto",
"flexDirection": "row",
"flexWrap": "nowrap",
"alignItems": "stretch",
"justifyContent": "flex-end"
},
"id": "u:9aecfb71bf59"
}
]
}
],
"footerToolbar": [
{
"type": "flex",
"direction": "row",
"justify": "flex-start",
"alignItems": "stretch",
"style": {
"position": "static"
},
"items": [
{
"type": "container",
"align": "left",
"body": [],
"wrapperBody": false,
"style": {
"flexGrow": 1,
"flex": "1 1 auto",
"position": "static",
"display": "flex",
"flexBasis": "auto",
"flexDirection": "row",
"flexWrap": "nowrap",
"alignItems": "stretch",
"justifyContent": "flex-start"
},
"id": "u:a4b734dfa2e1"
},
{
"type": "container",
"align": "right",
"body": [
{
"type": "pagination",
"behavior": "Pagination",
"layout": [
"total",
"pager",
"perPage"
],
"perPage": 20,
"perPageAvailable": [
10,
20,
50,
100,
500
],
"align": "right",
"id": "u:636636fa6c40",
"size": "",
"mode": "normal",
"ellipsisPageGap": 5
}
],
"wrapperBody": false,
"style": {
"flexGrow": 1,
"flex": "1 1 auto",
"position": "static",
"display": "flex",
"flexBasis": "auto",
"flexDirection": "row",
"flexWrap": "nowrap",
"alignItems": "stretch",
"justifyContent": "flex-end"
},
"id": "u:16e84139982b"
}
],
"id": "u:9b0df78e9bc3"
}
],
"columns": [
{
"type": "tpl",
"title": "代码",
"name": "F_DM",
"id": "u:c4e18fd0bdd7",
"placeholder": "-",
"popOver": false,
"quickEdit": false,
"sorter": true,
"searchable": true
},
{
"type": "tpl",
"title": "名称",
"name": "S_MC",
"id": "u:22e29e6a5d0e",
"placeholder": "-",
"searchable": true,
"sorter": true
},
{
"type": "tpl",
"title": "可转债名称",
"name": "S_CYM",
"id": "u:85cef084b3dc",
"placeholder": "-",
"sorter": true,
"searchable": true
},
{
"type": "operation",
"title": "操作",
"buttons": [
{
"type": "button",
"label": "查看",
"level": "link",
"behavior": "View",
"onEvent": {
"click": {
"actions": [
{
"actionType": "drawer",
"drawer": {
"body": [
{
"id": "u:36bd6a6688b0",
"type": "form",
"title": "查看数据",
"mode": "horizontal",
"dsType": "api",
"feat": "View",
"body": [
{
"name": "P_ID",
"label": "P_ID",
"type": "input-number",
"id": "u:b0637cee6396"
},
{
"name": "F_DM",
"label": "代码",
"type": "input-text",
"id": "u:c114852c4c69"
},
{
"name": "S_MC",
"label": "名称",
"type": "input-text",
"id": "u:3689d8d46f7b"
},
{
"name": "S_CYM",
"label": "可转债名称",
"type": "input-text",
"id": "u:d0be9aee59d2"
}
],
"static": true,
"actions": [
{
"type": "button",
"actionType": "cancel",
"label": "关闭"
}
],
"onEvent": {
"submitSucc": {
"actions": [
{
"actionType": "search",
"groupType": "component",
"componentId": "u:13d67a44214e"
}
]
}
}
}
],
"title": "查看数据",
"size": "md",
"actions": [
{
"type": "button",
"actionType": "cancel",
"label": "关闭",
"id": "u:2be3003b841c"
}
],
"id": "u:7346861bdc09"
}
}
]
}
},
"id": "u:6c3baeb95d15"
},
{
"type": "button",
"label": "编辑",
"level": "link",
"behavior": "Edit",
"onEvent": {
"click": {
"actions": [
{
"actionType": "drawer",
"drawer": {
"body": [
{
"id": "u:bbc9a77ff015",
"type": "form",
"title": "编辑数据",
"mode": "horizontal",
"dsType": "api",
"feat": "Edit",
"body": [
{
"name": "P_ID",
"label": "P_ID",
"type": "input-number",
"id": "u:ec33ebe0e271",
"keyboard": true,
"step": 1,
"required": true,
"autoFill": {},
"static": false
},
{
"name": "F_DM",
"label": "代码",
"type": "input-text",
"id": "u:8dd0df920e65",
"required": true
},
{
"name": "S_MC",
"label": "名称",
"type": "input-text",
"id": "u:5f3700400d4a",
"required": true
},
{
"name": "S_CYM",
"label": "可转债名称",
"type": "input-text",
"id": "u:10daedbfe375"
}
],
"api": {
"url": "http://127.0.0.1:5217/rest/atop/?where=p_id=$P_ID",
"method": "put",
"requestAdaptor": "",
"adaptor": "",
"messages": {}
},
"resetAfterSubmit": true,
"initApi": {
"url": "http://127.0.0.1:5217/rest/atop/?where=p_id=$P_ID",
"method": "get",
"requestAdaptor": "",
"adaptor": "",
"messages": {}
},
"actions": [
{
"type": "button",
"actionType": "cancel",
"label": "取消"
},
{
"type": "button",
"actionType": "submit",
"label": "提交",
"level": "primary"
}
],
"onEvent": {
"submitSucc": {
"actions": [
{
"actionType": "search",
"groupType": "component",
"componentId": "u:13d67a44214e"
}
]
}
},
"reload": "u:13d67a44214e"
}
],
"title": "编辑数据",
"size": "md",
"actions": [
{
"type": "button",
"actionType": "cancel",
"label": "取消",
"id": "u:57398efba2de"
},
{
"type": "button",
"actionType": "submit",
"label": "提交",
"level": "primary",
"id": "u:a17861494293",
"onEvent": {
"click": {
"weight": 0,
"actions": [
{
"componentId": "u:13d67a44214e",
"ignoreError": false,
"actionType": "reload",
"data": {},
"dataMergeMode": "override"
}
]
}
}
}
],
"id": "u:6f733074ae5e"
}
}
]
}
},
"id": "u:d9a789d94b9b",
"icon": "",
"rightIcon": ""
},
{
"type": "button",
"label": "删除",
"behavior": "Delete",
"className": "m-r-xs text-danger",
"level": "link",
"confirmText": "确认要删除数据",
"onEvent": {
"click": {
"actions": [
{
"ignoreError": false,
"outputVar": "responseResult",
"actionType": "ajax",
"options": {},
"api": {
"url": "http://127.0.0.1:5217/rest/atop/?where=p_id=$P_ID",
"method": "delete",
"requestAdaptor": "",
"adaptor": "",
"messages": {}
}
},
{
"componentId": "u:13d67a44214e",
"ignoreError": false,
"actionType": "reload",
"dataMergeMode": "override",
"data": {}
}
]
}
},
"id": "u:2269e28a2645",
"actionType": "ajax"
}
],
"id": "u:d52c0898a323"
},
{
"type": "tpl",
"title": "P_ID",
"name": "P_ID",
"id": "u:a95ef647b3e8",
"placeholder": "-",
"sorter": true,
"searchable": true
}
],
"editorSetting": {
"mock": {
"enable": true,
"maxDisplayRows": 3
}
},
"loadDataOnce": true,
"keepItemSelectionOnPageChange": false,
"loadDataOnceFetchOnFilter": false,
"perPage": 10,
"placeholder": "暂无数据",
"selectable": false,
"showHeader": true,
"lineHeight": "",
"sticky": true,
"name": "crud2"
}
],
"id": "u:4fcd2dbf3f64",
"asideResizor": false,
"pullRefresh": {
"disabled": true
},
"regions": [
"body",
"header"
]
}
5 运行演示
启动json2web服务，http://localhost:3000
crud增删改查功能全部都有了。
另有：必填校验，刷新列表，增量查询，查询条件本地保存等。
本文完。
