百度低代码框架amis介绍及实例讲解
目录
- 引言
- 为什么用amis?官网这么说的
- amis不适合做什么?
- amis框架集成
- 配置与组件概念
- 实例:通过一个CRUD组件实现增删改查列表
- 列表查询
- 查看详情
- 自定义操作按钮
- 提交表单
引言
目前低代码概念已经无人不知,随着新冠病毒的爆发,远程办公、视频会议、直播等数字化应用迅速发展起来,也让低代码平台迎来了特别关注。那么问题来了,什么是低代码开发?低代码平台对未来的数字化、智能化生态会产生什么影响?
低代码开发是通过页面拖拉拽的形式实现在线构建应用程序,旨在简化开发过程,缩短开发周期,提高开发效率,节省开发成本。 通过低代码开发平台(有的也叫无代码开发平台),零代码基础也可以快速构建应用。
微软2019年首次发布了它的低代码平台-Power Platform,今年腾讯将tmagic-editor页面可视化编辑器对外开源,阿里也发布了低代码引擎LowCodeEngine,感兴趣的朋友可以阅读相关资料了解一下。国内大部分厂商真正集中投入低代码平台发展也不过数年,这些厂商紧随着云原生和数字化浪潮不断迭代演进,相比很多前沿风口行业来说,低代码在国内的发展算得上是脚踏实地接地气了。下图是2021年谷歌中低代码概念的搜索趋势。
百度公司的低代码平台产品叫爱速搭,amis 是爱速搭团队开源的前端低代码框架,爱速搭应用中的页面都是基于 amis 渲染的,同时爱速搭平台自身的绝大部分页面也是基于 amis 开发,注意是大部分不是全部哦,也就是项目还是离不开专业开发的。amis 的定位是前端 UI 框架,通过JSON配置生成各种后台页面,甚至可以不需要了解前端,类似于 Element、Ant Design,可以基于它快速开发前端页面,但需要自己整合到自己内部系统中,并且实现路由功能。
因为我现在做的项目集成了百度的amis框架,所以本文仅对amis的使用做个简单介绍,并附上具体实例供大家参考。
官网api地址: https://aisuda.bce.baidu.com/amis/zh-CN/components/index
为什么用amis?官网这么说的
在经历了十几年的发展后,前端开发变得越来越复杂,门槛也越来越高,要使用当下流行的 UI 组件库,你必须懂 npm、webpack、react/vue,必须熟悉 ES6 语法,最好还了解状态管理,比如 Redux,如果没接触过函数式编程,光入门都很费劲,而入门之后会发现它还有巨大的生态,相关的库有 2347 个,很多功能相似,挑选成本高。
然而前端技术的发展不会停滞,等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了……
而有时候其实只想做个普通的增删改查界面,用于信息管理,,类似下面这种:
这个界面虽然用 Bootstrap 及各种前端 UI 库也能做出个大概,但仔细观察会发现它有大量细节功能,比如:
- 可以对数据做筛选
- 有按钮可以刷新数据
- 编辑单行数据
- 批量修改和删除
- 按某列排序
- 可以隐藏某些列
- 可以调整列顺序
- 自动生成顶部查询区域
- 可调整列宽度
- 开启整页内容拖拽排序
- 表格有分页(页数还能同步到地址栏,不过这个例子中关了)
- 有数据汇总
- 支持导出 Excel
- 「渲染引擎」那列的表头有提示文字
- 鼠标移动到「平台」那列的内容时还有放大镜符号,可以展开查看更多
全部实现这些需要大量的代码。用 amis 只需要 157 行 JSON 配置(其中 47 行只有一个括号),你不需要了解 React/Vue、Webpack,甚至不需要很了解 JavaScript,即便没学过 amis 也能猜到大部分配置的作用,只需要简单配置就能完成所有页面开发。
这正是建立 amis 的初衷,我们认为:对于大部分常用页面,应该使用最简单的方法来实现,甚至不需要学习前端框架和工具。
amis不适合做什么?
为了实现用最简单方式来生成大部分页面,amis 的解决方案是基于 JSON 来配置,因为大多数开发人员无论前端还是后端都会接触到JSON这个简单易用的数据格式,但使用 JSON 有优点但也有明显缺点,在以下场合并不适合 amis:
- 大量定制 UI:JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面,但对于面向普通客户(toC)的页面,往往追求个性化的视觉效果,这种情况下用 amis 就不合适,实际上绝大部分前端 UI 组件库也都不适合,只能定制开发。
- 极为复杂或特殊的交互:
- 有些复杂的前端功能,比如可视化编辑器,其中有大量定制的拖拽操作,这种需要依赖原生 DOM 实现的功能无法使用 amis。
- 但对于某些交互固定的领域,比如图连线,amis 后续会有专门的组件来实现。
感觉官网说的还有些含蓄,大概意思就是一些简单的功能可以用amis进行配置开发,一些定制化程度高的需求不适合。某些大厂说的80%的项目可以用低代码平台开发也是这个意思,剩下的20%才是开发人员需要重点攻克的,实际做项目还是要结合两种方式,实现低代码开发和代码开发两条腿走路。
amis框架集成
amis 有两种使用方法:
- JS SDK,可以用在任意页面中
- React,可以用在 React 项目中
SDK 版本适合对前端或 React 不了解的开发者,它不依赖 npm 及 webpack,可以像 Vue/jQuery 那样外链代码就能使用。我是采用这种安装方式在前端vue项目种安装了amis组件,因篇幅有限具体安装方式大家参考官网吧,本文重点是通过实例讲解amis编辑器的用法。如果还没有具体需求,也可以跳过安装的部分,通过官网的在线编辑器进行学习。
去amis官方文档页面了解更多。
配置与组件概念
一个最简单的 amis 配置看起来是这样的:
{"type": "page","body": "Hello World!"
}
请观察上面的代码,这是一段 JSON,它的含义是:
type 是 amis 节点中最重要的字段,它告诉 amis 当前节点需要渲染的是Page组件。
而 body 字段会作为 Page 组件的属性,Page 组件根据这个值来渲染页面内容。
这个简单代码在amis编辑器种就会渲染出一个简单页面,可以实时预览,相信用过Echarts图表的人可能体会过这种便利性,我们只要修改七种的各个属性值就会看到页面发生神奇的变化。复杂点的页面也是通过这样一个个简单的组件搭建起来的,比如列表组件、按钮组件、表单组件及表单中的input/select/radio/switch开关等,这些组件的不能功能是通过不同的属性来控制的。
实例:通过一个CRUD组件实现增删改查列表
在编辑器左侧组件选项卡中选择CRUD组件拖入主界面,找不到的话可以搜一下,通过中英文名字都可以。组件拖过来之后会出现一个弹窗配置页面,接口地址是相对地址(除掉IP、端口和项目根路径),选择列表中需要实现的按钮,这里我选了查询、查看详情和编辑功能。这些配置也可以先不管,在组件初始化后都可以再修改,配置是实时保存编译的。
列表查询
列表最主要的是查询功能,一般低代码平台会选择在数据建模的基础上实现接口(建模是通过配置字段、表名等生成数据库表模型),我也是刚入门自己探索了一下,在没有建模的基础上实现的这个例子,也就是说接口都是基本的查询数据库。
右面有个面板可以修改当前组件的各种属性,我在“常规”选项卡中改了启动查询条件,在“接口”选项卡中改了接口查询方式为POST(代码中对应initApi属性),从左面的代码面板中可以查看生成的JSON代码,红框中就是列表的的其中一个字段,name属性是数据库返回的字段名,label是页面显示的列名,type是数据类型,可以根据需求增加需要展示的字段列。
查询功能需要注意:
- 查询条件配的api属性接口地址跟页面初始化的接口initApi的接口是一样的,不用拼接属性参数之类的,参数自动往后端传,比如下图中的查询条件,在后端收到的参数就是keyword.
- filterColumnCount属性是设置查询后默认返回前多少条
查看详情
组件勾选了后自带了查看详情功能,点击详情按钮会弹出一个dialog组件,默认子组件会继承父页面的数据,包括列表中没有展示的字段,所以不用加接口,在列表查询的时候尽量把字段都查出来就行。我这里没用自带的,而是配置了一个新的页面,代码如上图所示,通过在dialog组件中加入service组件实现的,url是另一个amis表单的地址(这里页面是有有个解析接口,每个页面配置后都会生成一个url地址),data属性不用传值,来自列表中某一行数据。弹窗详情页面如下图所示:
自定义操作按钮
在增删改查列表设计页面,查看详情按钮后面拖入一个提交按钮,点击提交按钮查看相应代码如下:
{"type": "button","label": "提交","actionType": "dialog","dialog": {"title": "XX表单提交","size": "xl","body": [{"type": "service","schemaApi": {"method": "post","url": "/AmisTemplate/getTemplateByCode?AMIS_MODEL_CODE=SUBMITFORM","data": {"id": "${ID}","number": "${NUMBER}","assetName": "${ASSETNAME}","price": "${PRICE}","model": "${MODEL}","producer": "${PRODUCER}","brand": "${BRAND}","city": "${CITY}"}},"messages": {}}],"actions": []}
}
解释:跟查看详情的实现方式差不多,也是在dialog弹窗组件中引入了另一个配置页面,不同的是对新页面做了数据映射,上图中右侧大写的数据是列表数据字段,左侧小写的是提交表单中用到的数据。
提交表单
下图是提交按钮对应的Json代码,点击按钮会发送一个ajax请求。
{"type": "button","label": "提交","actionType": "ajax","visibleOn": "this.STATUS!=='1'","api": {"method": "post","url": "/flow/amis/startWorkFlow","data": {"&": "$$","processDefinitionKey": "flow_asset","businessKey": "","processName": "XX管理流程","modelCode": "ASSET"},"dataType": "json"}
}
其中data中的参数需要注意:
当数据域里的变量值为$$时, 表示将所有接口返回的data字段值整体赋值到对应的 key 中
至此,第一个实例做完了,目前博主也正在学习amis框架的用法,后续会继续输出更多实例,有喜欢amis的朋友可以一起交流啊!
百度低代码框架amis介绍及实例讲解相关推荐
- 全网详细介绍百度低代码框架amis及实例讲解
文章目录 1. 文章引言 2. amis官网 3. amis介绍 3.1 amis的简述 3.2 amis的初衷 3.3 amis的其他亮点 3.4 amis不适之处 4. amis使用 4.1 am ...
- 低代码框架amis的使用
文章目录 前言 一.简介 二.amis 的其它亮点 三.amis 不适合做什么? 四.amis 使用方法 五.amis 使用过程中的坑 前言 提示:为什么要用amis? 在经历了十几年的发展后,前端开 ...
- amis 视频教程 入门+实战 百度出的前端低代码框架
Amis 前端低代码框架 百度出品 基础简介(1)_哔哩哔哩_bilibili这是第1个视频建立了一个Amis交流QQ群 感兴趣的可以加下QQ群号:717791727Amis 官方文档https:// ...
- 开源推荐 | 携程 Foxpage 前端低代码框架
作者简介 Jason Wang,携程研发经理,目前主要负责低代码类产品的设计和研发,关注低代码行业的发展及相关解决方案在企业内部的落地. 大厂技术 高级前端 Node进阶 点击上方 程序员成长指北 ...
- 开源 | 携程 Foxpage 前端低代码框架
作者简介 Jason Wang,携程研发经理,目前主要负责低代码类产品的设计和研发,关注低代码行业的发展及相关解决方案在企业内部的落地. 一.背景 随着低代码开发方式被越来越多的人接受和认可,低代码得 ...
- Html代码seo优化最佳布局实例讲解
搜索引擎对html代码是非常优化的,所以html的优化是做好推广的第一步.一个符合seo规则的代码大体如下界面所示. 1.<!–木庄网络博客–> 这个东西是些页面注释的,可以在这里加我的& ...
- 前端低代码工具amis使用文档
amis使用文档 本文档旨在帮助开发人员快速入门amis低代码开发平台. 简介 amis 是一个百度出品的低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率. 安装 ...
- 国内低代码平台 白码低代码开发平台介绍
微软在今年4月的"在线技术峰会"上提出,未来五年全球将诞生5亿个新应用程序,比过去40年的总和还要多.同时,企业对于移动应用的需求增速会是IT部门开发能力增速的五倍,低代码等快速生 ...
- 国内低代码开发平台介绍
开发平台类厂商: ➤ 宜搭:宜搭是阿里巴巴企业智能事业部研发的SaaS企业应用构建平台,于2019年3月上线,平台集合了页面设计.业务规则定义.数据收集与分析三大核心能力,用户可通过简单的拖拽.配置完 ...
- 盘点|国内5款主流低代码开发平台介绍
国内主流低代码开发平台有哪些? 低代码开发平台作为解决企业数字化转型的有力手段,得到越来越多的关注,但企业在选型的时候也很苦恼,到底该选哪家,不同低代码平台到底有啥区别?各自侧重点是什么? 这篇从平台 ...
最新文章
- 各种开发源代码软件许可证异同
- AT2370 Piling Up
- 【Windows 逆向】OD 调试器工具 ( OD 附加进程 | OD 调试器面板简介 | 反汇编窗口 | 寄存器窗口 | 数据窗口 | 堆栈窗口 )
- hive按照某个字段分组,然后获取每个分组中最新的n条数据
- leetcode 718. Maximum Length of Repeated Subarray | 718. 最长重复子数组(动态规划)
- BZOJ #3166. [Heoi2013]Alo(可持久化trie树+set)
- redis java 缓存服务器_java中对Redis的缓存进行操作
- STM32F407ZGT6 fatfs出现挂载成功,但是文件读写失败的原因
- c语言实验报告7,C语言实验报告7.doc
- Linux中如何使用帮助
- 13-hadoop-入门程序
- 台达b2伺服modbus通讯_台达伺服ASDA-B2使用手册-简体最新.pdf
- 深入浅出GAMP算法(中): GAMP
- 程序员玩游戏之四--娱网棋牌大连打滚子记牌器
- 计算机打印怎么取消,打印机如何取消打印作业?如何删除打印作业?
- 生活如此美好 我却如此暴躁
- 机器人总动员英语情歌_机器人总动员中英文字幕
- 中国古代数学家张丘建在他的《算经》中提出了一个著名的“百钱百鸡问题”:一只公鸡值5钱,一只母鸡值3钱,三只小鸡值1钱,现在要用百钱买百鸡,请问公鸡、母鸡、小鸡各多少只?
- ibatis oracle批量insert,ibatis 批量插入oracle总结
- HTML5 canvas 之 clip