前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

介绍

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


前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)


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 配置中,唯一的 顶级容器组件,是整个页面配置的入口组件。

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • Form 表单

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

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

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

  • FormItem 普通表单项

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

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • Options 选择器表单项

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

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

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • Array 数组输入框

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

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • Button 按钮

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

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • Checkbox 勾选框

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • City 城市选择器

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

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • 颜色选择器

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • Date 日期、时间、范围

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • DiffEditor 对比编辑器

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • File 文件上传

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

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • Formula 公式

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

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • Transfer 穿梭器

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

  • Tree 树形

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

CRUD 增删改查

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

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

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

可视化编辑器

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

后台管理界面

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

前端效率提升,Baidu开源低代码前端框架——amis(百度开源前端框架)

总结

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。