【JSON2WEB】14 基于Amis的CRUD开发30分钟速成

【JSON2WEB】系列目录

【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分钟能搞定。

---

本文完 ！