解放雙手！推薦一款阿里開源的低代碼工具，YYDS！

大家好，我是程序汪?有粉絲想要我推薦低代碼工具，目前環(huán)境很卷，企業(yè)也是想盡辦法節(jié)省開支，用低代碼平臺后 招個后端就搞定前后端所有的活，哈哈哈，很多公司目前已經在這么干了。

印象中低代碼就是通過圖形化界面來生成代碼而已，其實真正的低代碼不僅要負責生成代碼，還要負責代碼的維護，把它當做一站式開發(fā)平臺也不為過！最近體驗了一把阿里開源的低代碼工具LowCodeEngine，確實是一款面向企業(yè)級的低代碼解決方案，推薦給大家！

LowCodeEngine簡介

LowCodeEngine是阿里開源的一套面向擴展設計的企業(yè)級低代碼技術體系，目前在在Github上已有4.7K+Star。這個項目大概是今年2月中旬開源的，兩個月不到收獲這么多Star，確實非常厲害！

LowCodeEngine主要具有如下特性：

• 提煉自企業(yè)級低代碼平臺的低代碼引擎，奉行高度可擴展、最小內核、最強生態(tài)的設計理念；
• 部署簡單，基本上就是開箱即用，擁有完善的物料體系、功能強大的設置器、豐富的插件等；
• 可視化編輯器具有完善的工具鏈，支持物料體系、設置器、插件等生態(tài)元素；
• 強大的擴展能力，已支撐近 100 個各種垂直類低代碼平臺；
• 使用 TypeScript 開發(fā)，能生成基于React的前端代碼。

下面是LowCodeEngine使用過程中的一張效果圖，功能還是很強大的！

搭建低代碼平臺

接下來我們將使用LowCodeEngine搭建一個低代碼開發(fā)平臺，僅需5分鐘，可以說是開箱即用！

• 首先我們需要想下載LowCodeEngine編輯器的示例代碼，下載地址：https://github.com/alibaba/lowcode-demo

• 下載成功后解壓到指定目錄，安裝此項目需要使用Node.js和npm，確保已經安裝完畢，由于依賴中有些npm源無法訪問，這里推薦使用cnpm來安裝，先使用如下命令安裝cnpm；

npm?install?-g?cnpm?--registry=https://registry.npmmirror.com

• cnpm安裝成功后，進入解壓目錄使用如下命令安裝依賴；

cnpm?install

• 依賴安裝完成后，使用npm start命令啟動項目；

• 項目運行成功后將運行在5556端口上，訪問地址：http://localhost:5556

使用低代碼平臺

之前在我的開源項目mall中有個品牌管理功能，接下來我們將使用LowCodeEngine來實現下它，看看低代碼開發(fā)有何神奇之處！

目標效果

mall項目中的品牌管理功能效果如下，這里使用低代碼簡單實現下品牌列表功能。

組件庫

• 首先我們從組件庫中選擇查詢篩選組件，通過拖拽的形式插入編輯區(qū)中；

• 然后選中查詢篩選組件，通過右側的設置器進行設置；

• 可以點擊組件左側的編輯按鈕對組件進行詳細設置，比如說組件外觀和輸入提示等；

• 接下來再拖拽一個高級表格組件到編輯器中去；

• 同樣選中高級表格組件可以對表格進行設置，我們可以通過數據列來設置需要顯示的數據。

數據源

• 由于表格中的數據需要訪問接口來獲取，這里我們可以通過數據源功能來實現，這里我們調用演示環(huán)境的API，填入請求參數即可，值得注意的是由于數據列表在data.list屬性中，我們需要定制下請求成功的處理函數；

• 接下來選中高級表格組件，修改表格數據源，選擇表達式輸入，填入我們之前設置的數據源ID即可；

• 然后修改數據列信息，將每個數據列數據字段修改為JSON數據中對應的屬性即可。

預覽及出碼

• 如果想查看搭建的頁面效果的話，點擊右上角的預覽按鈕即可；

• 下面是由低代碼生成的頁面預覽效果；

• 如果你想獲取工具生成的代碼的話，點擊右上角的出碼按鈕即可，支持直接下載。

其他功能

• 如果你想自定義一些函數的話，可以通過源碼面板進行自定義；

• 通過大綱視圖我們可以查看整個界面的結構。

總結

今天體驗了一把阿里開源的低代碼開發(fā)工具，功能確實很強大。但是低代碼并不意味著可以不寫代碼了，想用好低代碼工具還得熟悉工具生成的代碼。LowCodeEngine目前僅支持生成React的前端代碼，所以想要實現更為復雜的業(yè)務系統(tǒng)，還得熟悉React。

參考資料

• 項目地址：https://github.com/alibaba/lowcode-engine
• 項目官網：https://lowcode-engine.cn/
• 操作指南：https://www.yuque.com/lce/usage