解放双手!推荐一款阿里开源的低代码工具,YYDS!
之前分享過一些低代碼相關的文章,發現大家還是比較感興趣的。之前在我印象中低代碼就是通過圖形化界面來生成代碼而已,其實真正的低代碼不僅要負責生成代碼,還要負責代碼的維護,把它當做一站式開發平臺也不為過!最近體驗了一把阿里開源的低代碼工具LowCodeEngine,確實是一款面向企業級的低代碼解決方案,推薦給大家!
LowCodeEngine簡介
LowCodeEngine是阿里開源的一套面向擴展設計的企業級低代碼技術體系,目前在在Github上已有4.7K+Star。這個項目大概是今年2月中旬開源的,兩個月不到收獲這么多Star,確實非常厲害!
LowCodeEngine主要具有如下特性:
提煉自企業級低代碼平臺的低代碼引擎,奉行高度可擴展、最小內核、最強生態的設計理念;
部署簡單,基本上就是開箱即用,擁有完善的物料體系、功能強大的設置器、豐富的插件等;
可視化編輯器具有完善的工具鏈,支持物料體系、設置器、插件等生態元素;
強大的擴展能力,已支撐近 100 個各種垂直類低代碼平臺;
使用 TypeScript 開發,能生成基于React的前端代碼。
下面是LowCodeEngine使用過程中的一張效果圖,功能還是很強大的!
搭建低代碼平臺
接下來我們將使用LowCodeEngine搭建一個低代碼開發平臺,僅需5分鐘,可以說是開箱即用!
首先我們需要想下載LowCodeEngine編輯器的示例代碼,下載地址:https://github.com/alibaba/lowcode-demo
下載成功后解壓到指定目錄,安裝此項目需要使用Node.js和npm,確保已經安裝完畢,由于依賴中有些npm源無法訪問,這里推薦使用cnpm來安裝,先使用如下命令安裝cnpm;
cnpm安裝成功后,進入解壓目錄使用如下命令安裝依賴;
依賴安裝完成后,使用npm start命令啟動項目;
項目運行成功后將運行在5556端口上,訪問地址:http://localhost:5556
使用低代碼平臺
之前在我的開源項目mall中有個品牌管理功能,接下來我們將使用LowCodeEngine來實現下它,看看低代碼開發有何神奇之處!
目標效果
mall項目中的品牌管理功能效果如下,這里使用低代碼簡單實現下品牌列表功能。
組件庫
首先我們從組件庫中選擇查詢篩選組件,通過拖拽的形式插入編輯區中;
然后選中查詢篩選組件,通過右側的設置器進行設置;
可以點擊組件左側的編輯按鈕對組件進行詳細設置,比如說組件外觀和輸入提示等;
接下來再拖拽一個高級表格組件到編輯器中去;
同樣選中高級表格組件可以對表格進行設置,我們可以通過數據列來設置需要顯示的數據。
數據源
由于表格中的數據需要訪問接口來獲取,這里我們可以通過數據源功能來實現,這里我們調用演示環境的API,填入請求參數即可,值得注意的是由于數據列表在data.list屬性中,我們需要定制下請求成功的處理函數;
接下來選中高級表格組件,修改表格數據源,選擇表達式輸入,填入我們之前設置的數據源ID即可;
然后修改數據列信息,將每個數據列數據字段修改為JSON數據中對應的屬性即可。
預覽及出碼
如果想查看搭建的頁面效果的話,點擊右上角的預覽按鈕即可;
下面是由低代碼生成的頁面預覽效果;
如果你想獲取工具生成的代碼的話,點擊右上角的出碼按鈕即可,支持直接下載。
其他功能
如果你想自定義一些函數的話,可以通過源碼面板進行自定義;
通過大綱視圖我們可以查看整個界面的結構。
總結
今天體驗了一把阿里開源的低代碼開發工具,功能確實很強大。但是低代碼并不意味著可以不寫代碼了,想用好低代碼工具還得熟悉工具生成的代碼。LowCodeEngine目前僅支持生成React的前端代碼,所以想要實現更為復雜的業務系統,還得熟悉React。如果有小伙伴想更深入了解低代碼的概念,推薦看下這篇文章《阿里低代碼引擎和生態建設實戰及思考》 。
參考資料
項目地址:https://github.com/alibaba/lowcode-engine
項目官網:https://lowcode-engine.cn/
操作指南:https://www.yuque.com/lce/usage
線程安全問題的 3 種解決方案!
如何判斷線程池已經執行完所有任務了?
面試官:AtomicInteger是如何保證線程安全?
總結
以上是生活随笔為你收集整理的解放双手!推荐一款阿里开源的低代码工具,YYDS!的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 数组中的reverse_数组revers
- 下一篇: SpringBoot 优雅的参数效验!