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

介紹

amis 是一個低代碼前端框架,它使用 JSON 配置來生成頁面,可以節(jié)省頁面開發(fā)工作量,極大提升開發(fā)前端頁面的效率。通過 JSON 配置就能生成各種后臺頁面,極大減少開發(fā)成本,甚至可以不需要了解前端。目前在百度廣泛用于內(nèi)部平臺的前端開發(fā),已有 100 部門使用,創(chuàng)建了 3w 頁面。


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


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 配置中,唯一的 頂級容器組件,是整個頁面配置的入口組件。

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

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

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

  • Form 表單

表單是 amis 中核心組件之一,主要作用是提交或者展示表單數(shù)據(jù)。

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

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

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

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

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

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

表單內(nèi)部具備非常多的常用的功能組件

  • FormItem 普通表單項

表單項 是組成一個表單的基本單位,它具有的一些特性會幫助我們更好地實現(xiàn)表單操作。

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

  • Options 選擇器表單項

選擇器表單項 是指那些(例如下拉選擇框)具有選擇器特性的表單項

它派生自 表單項,擁有表單項所有的特性。

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

  • Array 數(shù)組輸入框

普通表單項,其實就是 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 文件上傳

用來負責文件上傳,文件上傳成功后會返回文件地址,這個文件地址會作為這個表單項的值,整個表單提交的時候,其實提交的是文件地址,文件上傳已經(jīng)在這個控件中完成了。

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

  • Formula 公式

可以設(shè)置公式,將公式結(jié)果設(shè)置到指定表單項上

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

  • Transfer 穿梭器

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

  • Tree 樹形

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

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

CRUD 增刪改查

CRUD,即增刪改查組件,主要用來展現(xiàn)數(shù)據(jù)列表,并支持各類【增】【刪】【改】【查】等操作。最基本的用法是配置 數(shù)據(jù)源接口(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(百度開源前端框架)

總結(jié)

amis確實可以說是一個良心產(chǎn)品,特別是對于一些簡單的功能,基本上只要有api就能完全實現(xiàn)一個完整的系統(tǒng),組件豐富,樣式也很好看,對于前端不是很擅長的人員來說非常的友好,對于高手也能提升效率!本文只是簡單的概述,詳細的可以參考文檔和代碼!

相關(guān)新聞

聯(lián)系我們
聯(lián)系我們
公眾號
公眾號
在線咨詢
分享本頁
返回頂部