之前分享過一些低程式碼相關的文章，發現大家還是比較感興趣的。之前在我印象中低程式碼就是通過圖形化介面來生成程式碼而已，其實真正的低程式碼不僅要負責生成程式碼，還要負責程式碼的維護，把它當做一站式開發平臺也不為過！最近體驗了一把阿里開源的低程式碼工具LowCodeEngine，確實是一款面向企業級的低程式碼解決方案，推薦給大家！SpringBoot實戰電商專案mall（50k+star）地址：https://github.com/macrozheng/mall
LowCodeEngine簡介
LowCodeEngine是阿里開源的一套面向擴充套件設計的企業級低程式碼技術體系，目前在在Github上已有4.7K+Star。這個專案大概是今年2月中旬開源的，兩個月不到收穫這麼多Star，確實非常厲害！
LowCodeEngine主要具有如下特性：
- 提煉自企業級低程式碼平臺的低程式碼引擎，奉行高度可擴充套件、最小核心、最強生態的設計理念；
- 部署簡單，基本上就是開箱即用，擁有完善的物料體系、功能強大的設定器、豐富的外掛等；
- 視覺化編輯器具有完善的工具鏈，支援物料體系、設定器、外掛等生態元素；
- 強大的擴充套件能力，已支撐近 100 個各種垂直類低程式碼平臺；
- 使用 TypeScript 開發，能生成基於React的前端程式碼。
下面是LowCodeEngine使用過程中的一張效果圖，功能還是很強大的！
搭建低程式碼平臺
接下來我們將使用LowCodeEngine搭建一個低程式碼開發平臺，僅需5分鐘，可以說是開箱即用！
- 首先我們需要想下載LowCodeEngine編輯器的示例程式碼，下載地址：https://github.com/alibaba/lo...
- 下載成功後解壓到指定目錄，安裝此專案需要使用
Node.js和npm，確保已經安裝完畢，由於依賴中有些npm源無法訪問，這裡推薦使用cnpm來安裝，先使用如下命令安裝cnpm；
npm install -g cnpm --registry=https://registry.npmmirror.comcnpm安裝成功後，進入解壓目錄使用如下命令安裝依賴；
cnpm install- 依賴安裝完成後，使用
npm start命令啟動專案；
- 專案執行成功後將執行在
5556埠上，訪問地址：http://localhost:5556
使用低程式碼平臺
之前在我的開源專案mall中有個品牌管理功能，接下來我們將使用LowCodeEngine來實現下它，看看低程式碼開發有何神奇之處！
目標效果
mall專案中的品牌管理功能效果如下，這裡使用低程式碼簡單實現下品牌列表功能。
元件庫
- 首先我們從
元件庫中選擇查詢篩選元件，通過拖拽的形式插入編輯區中；
- 然後選中
查詢篩選元件，通過右側的設定器進行設定；
- 可以點選元件左側的
編輯按鈕對元件進行詳細設定，比如說元件外觀和輸入提示等；
- 接下來再拖拽一個
高階表格元件到編輯器中去；
- 同樣選中
高階表格元件可以對錶格進行設定，我們可以通過資料列來設定需要顯示的資料。
資料來源
- 由於表格中的資料需要訪問介面來獲取，這裡我們可以通過
資料來源功能來實現，這裡我們呼叫演示環境的API，填入請求引數即可，值得注意的是由於資料列表在data.list屬性中，我們需要定製下請求成功的處理函式；
- 接下來選中
高階表格元件，修改表格資料來源，選擇表示式輸入，填入我們之前設定的資料來源ID即可；
- 然後修改
資料列資訊，將每個資料列資料欄位修改為JSON資料中對應的屬性即可。
預覽及出碼
- 如果想檢視搭建的頁面效果的話，點選右上角的
預覽按鈕即可；
- 下面是由低程式碼生成的頁面預覽效果；
- 如果你想獲取工具生成的程式碼的話，點選右上角的
出碼按鈕即可，支援直接下載。
其他功能
- 如果你想自定義一些函式的話，可以通過
原始碼皮膚進行自定義；
- 通過
大綱檢視我們可以檢視整個介面的結構。
總結
今天體驗了一把阿里開源的低程式碼開發工具，功能確實很強大。但是低程式碼並不意味著可以不寫程式碼了，想用好低程式碼工具還得熟悉工具生成的程式碼。LowCodeEngine目前僅支援生成React的前端程式碼，所以想要實現更為複雜的業務系統，還得熟悉React。如果有小夥伴想更深入瞭解低程式碼的概念，推薦看下這篇文章《阿里低程式碼引擎和生態建設實戰及思考》 。