amis学习笔记-代码分析①
2021SC@SDUSC
目录
一、前言
分析功能模块为CRUD，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。
注意 CRUD 所需的数据必须放 items 中，因此如果只是想显示表格类型的数据没有分页，请使用 Table。
二、源代码分析
1.
{
"type": "page",
"body": {
"type": "crud",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample",
"syncLocation": false,
"columns": [
{
"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"
}
]
}
}//配置数据源接口，以及展示列
2.
数据源接口数据结构要求
items或rows：用于返回数据源数据，格式是数组total: 用于返回数据库中一共有多少条数据，用于生成分页
{
"status": 0,
"msg": "",
"data": {
"items": [
{
// 每一行的数据
"id": 1,
"xxx": "xxxx"
}
],
"total": 200 // 注意！！！这里不是当前请求返回的 items 的长度，而是数据库中一共有多少条数据，用于生成分页组件
// 如果你不想要分页，把这个不返回就可以了。
}
}{
"status": 0,
"msg": "",
"data": {
"items": [
{
// 每个成员的数据。
"id": 1,
"xxx": "xxxx"
}
],
"hasNext": true // 是否有下一页。
}
}
如果无法知道数据总数，只能知道是否有下一页，返回上面的格式，amis 会简单生成一个简单版本的分页控件。
3.具体功能代码，有增删改查等等，这里只分析改
{
"type": "page",
"body": {
"type": "crud",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample?orderBy=id&orderDir=desc",
"syncLocation": false,
"columns": [
{
"name": "id",
"label": "ID"
},
{
"name": "engine",
"label": "Rendering engine"
},
{
"name": "browser",
"label": "Browser"
},
{
"type": "operation",
"label": "操作",
"buttons": [
{
"label": "修改",
"type": "button",
"actionType": "drawer",
"drawer": {
"title": "新增表单",
"body": {
"type": "form",
"initApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/${id}",
"api": "post:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/${id}",
"body": [
{
"type": "input-text",
"name": "engine",
"label": "Engine"
},
{
"type": "input-text",
"name": "browser",
"label": "Browser"
}
改功能主要有三种实现：单条操作、批量操作或者直接添加一个操作栏，在里面放个类型为 ajax 类型的按钮即可。在这个按钮里面能获得对应的行数据，而且完成后也会自动刷新 CRUD 列表。如果列表没有返回，可以在 form 里面再配置个 initApi 初始化数据，如果行数据里面有倒是不需要再拉取了。表单项的 name 跟数据 key 对应上便自动回显了。默认发送给表单的保存接口只会包含配置了的表单项，如果不够，请在 api 上配置数据映射，或者直接添加 hidden 类型的表单项（即隐藏域 input[type=hidden]）。
三、总结
通过分析相关代码，明白了界面设计之中，如何将信息呈现界面简单化，以弹出表格的形式，实现对数据的查看、增删改查等操作。