前端效率提升,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就能完全實現一個完整的系統,組件豐富,樣式也很好看,對于前端不是很擅長的人員來說非常的友好,對于高手也能提升效率!本文只是簡單的概述,詳細的可以參考文檔和代碼!

版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

(0)
上一篇 2024年1月11日 上午11:13
下一篇 2024年1月12日 上午9:05

相關推薦

欧美日韩在线视频免费完整| 成人免费无码大片a毛片软件 | 免费动漫人物扑克软件网站| 男女猛烈xx00免费视频试看| 公和我在厨房好爽中文字幕 | 国产乱子伦精品无码码专区| 美女扒开尿口让男人桶免费网站| 国产1区2区在线观看| 精品乱码一区内射人妻无码| 六月丁香色婷婷| 波多野结衣mxgs-983| 亚洲精品美女久久7777777| 欧美人善交videosg| 亚洲人成人77777网站| 日本肉体xxxx裸交| 久久久久国产午夜| 少妇饥渴XXHD麻豆XXHD骆驼 | 国产草草影院ccyycom| 2021日韩麻豆| 国产女人的高潮国语对白| 美女裸体a级毛片| 动漫人物美女被吸乳羞羞动漫| 激情偷乱人伦小说视频在线| 亚洲第一成年网站大全亚洲| 最近中文字幕高清中文字幕电影二 | 免费午夜爽爽爽WWW视频十八禁 | 在线观看网站黄| 91精品综合久久久久久五月天| 国产日产精品_国产精品毛片| 色婷婷久久综合中文久久一本` | 丰满老熟妇好大bbbbb| 天天爱天天干天天| 97色精品视频在线观看| 国产极品美女高潮抽搐免费网站| 色婷婷综合久久久久中文一区二区| 四虎国产精品永久在线看| 熟妇人妻中文字幕| 亚洲日本中文字幕天堂网| 日韩亚洲av无码一区二区三区| 久久久久久久99精品免费观看| 天天综合网久久|