+-
前端效率提升,Baidu开源低代码前端框架——amis

介绍

amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以节省页面开发工作量,极大提升开发前端页面的效率。通过 JSON 配置就能生成各种后台页面,极大减少开发成本,甚至可以不需要了解前端。目前在百度广泛用于内部平台的前端开发,已有 100+ 部门使用,创建了 3w+ 页面。


...

github和Gitee

https://github.com/baidu/amis

https://gitee.com/baidu/amis

相关工具及平台

通过 amis 搭建自己的后台系统:

https://github.com/fex-team/amis-admin

可视化编辑器:

https://github.com/fex-team/amis-editor

组件介绍

关于概念部分,amis提供了详细的文档,我们来看一看它的组件,以下是简单介绍以及截图:

Page 页面

Page 组件是 amis 页面 JSON 配置中,唯一的 顶级容器组件,是整个页面配置的入口组件。


...


...


...


Form 表单

表单是 amis 中核心组件之一,主要作用是提交或者展示表单数据。


...


...


...


...


...


...

表单内部具备非常多的常用的功能组件

FormItem 普通表单项

表单项 是组成一个表单的基本单位,它具有的一些特性会帮助我们更好地实现表单操作。


... Options 选择器表单项

选择器表单项 是指那些(例如下拉选择框)具有选择器特性的表单项

它派生自 表单项,拥有表单项所有的特性。


...
Array 数组输入框

普通表单项,其实就是 Combo 的一个 flat 用法。


... Button 按钮

form中除了支持 行为按钮以外,还支持一些特定的按钮。


... Checkbox 勾选框


...
City 城市选择器

城市选择器,可用于让用户输入城市。


... 颜色选择器


... Date 日期、时间、范围


...


...


... DiffEditor 对比编辑器


... File 文件上传

用来负责文件上传,文件上传成功后会返回文件地址,这个文件地址会作为这个表单项的值,整个表单提交的时候,其实提交的是文件地址,文件上传已经在这个控件中完成了。


... Formula 公式

可以设置公式,将公式结果设置到指定表单项上


... Transfer 穿梭器


... Tree 树形


...


...

CRUD 增删改查

CRUD,即增删改查组件,主要用来展现数据列表,并支持各类【增】【删】【改】【查】等操作。最基本的用法是配置 数据源接口(api) 以及 展示列(columns)


...

。。。amis的组件过于丰富,本文不再详细介绍,以上只是部分组件的截图

可视化编辑器


...


...


...


...


...


...


...

后台管理界面


...


...


...

总结

amis确实可以说是一个良心产品,特别是对于一些简单的功能,基本上只要有api就能完全实现一个完整的系统,组件丰富,样式也很好看,对于前端不是很擅长的人员来说非常的友好,对于高手也能提升效率!本文只是简单的概述,详细的可以参考文档和代码!