当前位置： 首页 > news >正文

百度amis框架经验分享

news 来源：原创 2024/9/27 23:26:50

百度amis框架经验分享

官方文档

amis - 低代码前端框架

这篇文章讲了amis的设计

为什么说百度AMIS框架是一个优秀的设计_百度前端框架-CSDN博客

学习方法：

最好的学习方法就是GPT+官方文档

不要去很大力气通读官方文档，大概浏览一遍就行， 以你自己的任务为导向， 不懂的先让GPT帮你生成配置文件，然后看不懂的对照官方文档去理解。

有几个坑要注意：

0） VUE框架里面不要通过npm install来使用amis，那样会把当前项目的环境搞乱。因为amis依赖很多包。 最好的方式是通过sdk的方式来使用。 本文档最后会给一个最佳实践,将sdk包放入到前端项目/public目录下就可以。

https://github.com/baidu/amis/releases/download/6.8.0/jssdk.tar.gz

1） 控制 AMIS 组件的显示状态

visible: 静态布尔值控制显隐。
visibleOn: 基于表达式动态控制显示。
hiddenOn: 基于表达式动态控制隐藏。

如果在表格中使用visibleOn，要确保字段在界面上有展示（隐藏也算）

"api": `delete:${prefix2}/sz/info/`+"${id}",
如果要对表的字段做引用就用${xx}，把这个当一个字符串对待，如果要引用外部变量，那就要放在``表达式里面。

2）批量删除按钮，记得在

"headerToolbar": [
	{
	  "type": "bulkActions"
	}
]里面加上，
还有
"bulkActions": [
        {
          "label": "批量删除",
          "visible": true,
          "actionType": "ajax",
          "api": `delete:${prefix2}/sz/info/`,
          "confirmText": "确定要批量删除选中的记录吗？"
        }
      ],

3） 如果是父子表，注意看业务情况是否要关闭 "canAccessSuperData": false

4） 修改表单的时候，需要2个URL,分别是api和initapi , api参数还可以拆分，

"type": "form",
"api": `put:${prefix2}/sz/info`,
"initApi": `get:${prefix2}/sz/info/`+"${id}",
"canAccessSuperData":false,

5） crud上方的检索条件，不要用定义在外面的表单来实现，要不检索的时候，会重新刷页面。

crud上方的检索条件，用自带的filter就可以实现。

6） crud 默认是跟地址栏联动，如果要做请关闭同步地址栏 syncLocation: false

7） 配置一下下拉列表

  {

        "label": "选项",

        "type": "select",

        "name": "select",

        "source": "/amis/api/mock2/form/getOptions?waitSeconds=1"

      }   

8） 有父子关系的表格，在返回的列表数据json串里面加上children，就可以形成父子关系，就可以做成树形表。

9） 表格展示的时候，如果某个值需要翻译怎么处理？ 

                {"name": "isShow","label": "是否展示","type": "mapping","map": {"1": "展示","2": "隐藏"}},
            还可以远程拉取字典{"type": "mapping","name": "type","label": "映射","source": "/amis/api/mapping"}
      帮助文档里面专门将这个的，有很多例子： https://aisuda.bce.baidu.com/amis/zh-CN/components/mapping

10) 关于文件上传，有专门的图片上传type='input-image'

{'type': 'input-text','name': 'fileId' ,'visible':false},
{'type': 'input-image', 'name': 'files',"frameImage":'${fileId}', "fileField":"files",'initAutoFill':false, "accept": "image/*", "receiver": `${FILEBASEURL}/uploadOneFile` ,'label': '头像', "autoFill": {"fileId": "${url}"}},

name的默认值是file,但如果服务器是通过files字段来接收，那么就要加上 "fileField":"files"来指示。

frameImage属性代表修改的时候，底图会是上次上传的图片。

initAutoFill属性很有用，修改页面这个要设置为false，要不然修改的时候看不到图片，因为默认进来没有图片，autoFill填充会被冲掉。

  1. 官网文档有检索功能，不知道的功能可以通过检索查找。
  2. 不要小看数据映射。

数据映射支持用户通过${xxx}或$xxx获取当前数据链中某个变量的值，实现灵活的数据配置功能，主要用于模板字符串、 自定义 api 请求数据体格式等场景。

path: 指定筛选的模板，默认为&，即返回原数据

11 下拉列表的格式，在table里面的source也可以使用这个格式，字典将自动翻译。 

/res/basic/getResList2返回值
{"msg": "","data": [{"label": "花溪公园","value": "123"},    ],"status": 0
}{"type": "mapping",  'label':'公园名称' ,'name':'resCode' , 'source': `${prefix2}/res/basic/getResList2`},

12） 如果是一个复杂的逻辑要处理，使用模板引擎来解析，不要使用render，render试了一下，还是不能达到效果。 

{ 'type': 'tpl',  'name': 'fileIds', 'label': '培训计划附件'  , "tpl": `
      <%
        console.log(data.fileIds); 
        if (data.fileIds) { 
        var urlArray = data.fileIds.split(',');
        for (var i = 0; i < urlArray.length; i++) { %>
          <a href="<%= urlArray[i] %>" target="_blank"><%= urlArray[i].split('/').pop() %></a><br/>
        <% }
      } %>
      `},

13 如果select下拉有偏移，跑到其他地方了。 类似以下这种。

加上这个属性

						"className": "isshow-dropdown","popOverContainerSelector": '.isshow-dropdown'

一个最佳实践的例子

assessment-plan-crud.vue

<template><div class="app-container" ref="amisRoot"></div>
</template><script>
import crudjson from './assessment-plan-crud.ts'
import '@/views/manage/sz/sz.css'
export default {mounted() {const amis = amisRequire('amis/embed');const amisScoped = amis.embed(this.$refs.amisRoot, crudjson)}
}
</script>

assessment-plan-crud.ts


import getprefix2 from '@/views/manage/sz/util/common'
const prefix2 = getprefix2()
const crudjson ={
  "type": "page",
  "body": [
    {
      "type": "crud",
      "id": "mytable",
      "name": "mytable",
      "syncLocation": false,
      "filter": {
        "title": "",
        "type": "flex",
        "justify": "start",  // 控制对齐方式
        "body": [          {
            "type": "select",
            "name": "resCode",
            "label": "水库名称",
            "placeholder": "请输入水库名称",
            "clearable": true,
            "source": `${prefix2}/res/basic/getResList2`,
          },
          {
            "type": "input-text",
            "name": "assessmentPlanName",
            "label": "考核计划名称",
            "placeholder": "请输入考核计划名称",
            "clearable": true
          },
          {
            "type": "input-text",
            "name": "assessmentUnit",
            "label": "考核单位",
            "placeholder": "请输入考核单位",
            "clearable": true
          },
          {
            "type": "select",
            "name": "isShow",
            "label": "是否展示",
            "options": [
              {
                "label": "展示",
                "value": "1"
              },
              {
                "label": "隐藏",
                "value": "2"
              }
            ],
            "placeholder": "请选择展示隐藏",
            "clearable": true
          },
          {
            "type": "button",
            "label": "查询",
            "level": "primary",
            "actionType": "submit",
            "className": "ml-2"
          },
          {
            "type": "button",
            "label": "重置",
            "actionType": "reset",
            "className": "ml-2"
          }
        ]
      },
      "bulkActions": [
        {
          "label": "批量删除",
          "visible": true,
          "actionType": "ajax",
          "api": `delete:${prefix2}/sz/assessmentPlan/`+"${ids}",
          "confirmText": "确定要批量删除选中的记录吗？"
        }
      ],
      "headerToolbar": [
        {
          "type": "button",
          "label": "新增",
          "level": "primary",
          "actionType": "dialog",
          "dialog": {
            "title": "新增考核",
            "body": {
              "type": "form",
              "api": `post:${prefix2}/sz/assessmentPlan`,
              "controls": [
                {
                  "type": "select",
                  "name": "resCode",
                  "label": "水库名称",
                  "clearable": true,
                  "source": `${prefix2}/res/basic/getResList2`,
                },
                {
                  "type": "text",
                  "name": "assessmentPlanName",
                  "label": "考核计划名称"
                },
                {
                  "type": "number",
                  "name": "assessmentPlanPassPerson",
                  "label": "考核通过人数"
                },
                {
                  "type": "number",
                  "name": "assessmentPlanFailedPerson",
                  "label": "考核未通过人数"
                },
                {
                  "type": "input-text",
                  "name": "assessmentUnit",
                  "label": "考核单位"
                },
                {
                  "type": "text",
                  "name": "id",
                  "visible": false,
                  "value": "${id}",
                  "label": "id"
                }
              ]
            }
          }
        },
        "export-excel", "bulkActions", "pagination"
      ],
      "api": {
        "url": `${prefix2}/sz/assessmentPlan/list`,
        "method": "get"
      },
      "columns": [
        {
          "name": "index",
          "label": "序号",
          "type": "tpl",
          "tpl": "${index + 1}",
          "fixed": "left",
          "width": 50
        },
        {
          "name": "assessmentPlanName",
          "label": "考核计划名称",
          "type": "text"
        },
        {
          "name": "assessmentPlanPassPerson",
          "label": "考核计划通过人数",
          "type": "text"
        },
        {
          "name": "assessmentPlanFailedPerson",
          "label": "考核计划未通过人数",
          "type": "text",
        },
        {
          "name": "assessmentUnit",
          "label": "考核单位",
          "type": "text"
        },
        {
          "type": "text",
          "visible":false,
          "name": "id",
          "label": "id",
        },
        {
          "type": "operation",
          "label": "操作",
          "buttons": [
            {
              "type": "button",
              "label": "修改",
              "actionType": "dialog",
              "dialog": {
                "title": "修改考核",
                "body": {
                  "type": "form",
                  "api": `put:${prefix2}/sz/assessmentPlan`,
                  "initApi": `get:${prefix2}/sz/assessmentPlan/`+"${id}",
                  "canAccessSuperData":false,
                  "controls": [
                    {
                      "type": "select",
                      "name": "resCode",
                      "label": "水库名称",
                      "clearable": true,
                      "source": `${prefix2}/res/basic/getResList2`,
                    },
                    {
                      "type": "text",
                      "name": "assessmentPlanName",
                      "label": "考核计划名称"
                    },
                    {
                      "type": "number",
                      "name": "assessmentPlanPassPerson",
                      "label": "考核通过人数"
                    },
                    {
                      "type": "number",
                      "name": "assessmentPlanFailedPerson",
                      "label": "考核未通过人数"
                    },
                    {
                      "type": "input-text",
                      "name": "assessmentUnit",
                      "label": "考核单位"
                    },
                    {
                      "type": "text",
                      "name": "id",
                      "visible": false,
                      "value": "${id}",
                      "label": "id"
                    }
                  ]
                }
              }
            },
            {
              "type": "button",
              "label": "删除",
              "level": "danger",
              "actionType": "ajax",
              "confirmText": "确定要删除该条记录吗？",
              "api": `delete:${prefix2}/sz/assessmentPlan/`+"${id}",
            }
          ]
        }
      ]
    }
  ]
} export default crudjson

相关文章：

  • 第二十节：学习Redis缓存数据库实现增删改查（自学Spring boot 3.x的第五天）
  • 给子组件传递dom元素引用实例方案
  • OJ在线评测系统 前端创建题目(增) 更新题目(改) 题目列表(查) 以及做题页面的开发 基于VUECLI脚手架画界面
  • Docker部署MongoDB教程
  • Spring 事务管理-AOP
  • python学习-13【网络编程】
  • SBB Usage Parameters
  • Supervision 计算机视觉工具
  • 【网络安全】网络基础第一阶段——第四节：网络协议基础---- VRRP与网络架构设计
  • 基站定位与Wi-Fi定位？看这篇就够了
  • C++——认识STL及使用及实现第一个容器string
  • 关于若依前端界面缓存问题
  • 【Tomcat】常见面试题整理 共34题
  • Docker本地部署Chatbot Ollama搭建AI聊天机器人并实现远程交互
  • 如何在 macOS 上恢复未保存的 Excel 文件 – 文件恢复的最佳方法
  • JavaScript 如何正确处理 Unicode 编码问题！
  • [js高手之路]搞清楚面向对象,必须要理解对象在创建过程中的内存表示
  • ES学习笔记(10)--ES6中的函数和数组补漏
  • js递归,无限分级树形折叠菜单
  • js写一个简单的选项卡
  • Phpstorm怎样批量删除空行？
  • rabbitmq延迟消息示例
  • 分类模型——Logistics Regression
  • 欢迎参加第二届中国游戏开发者大会
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件（包含源代码）
  • 腾讯优测优分享 | Android碎片化问题小结——关于闪光灯的那些事儿
  • 因为阿里，他们成了“杭漂”
  • 转载：[译] 内容加速黑科技趣谈
  • nb
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • ​猴子吃桃问题：每天都吃了前一天剩下的一半多一个。
  • # 手柄编程_北通阿修罗3动手评：一款兼具功能、操控性的电竞手柄
  • #免费 苹果M系芯片Macbook电脑MacOS使用Bash脚本写入(读写)NTFS硬盘教程
  • （Redis使用系列） Springboot 使用redis实现接口Api限流 十
  • （超简单）使用vuepress搭建自己的博客并部署到github pages上
  • （函数）颠倒字符串顺序（C语言）
  • （剑指Offer）面试题34：丑数
  • （南京观海微电子）——I3C协议介绍
  • （图文详解）小程序AppID申请以及在Hbuilderx中运行
  • （转载）PyTorch代码规范最佳实践和样式指南
  • .bat批处理（九）：替换带有等号=的字符串的子串
  • .FileZilla的使用和主动模式被动模式介绍
  • .net oracle 连接超时_Mysql连接数据库异常汇总【必收藏】
  • .NET/C#⾯试题汇总系列：⾯向对象
  • .NET程序集编辑器/调试器 dnSpy 使用介绍
  • .one4-V-XXXXXXXX勒索病毒数据怎么处理|数据解密恢复
  • @SpringBootConfiguration重复加载报错
  • []FET-430SIM508 研究日志 11.3.31
  • [100天算法】-每个元音包含偶数次的最长子字符串（day 53）
  • [AHOI2009]中国象棋 DP，递推，组合数
  • [C++][基础]1_变量、常量和基本类型
  • [CUDA手搓]从零开始用C++ CUDA搭建一个卷积神经网络(LeNet)，了解神经网络各个层背后算法原理
  • [C语言]——内存函数
  • [ERROR] ocp-server-ce-py_script_start_check-4.2.1 RuntimeError: ‘tenant_name‘