前端效率提升,Baidu開源低代碼前端框架——amis(百度開源前端框架)
介紹
amis 是一個低代碼前端框架,它使用 JSON 配置來生成頁面,可以節(jié)省頁面開發(fā)工作量,極大提升開發(fā)前端頁面的效率。通過 JSON 配置就能生成各種后臺頁面,極大減少開發(fā)成本,甚至可以不需要了解前端。目前在百度廣泛用于內(nèi)部平臺的前端開發(fā),已有 100 部門使用,創(chuàng)建了 3w 頁面。
Github和Gitee
https://github.com/baidu/amis
https://gitee.com/baidu/amis
相關(guān)工具及平臺
- 通過 amis 搭建自己的后臺系統(tǒng):
https://github.com/fex-team/amis-admin
- 可視化編輯器:
https://github.com/fex-team/amis-editor
組件介紹
關(guān)于概念部分,amis提供了詳細的文檔,我們來看一看它的組件,以下是簡單介紹以及截圖:
- Page 頁面
Page 組件是 amis 頁面 JSON 配置中,唯一的 頂級容器組件,是整個頁面配置的入口組件。
- Form 表單
表單是 amis 中核心組件之一,主要作用是提交或者展示表單數(shù)據(jù)。
表單內(nèi)部具備非常多的常用的功能組件
- FormItem 普通表單項
表單項 是組成一個表單的基本單位,它具有的一些特性會幫助我們更好地實現(xiàn)表單操作。
- Options 選擇器表單項
選擇器表單項 是指那些(例如下拉選擇框)具有選擇器特性的表單項
它派生自 表單項,擁有表單項所有的特性。
- Array 數(shù)組輸入框
普通表單項,其實就是 Combo 的一個 flat 用法。
- Button 按鈕
form中除了支持 行為按鈕以外,還支持一些特定的按鈕。
- Checkbox 勾選框
- City 城市選擇器
城市選擇器,可用于讓用戶輸入城市。
- 顏色選擇器
- Date 日期、時間、范圍
- DiffEditor 對比編輯器
- File 文件上傳
用來負責(zé)文件上傳,文件上傳成功后會返回文件地址,這個文件地址會作為這個表單項的值,整個表單提交的時候,其實提交的是文件地址,文件上傳已經(jīng)在這個控件中完成了。
- Formula 公式
可以設(shè)置公式,將公式結(jié)果設(shè)置到指定表單項上
- Transfer 穿梭器
- Tree 樹形
CRUD 增刪改查
CRUD,即增刪改查組件,主要用來展現(xiàn)數(shù)據(jù)列表,并支持各類【增】【刪】【改】【查】等操作。最基本的用法是配置 數(shù)據(jù)源接口(api) 以及 展示列(columns)
。。。amis的組件過于豐富,本文不再詳細介紹,以上只是部分組件的截圖
可視化編輯器
后臺管理界面
總結(jié)
amis確實可以說是一個良心產(chǎn)品,特別是對于一些簡單的功能,基本上只要有api就能完全實現(xiàn)一個完整的系統(tǒng),組件豐富,樣式也很好看,對于前端不是很擅長的人員來說非常的友好,對于高手也能提升效率!本文只是簡單的概述,詳細的可以參考文檔和代碼!