【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的事件和校验
【JSON2WEB】09 Amis-editor的代码移植到json2web
【JSON2WEB】10 基于 Amis 做个登录页面login.html
【JSON2WEB】11 基于 Amis 角色功能权限设置页面
【JSON2WEB】 12基于Amis-admin的动态导航菜单树
【JSON2WEB】 13 基于REST2SQL 和 Amis 的 SQL 查询分析器
经过近两个月的摸索,基于Amis-editor的CRUD开发的套路基本搞清楚了。本帖记录一下开发的全过程。
1 新建页面
- 直接上截图:
- 点【确认】后:
页面新建成功。
2 页面初始化设置
- 去掉【工具栏】和【边栏】的勾选,
- 删除默认的模板标签。
3 crud增删改查组件
- 拖放一个crud组件:
-
自动跳出增删改查快速向导:
-
先输入api接口地址:
-
格式校验并自动生成列配置
列自动生成,标题可以修改为中文,启用【新增】、【操作栏-编辑】、【操作栏-查看详情】、【操作栏-删除】功能。设置完成,确认后:
到这里,【新增】功能是好的
"api": {
"method": "post",
"url": "http://127.0.0.1:5217/rest/sd_youz"
}
新增按钮图标设置 :
"type": "button",
"label": "新增",
"icon": "fa fa-plus"
4 配置编辑及删除的API
- 大纲-弹窗大纲-编辑-表单-属性-数据源-接口
"api": {
"method": "put",
"url": "http://127.0.0.1:5217/rest/sd_youz/?where=yz_id='${YZ_ID}'"
}
- 大纲-组件大纲-操作栏-删除 - 代码-api
"api": {
"method": "delete",
"url": "http://127.0.0.1:5217/rest/sd_youz/?where=yz_id='${YZ_ID}'"
}
5 数据加载,自动过滤,可排序
这里只能用代码设置。
- 数据一次拉取
"loadDataOnce": true,
- 自动过滤
"autoGenerateFilter": true
自动过滤还需要设置列可搜索,比如油种ID列可搜索,可排序;简称列可搜索、可排序
{
"type": "text",
"label": "油种ID",
"name": "YZ_ID",
"id": "u:99e4dcbfd31c",
"searchable": true,
"placeholder": "-",
"sortable": true
}
{
"type": "text",
"label": "简称",
"name": "YZ_JC",
"id": "u:9084dbd4345c",
"searchable": true,
"sortable": true
}
6 弹窗改为抽屉式弹窗
新增、编辑、查看共3个弹窗
"actionType": "dialog"
改为
"actionType": "drawer"
即可
7 必填校验
新增和编辑弹窗,油种ID和简称为必填,编辑弹窗油种ID不能修改
{
"type": "input-text",
"label": "油种ID",
"name": "YZ_ID",
"id": "u:cc9a61bc71f2",
"required": true,
"disabled": true
}
至此,一个比较完善的crud就开发好了,一般30分钟能搞定。
本文完 !