引言

目前低代码概念已经无人不知,随着新冠病毒的爆发,远程办公、视频会议、直播等数字化应用迅速发展起来,也让低代码平台迎来了特别关注。那么问题来了,什么是低代码开发?低代码平台对未来的数字化、智能化生态会产生什么影响?
低代码开发是通过页面拖拉拽的形式实现在线构建应用程序,旨在简化开发过程,缩短开发周期,提高开发效率,节省开发成本。 通过低代码开发平台(有的也叫无代码开发平台),零代码基础也可以快速构建应用。
微软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是数据类型,可以根据需求增加需要展示的字段列。
在这里插入图片描述
查询功能需要注意:

  1. 查询条件配的api属性接口地址跟页面初始化的接口initApi的接口是一样的,不用拼接属性参数之类的,参数自动往后端传,比如下图中的查询条件,在后端收到的参数就是keyword.
  2. 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的朋友可以一起交流啊!

在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐