[Java知识库]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]）。

三、总结

通过分析相关代码，明白了界面设计之中，如何将信息呈现界面简单化，以弹出表格的形式，实现对数据的查看、增删改查等操作。