CRUD 组件

CRUD是增加(Create)、读取(Read)、更新(Update)和删除(Delete)的意思。Amis 的CRUD 即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。
一个最简单的CRUD组件的Schema代码如下：

{//第一对大括号代表Amis组件的根节点rootNode"type": "page",//根节点的类型是page"body": {//根节点的body内容"type": "crud",//根节点的body类型是crud"api": "/amis/api/mock2/sample",//crud 组件的api"columns": [//curd组件的列数据（相当于数据库中的字段信息数据）{"name": "id",//对应数据库中的字段名称"label": "ID"//列标题},{"name": "engine","label": "Rendering engine"},{"name": "browser","label": "Browser"},{"name": "platform","label": "Platform(s)"},{"name": "version","label": "Engine version"},{"name": "grade","label": "CSS grade"}]}
}

这样的schema渲染(render)出来的页面效果如下：

后端返回的数据片段如下：

{"status": 0,"msg": "ok","data": {"count": 171,"rows": [{"engine": "Trident - 0jw14","browser": "Internet Explorer 4.0","platform": "Win 95+","version": "4","grade": "X","badgeText": "默认","id": 1}, {"engine": "Trident - acb3t","browser": "Internet Explorer 5.0","platform": "Win 95+","version": "5","grade": "C","badgeText": "危险","id": 2}, {"engine": "Trident - 0j7dqi","browser": "Internet Explorer 5.5","platform": "Win 95+","version": "5.5","grade": "A","id": 3}, {"engine": "Trident - qvlpr","browser": "Internet Explorer 6","platform": "Win 98+","version": "6","grade": "A","id": 4}, {"engine": "Trident - vdyua","browser": "Internet Explorer 7","platform": "Win XP SP2+","version": "7","grade": "A","id": 5}, {"engine": "Trident - w4tz3","browser": "AOL browser (AOL desktop)","platform": "Win XP","version": "6","grade": "A","id": 6}]}
}

查

上面那个最简单的schema根节点的body有一个api，如下：“api”: “/amis/api/mock2/sample”,这个api是body节点（也就是crud组件）获取数据的api,在组件渲染之后自动触发。

查询api

把这个最简单的schema去除注释（schema文件里面不支持注释）并修改api为"api": “/api/user/find”,然后copy覆盖掉public/json/index.json文件。保存后刷新浏览器，出现界面如下：

上图中api请求失败，主要是因为method错误，amis修改method比较容易，在api地址前面加上"post:"，修改成这样：

"api": "post:/api/user/find", 

再次保存和刷新页面，可以看到请求成功了，界面如下：

现在接下来需要做的就是把columns里面的列信息改成和后端返回的数据一致，就可以把后端查询出来的数据显示出来了，再次修改schema代码如下：

{"type": "page","body": {"type": "crud","api": "post:/api/user/find",   "columns": [{"name": "id","label": "ID"},{"name": "createdAt","label": "创建时间"},{"name": "email","label": "Email"},{"name": "nickname","label": "昵称"},{"name": "age","label": "年龄"}]}
}

保存并刷新浏览器，呈现出如下的界面：

现在，我们成功的把后端查询出来的用户表里面的数据在amis的curd组件中呈现出来了。

本测试案例显示出来的用户信息，如果你的数据库里面没有，请用postman的自动运行功能，添加20-30条数据以方便测试

这个界面的呈现是对的，观察后端返回的数据有20多条，amis的crud自动显示前20条，并且自动分页，但是如果我们去点击右边那个第二页按钮，我们会发现返回的数据并没有变化，还是和原来一样，并且界面上面也没有显示第二页的数据内容。

分页

这个是有原因的，我们回到Sails后端的源代码，看看UserController.ts里面的find函数，我们发现它通过query2Sails函数获取前端提交的body里面的page作为当前查询的页码，把body里面的pageSize作为查询时每一页的记录数。
也就是说，我们如果要控制分页查询，我们还需要对api请求进行干涉，我们需要重新组织请求的body部分的内容。为此，我们需要了解curd组件是怎么提交请求的，提交的时候都有什么参数给到最终的request里面。

fetcher参数观察

前面我们知道amis组件里面，我们提供fetcher函数的实现给amis组件，当amis组件需要请求api的时候，它就会触发fetcher函数，在fetcher函数里面，我们通过return amisRequest(url, method, { …data, …config }); 代码把api请求的任务交给utils/request.ts里面的umi-request库来实现。
打开utils/request.ts，添加两个控制台输出，console.log(‘[url]:’, url); console.log(‘[data]:’, options);
通过这两行代码，我们可以观察curd组件提交过来的请求url和options都有一些什么，代码片段如下：

export async function amisRequest(url: string, method?: string, options?: { [key: string]: any }) {console.log('[url]:', url);console.log('[data]:', options);let newMethod = '';if (!method) newMethod = 'GET';else newMethod = method.toUpperCase();switch (newMethod) {case 'GET':return remoteRequest.get(url, options);case 'POST':return remoteRequest.post(url, options);case 'DELETE':return remoteRequest.delete(url, options);case 'PUT':return remoteRequest.put(url, options);}// return remoteRequest(url, {//   method: 'Delete',//   ...(options || {}),// });
}

保存后，进入浏览器调试界面观察，看到如下结果：

传递过来的url没有问题，但是data就比较混乱，这个地方应该是amis组件的fetcher函数没有做好，找到fetcher函数，看到它提交给amisRequest之前，把crud的data转换成string并合并到options，为了更好的调试我们修改一下fetcher，修改后如下：

fetcher: ({url, // 接口地址method, // 请求方法 get、post、put、deletedata, // 请求数据responseType,config, // 其他配置headers, // 请求头}: any) => {// eslint-disable-next-line no-param-reassignconfig = config || {};config.withCredentials = true;// eslint-disable-next-line @typescript-eslint/no-unused-expressionsresponseType && (config.responseType = responseType);if (config.cancelExecutor) {request.CancelToken = config.cancelExecutor;//config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);}config.headers = headers || {};if (method !== 'post' && method !== 'put' && method !== 'patch') {if (data) {config.params = data;}//这个地方放弃合并，提交两个内容，一个是data,一个是configreturn amisRequest(url, method, data, config); // (axios as any)[method](url, config);} else if (data && data instanceof FormData) {config.headers = config.headers || {};config.headers['Content-Type'] = 'multipart/form-data';} else if (data &&typeof data !== 'string' &&!(data instanceof Blob) &&!(data instanceof ArrayBuffer)) {// eslint-disable-next-line no-param-reassign//data = JSON.stringify(data); 屏蔽把data转换成string的代码config.headers = config.headers || {};config.headers['Content-Type'] = 'application/json';}//return (axios as any)[method](url, data, config);return amisRequest(url, method, data, config);},

因为data和config不再合并，amisRequest函数也应该做相应修改：

/** amis的schema文件专用request*/
export async function amisRequest(url: string, method?: string, data?: any, options?: { [key: string]: any }) {console.log('[url]:', url);console.log('[data]:', data);let newMethod = '';if (!method) newMethod = 'GET';else newMethod = method.toUpperCase();  switch (newMethod) {case 'GET':return remoteRequest.get(url, options);case 'POST':return remoteRequest.post(url, options);case 'DELETE':return remoteRequest.delete(url, options);case 'PUT':return remoteRequest.put(url, options);}
}

修改后，可以观察到提交的url和data数据了：

统一处理method

在amisRequest函数里面，我们是可以根据fetcher函数提交过来的url来重新组织后端请求的。这样schema里面的“api”:“post:…”，这种写法就可以简化一些了，因为method可以在amisRequest里面最终决定，并且我们的后端也主张尽量使用post，所以我们不要在amis的schema中指定api的method,因为最后面我们的schema可能要交给经过我们培训的非编程人员来修改，对他们来说能少理解一个专业术语就尽量少理解一个是最好的。综上，修改public/json/index.json中的api如下：

 "api": "/api/user/find",   

保存并刷新后观察到控制台输出是这样的：

[url]: /api/user/find?page=1&perPage=10
[data]: undefined

也就是说，crud对非post的api,默认会把查询参数page和perPage写到url里面，我们再次修改utils/request.ts，对传递过来的url和data重新处理，利用正则表达式把url里面的参数提取出来，代码如下：

/* eslint-disable */
import { extend, RequestOptionsInit } from 'umi-request';
import { getToken } from './myStorage';
//api 网址前缀，为了方便日后更换服务器，直接用一个常量定义
const urlPrefix = 'http://localhost:1898';
const remoteRequest = extend({// 路径前缀（基础路径）prefix: urlPrefix,timeout: 5000,
});
/*** 读取本地文件*/
export const localRequest = extend({prefix: '',timeout: 5000,
});
//请求拦截器，拦截每个请求，添加完token之后再发送到后端
remoteRequest.interceptors.request.use((url: string, options: RequestOptionsInit) => {const headers = getToken()? {authorization: `Bearer ${getToken()}`,}: { authorization: ' ' };return {url,options: { ...options, interceptors: true, headers: headers },};
});
/*** 用正则表达式捕获网址里面的分页信息* @param url*/
function getPageInfoByReg(url: string): { page: number; pageSize: number } {let res = { page: 1, pageSize: 15 };let pageRegex = /page=(\d+)/;let perPageRegex = /perPage=(\d+)/;let pageMatch = url.match(pageRegex);let perPageMatch = url.match(perPageRegex);if (pageMatch && pageMatch.length > 1) res.page = parseInt(pageMatch[1]);if (perPageMatch && perPageMatch.length > 1) res.pageSize = parseInt(perPageMatch[1]);return res;
}
/*** 分解出Url里面的查询参数，并返回数据对象*/
export function splitUrl(url: string): any {let urlDataList = url.split('?');let apiUrl = urlDataList[0];let searchData = {}, pageInfo = getPageInfoByReg(url);if (urlDataList.length > 1) {let paramsLst = urlDataList[1].split('&');for (var i = 0; i < paramsLst.length; i++) {var pair = paramsLst[i].split('=');if (pair.length < 2) continue;pair[1] = decodeURI(pair[1]);if (pair[0] == 'page' || pair[0] == 'perPage') continue;else searchData[pair[0]] = pair[1];}}searchData = {url: apiUrl,data: { ...searchData, page: pageInfo.page, pageSize: pageInfo.pageSize },};return searchData;
}
/** amis的schema文件专用request*/
export async function amisRequest(url: string, method?: string, data?: any, options?: { [key: string]: any }) {console.log('[url]:', url);console.log('[data]:', data);let newMethod = '';if (!method) newMethod = 'GET';else newMethod = method.toUpperCase();let sd = splitUrl(url);if (sd.url == '/api/user/find') {return remoteRequest(sd.url, {method: 'POST',data: sd.data,...(options || {}),});}switch (newMethod) {case 'GET':return remoteRequest.get(url, options);case 'POST':return remoteRequest.post(url, options);case 'DELETE':return remoteRequest.delete(url, options);case 'PUT':return remoteRequest.put(url, options);}
}
export default remoteRequest;

分页参数提交到后端

crud提交过来的page和perPage分别代表当前页码和每一页记录数，现在我们通过splitUrl把这两个参数提取出来了，但是不能直接发送给后端，因为根据后端sails对分页的参数是要求名称分别page和pageSize，上述代码中，splitUrl函数已经把这个工作给做了，所以在提交的时候，提交sd.data里面就包含有page和pageSize了，请注意观察：

//splitUrl 函数返回的searchData对象把？后面的参数解析成data,把？前面的url返回到searchData.url
searchData = {url: apiUrl,data: { ...searchData, page: pageInfo.page, pageSize: pageInfo.pageSize },};
.....................
//amisRequest请求里面把解析后的sd.data提交到body里面：if (sd.url == '/api/user/find') {return remoteRequest(url, {method: 'POST',data: sd.data,...(options || {}),});}

以上request.ts代码修改后，发现分页按钮可以用了，点击不同的分页按钮，后端返回的数据和curd组件里面呈现的数据都符合要求了。

自定义分页和页面大小（pageSize）

目前我可以看到的是crud自动设置的分页pageSize大小是每页10条数据，应该有更个性化的设置，在schema里面columns前面添加如下内容：

"footerToolbar": ["statistics",//显示统计数据，比如1/3 总共：22 项"switch-per-page",//可以切换perPage值（设置pageSize）"pagination"//分页组件],

保存后，界面就有可以设置分页大小的按钮了。如果需要强制设置分页大小，也可以指定api的默认参数，比如：

"defaultParams": {"perPage": 15}, 

搜索

单有数据展示是不够的，我们经常会需要根据关键词进行搜索过滤的功能，crud组件提供非常方便的写法：只需要在body里面添加一条"autoGenerateFilter": true 即可，代码片段如下：

"type": "crud","api": "/api/user/find","autoGenerateFilter": true,

如果现在保存并刷新，界面上看不到不一样，因为我们只是开启了过滤功能，并没有指定过滤字段，接下来我们尝试可以通过id搜索指定id值的记录，修改columns里面的id字段设置，增加一条"searchable": true, 代码片段如下：

{"name": "id","searchable": true,"label": "ID"},

刷新保存后，可以看到如下界面：

id搜索的界面有了，我们尝试在输入框中输入3，点击搜索按钮，F12可以看到，这个时候提交过来的URL里面带有我们要搜索的id值了：

我们知道，Sails后端如果要搜索id=3，我们当时在postman里面是要在body里面设置{id:3} 才可以的，现在通过url里面的参数为什么也可以成功的返回id=3的数据呢，这个是因为我们前面在utils/request.ts里面添加的splitUrl函数，这个函数会把参数转换成data，然后写到post的body里面去。可以往前翻看一下splitUrl的代码。

id搜索目前看起来都不错，但是我们希望能有更友好一点的界面，比如通过placeholder提示用户怎么操作，我们可以修改searchable的值，从而做更具体的设置：

 "searchable": {"type": "input-text","name": "id","label": "主键","placeholder": "输入id"
}

还可以添加更多的过滤字段，比如email：

 "searchable": {"type": "input-text","name": "email","label": "Email","placeholder": "Email 模糊搜索"}

排序

对于呈现出来的数据，还会有排序的要求。crud依然提供非常方便的操作，想要通过哪个字段排序，只需要简单的添加一个 “sortable”: true,就可以了。比如我们希望可以按照id排序，可以按照createdAt字段排序，那么我们的columns里面可以这样改：

{"name": "id","label": "ID","sortable": true,//增加sortable"searchable": {"type": "input-text","name": "id","label": "主键","placeholder": "输入id"}},{"name": "createdAt","label": "创建时间","sortable": true     //增加sortable   },

保存后界面会变成这样：

打开F12，点击ID排序按钮，观察传递过来的url和data:

可以看到url的参数里面增加了orderBy和orderDir，同时Sails后端返回一个500内部错误的信号，观察network 可以看到提交的body里面是这样的：

我看到前端把orderBy和orderDir提交到后端了，切换到Sails源代码，找到控制器的find函数，代码片段如下：

 let query = query2Sails('user', req._sails, req.body);if (query == false) {res.serverError("查询参数有误，请检查字段名称是否正确");return;}

这个地方，把前端的body拿去做转换，这个转换是为了完成前后端查询的约定。（相关博文在《二、 在Sails中使用Typescript》中有解释，需要回顾可以点击跳转过去）

query2Sails函数里面对排序字段的要求是options.sort = body.sort;为了防止查询参数有误，如果查询的参数不是数据库的字段或查询允许的其他关键词（比如page,pageSize,sort）该函数会返回false，告诉前端查询参数有问题，需要调整。

基于上述内容，前端需要对排序参数进行重新组织：用正则表达式把Url里面的orderBy和orderDir提取出来：

/*** 用正则表达式捕获网址里面的sort* @param url*/
function getSortByReg(url: string): string {let res = '';let orderByRegex = /orderBy=(\w+)/;let orderDirRegex = /orderDir=(\w+)/;let orderByMatch = url.match(orderByRegex);let orderDirMatch = url.match(orderDirRegex);if (orderByMatch && orderByMatch.length > 1) res = orderByMatch[1];if (orderDirMatch && orderDirMatch.length > 1) res = `${res} ${orderDirMatch[1]}`;return res;
}

修改splitUrl函数如下：

/*** 分解出Url里面的查询参数，并返回数据对象*/
export function splitUrl(url: string): any {let urlDataList = url.split('?');let apiUrl = urlDataList[0];let searchData = {},pageInfo = getPageInfoByReg(url),sort = getSortByReg(url);if (urlDataList.length > 1) {let paramsLst = urlDataList[1].split('&');for (var i = 0; i < paramsLst.length; i++) {var pair = paramsLst[i].split('=');if (pair.length < 2) continue;pair[1] = decodeURI(pair[1]);if (pair[0] == 'page' || pair[0] == 'perPage') continue;else if (pair[0] == 'orderBy' || pair[0] == 'orderDir') continue;else searchData[pair[0]] = pair[1];}}searchData = {url: apiUrl,data: { ...searchData, page: pageInfo.page, pageSize: pageInfo.pageSize, sort: sort },};return searchData;
}

保存，刷新。现在我们可以正常排序了，单击id或创建时间旁边的排序小按钮，观察输出，观察network里面，我们提交到find的body。(Request Payload)

有时候我们还会要求，crud一开始就按照某种要求排序，比如最新的数据排在最前面（order by id desc）,这种情况很好出来，直接把排序参数写在api里面，这样渲染后的第一次请求就会按照参数里面写的排序，比如：

 "api": "/api/user/find?orderBy=id&&orderDir=desc",

保存刷新后，可以看到程序出来的数据已经按照id降序了。

头部工具条

列折叠按钮

关于查询，crud提供了更多的功能，可以通过头部工具条呈现。比如列显示折叠按钮，在columns前面添加如下代码：

"headerToolbar": [{"type": "columns-toggler",        "align":"right" //可以通过指定对齐方式控制按钮在左边还是右边}],

保存并刷新，可以看到如下界面：

Bug踩坑记：amis 的列折叠按钮不能有"draggable": true 的选项，以下代码正常：
{
“type”: “columns-toggler”,
“align”:“right”
},
如果增加一个可拖动，变成
{
“type”: “columns-toggler”,
“draggable”: true，
“align”:“right”
},
就会出现 [mobx-state-tree] You are trying to read or write to an object that is no longer part of a state tree.

这个bug 已经提交到官方issues.

刷新和导出excel

"headerToolbar": [{"type": "reload","icon": "fa fa-refresh"},"export-excel",{"type": "columns-toggler",        "align":"right"}],

自定义内容

还可以添加自定义的内容，比如显示一些我们希望呈现给用户的其他信息，在headerToolbar里面添加如下代码试试：

{"type": "tpl","tpl": "一共有 ${count} 行数据。",//${count} 可以获取api返回的data里面的count,还可以尝试${sql} 看看有什么效果"className": "v-middle"
},

tpl是amis提供的模板，可以参考：

https://aisuda.bce.baidu.com/amis/zh-CN/docs/concepts/template
https://aisuda.bce.baidu.com/amis/zh-CN/components/tpl

amis 还提供更多其他按钮，可以到amis官网了解更多

删

可以提供两种删除功能

单条删除

在columns数组最后面添加一个操作列，操作列里面添加删除功能，代码如下：

 "columns": [......{//添加操作栏"type": "operation","label": "操作","buttons": [ //操作栏里面可以有许多操作按钮，所以这个地方buttons后面跟的是一个数组{"label": "删除","type": "button","actionType": "ajax","level": "danger","confirmText": "确认要删除？","api": {//点击按钮之后提交的api"url": "/api/userDel","data": {"id": "${id}"}}}]}
]//columns结束

保存刷新后，可以看到删除按钮，但是点击删除按钮后发现Sails返回“不可以无条件删除的错误”，跟踪点击按钮之后提交的api请求，控制台输出如下：

[url]: /api/userDel
[data]: {id: 22}

这里我们看到id并没有如预期的写在url参数里面，这和我们schema源代码里面api的新写法有关系，这里，通过${id}可以获取当前操作按钮所在行的数据的id值。考虑后面我们在批量删除的时候还有更多的id变换，直接写在url参数里面直观性比较差，amis 的api同时提供两种写法，直接写在url里面的在参数要求比较直观的时候比较合适。如果需要对参数进行变换或是参数比较多的时候，可以通过“data”属性进行设置，并且设置在data里面的数据是通过提交到data参数而不是url后面加“?”来传递到fetcher的。所以我们上述的写法，url里面没有参数，data里面有{id:22}

如果我们希望把删除的条件id=22写在查询参数里面，可以这样：

 "api": "/api/userDel?id=${id}",

现在我们针对新的写法，utils/request.ts里面也应该增加这种情况下，对data数据的获取，这个修改比较简单:

增加一条
if (sd.url == '/api/userDel') sd.data = data;
同时对sd.url的判断里面增加一个||sd.url= ='/api/userDel'即可

修改后的amisRequest函数如下：

export async function amisRequest(url: string, method?: string, data?: any, options?: { [key: string]: any }) {console.log('[url]:', url);console.log('[data]:', data);let newMethod = '';if (!method) newMethod = 'GET';else newMethod = method.toUpperCase();let sd = splitUrl(url);if (sd.url == '/api/userDel') sd.data = data;if (sd.url == '/api/user/find'||sd.url=='/api/userDel') {return remoteRequest(sd.url, {method: 'POST',data: sd.data,...(options || {}),});}switch (newMethod) {case 'GET':return remoteRequest.get(url, options);case 'POST':return remoteRequest.post(url, options);case 'DELETE':return remoteRequest.delete(url, options);case 'PUT':return remoteRequest.put(url, options);}
}

保存再执行删除，观察network里面的Payload。

点击删除按钮，数据被删除并且提示删除成功。同时我们看到界面里面的对应数据也没有了。这就说明我们点击删除按钮之后，crud组件会自动重载

批量删除

有时候我们希望可以一次性删除多条数据，crud提供批量操作bulkActions，我们可以把它添加在headerToolbar中，代码片段如下：

"headerToolbar": ["bulkActions",{"type": "reload","icon": "fa fa-refresh"},.........
]

当然保存之后界面上面不会有变化，因为我们只是在headerToolbar里面添加了一个批量动作的占位符而已，我们还需要对批量动作进行具体定义，在headerToolbar 后面添加同级内容bulkActions：

"headerToolbar": [
....
],
"bulkActions": [{"label": "批量删除","actionType": "ajax","api": {"url": "/api/userDel","data": {"id": "${CONCATENATE('in$(',ids,')')}"}},"confirmText": "确定要批量删除?"}
],

批量删除里面有个actionType，这个是动作类型，和button按钮类似。其中ajax标识这个动作是一个提交到后端的ajax操作（也就是发出api请求），api里面的内容是点击批量删除按钮之后发出的api，通过采用data的方式传递数据，“id”: "KaTeX parse error: Expected '}', got 'EOF' at end of input: …CONCATENATE('in(‘,ids,’)')}"这个语句利用amis提供的字符串连接公式，更多信息可以参考：amis表达式

因为我们要根据提供的id值删除多条数据，批量操作的 时候crud会提供当前选择的所有id值到ids变量，比如我们选择id值为18,19两个数据，ids的值就应该是18，19

我们的sails源代码里面，对删除多条id的要求是提交的body里面应该这样写：id: “in$(18,19)”,删除函数会根据前后端约定要求，转换成符合sails的形式：{id：in: [18,19] } 最终再翻译成对应的sql查询语句的where条件。

为此我们通过amis表达式：CONCATENATE，合成一个in$(18,19) 的参数给amisRequest，最终提交到后端我们可以成功删除多条数据了。如下图：

保存并刷新，观察network。

增

新增数据

在headerToolbar里面添加一个可以打开对话框（ “actionType”: “dialog”）的“新增”按钮，

  {"label": "新增","type": "button","actionType": "dialog",//action类型是打开对话框"level": "primary","className": "m-b-sm","dialog": {//对话框节点"title": "添加用户",//对话框title"body": {"type": "form",//对话框body里面添加form表单节点"api": "/api/userCreate",//form提交是请求的api"body": [//form里面的项目{"type": "input-text",//文本输入框组件"name": "email",              "label": "Email"},{"type": "input-text","name": "nickname",              "label": "昵称"},{"type": "native-number","name": "age","label": "年龄"},{"type": "hidden",//隐藏类型组件"name": "password","value": "123456"}]}}},

就这样，我们添加了一个可以新增用户数据的功能，点击新增按钮，可以弹出新增对话框，在对话框里面填写数据并提交后，后请求/api/userCreate这个后端api。

保存刷新：

界面已经满足预期，打开F12，任意添加一些数据后点击确定，观察控制台输出：

[url]: /api/userCreate
[data]: {password: '123456', email: '89898', nickname: '88', age: '88', __super: {…}}

这个调用fetcher的url和data也满足预期，接下来在utls/request.ts里面添加对userCreate这个api的拦截处理，把data post到userCreate的body 就可以了：

/*** 需要拦截处理的url名单 要处理的api越来越多，用数组来判断*/
const toBeProcessUrl = ['/api/user/find', '/api/userCreate', '/api/userDel', '/api/user/updateOne'];
/** amis的schema文件专用request*/
export async function amisRequest(url: string, method?: string, data?: any, options?: { [key: string]: any }) {console.log('[url]:', url);console.log('[data]:', data);let newMethod = '';if (!method) newMethod = 'GET';else newMethod = method.toUpperCase();let sd = splitUrl(url);if (sd.url == '/api/userDel') sd.data = data;else sd.data = { ...sd.data, ...data };if (toBeProcessUrl.includes(sd.url)) {//要处理的api越来越多，用数组来判断return remoteRequest(sd.url, {method: 'POST',data: sd.data,...(options || {}),});}switch (newMethod) {case 'GET':return remoteRequest.get(url, options);case 'POST':return remoteRequest.post(url, options);case 'DELETE':return remoteRequest.delete(url, options);case 'PUT':return remoteRequest.put(url, options);}
}

保存刷新后，可以新增用户数据了。

headerToolbar 结果分析

一步一步过来，这个schema越来越复杂了，为了更加清晰的了解整个schema结构，我们把headerToolbar结构分析成如下图：

在编写schema 文档的时候，可以尽量的利用vscode的代码折叠功能，把复杂的当前不关心的节点折叠起来，这样有利于我们修改和管理schema源代码

前端数据格式要求

在测试过程，随意的添加了一个email，有时候根本不符合email的格式，但是依然可以顺利的提交并完成添加。这样的程序是不够严谨的，在前端，用户输入的时候，就应该对用户的输入做一些必要的格式检查。
amis 有提供格式校验的功能，详细资料可以参考：amis 格式校验

现在我们来实践一下对email的输入格式校验，在新增按钮的form里面，找到email输入项，修改如下：

{"type": "input-text","name": "email","required": true,//不允许空白"validations": {//校验参数"isEmail": true},"label": "Email"
},

修改后再随意提交，就会被拒绝：

改

数据修改

修改是需要针对某一条数据的，所以我们应该把修改按钮放置在操作栏里面，在操作栏中添加修改按钮，该按钮和新增按钮一样需要弹窗：

 "columns": [................{"type": "operation","label": "操作","buttons": [............{"label": "修改",           "type": "button","level": "warning",//按钮颜色和删除按钮区分一下"actionType": "dialog","dialog": {"title": "信息修改","body": {"type": "form","api": "/api/user/updateOne","body": [{"type": "hidden","name": "id","value":"${id}" //修改需要提交当前记录的id，用隐藏字段实现},{"type": "hidden","name": "version","value":"${version}" //修改需要提交当前记录的版本号，用隐藏字段实现},{"type": "input-text","name": "createdAt","disabled": true,//创建时间应该是不可改的"label": "创建时间"},{"type": "input-text","name": "email","required": true,"validations": {"isEmail": true},"label": "Email"},{"type": "input-text","required": true,"name": "nickname","label": "昵称"},{"type": "native-number","name": "age","label": "年龄"}]}}},]}
]

保存后，界面已经满足预期，但是提交到api依然错误：

重组提交数据

我们还需要对提交到修改api的数据进行重新组织，打开sails源代码里面wlSimulate.ts文件，找到updateOne函数，可以看到注释里面有提到修改api的测试数据格式：

/**
* postmant 测试数据：
* 
{  "where":{"id":51},    "valuesToSet":{"email":"updateTest","age":38},"oldVer":0
}
*/

根据这个格式要求，修改前端代码utils/request.ts里面的amisRequest如下：

/** amis的schema文件专用request*/
export async function amisRequest(url: string, method?: string, data?: any, options?: { [key: string]: any }) {console.log('[url]:', url);console.log('[data]:', data);let newMethod = '';if (!method) newMethod = 'GET';else newMethod = method.toUpperCase();let sd = splitUrl(url);if (sd.url == '/api/userDel') sd.data = data;else if (sd.url == '/api/user/updateOne') {//处理修改数据sd.data = {where: { id: data.id },valuesToSet: data,oldVer: data.version,};    } else sd.data = { ...sd.data, ...data };if (toBeProcessUrl.includes(sd.url)) {return remoteRequest(sd.url, {method: 'POST',data: sd.data,...(options || {}),});}switch (newMethod) {case 'GET':return remoteRequest.get(url, options);case 'POST':return remoteRequest.post(url, options);case 'DELETE':return remoteRequest.delete(url, options);case 'PUT':return remoteRequest.put(url, options);}
}

保存修改并刷新，测试修改数据，显示修改成功。打开HeidiSQL查看被修改过的数据，可以看到版本号version已经自动增加，说明修改功能符合预期。

修改左边菜单

修改左边菜单数据，打开public/json/menu/zh_CN.json 修改第一条为：

{"path": "index","name": "user表的增删改查"        
},

最终程序界面：

至此，对一个表的增删改查排序等操作都得以实现。熟悉schema比自己从头开始写代码做UI，amis的schema还是要高效非常多的。我们甚至连一行css代码都没有写，就搞定了一个高可用的增删改查页面了。

感谢amis团队！