對于中后臺產(chǎn)品的前端開發(fā)來說，最常見的場景無非是開發(fā)一個表的 CURD 操作：

• Create:

insert into Table(...) values(...)

• Update：

Update Table Set... Where...

• Retrieve:

Select ... From Table Where...

• Delete:

Delete From Table Where...

比如開發(fā)一個用戶頁面，包含條件查詢、用戶新增、用戶更新、用戶刪除、用戶詳情功能。

常規(guī)的開發(fā)步驟如下：

接下來又要新增一個角色頁面，一樣是 CURD 的功能，一樣重復(fù)上面的步驟；最終發(fā)現(xiàn)兩個頁面除了字段和接口不同，大概有 80% 的膠水代碼完全一致。

面對重復(fù)膠水代碼，被苦很久的微眾開源前端開發(fā)團隊，在 2022 年推出了 Koala Form 解決方案來解決這些問題，又經(jīng)過項目團隊半年多的打磨，現(xiàn)在推出面向社區(qū)用戶來共同使用。

Koala Form 是什么

Koala Form 是一個表單頁面的低代碼解決方案，以 vue3 為基礎(chǔ)，圍繞中后臺產(chǎn)品的表單場景進(jìn)行抽象，幫助開發(fā)者進(jìn)行配置化的開發(fā)。

對比于業(yè)內(nèi)的其他產(chǎn)品的學(xué)習(xí)成本較高，需引多個包，包體積較大的痛點， Koala Form 提供了更強的 UI 庫支持度、 維護(hù)性和復(fù)用性， 并且提供了極強的場景封裝能力，使用和學(xué)習(xí)成本更低，降低開發(fā)的復(fù)雜度。

特性概述：

• 高效： 從 0 開發(fā)一個完整的表單頁面也許需要你花一天或者幾個小時，而 Koala From 也許僅需幾分鐘，你需要做的就配置字段的展示規(guī)則；
• 簡單： 內(nèi)置基礎(chǔ)的表單場景，useScene、useFrom、useTable、useModal、usePager，提供上下文 API 操作場景內(nèi)容；
• 靈活： 場景可以自由組合，支持字段聯(lián)動，字段和組件描述也支持 vue slot，可編寫插件擴展功能。

Koala Form 架構(gòu)圖

Koala Form 的快速上手

可以用 Koala Form 快速實現(xiàn)如下用戶頁面：

過程簡述： 創(chuàng)建 Vue3 項目后，安裝 koala form 相關(guān)依賴 @koala-form/core、@koala-form/fes-plugin和@fesjs/fes-design 組件庫，在入口文件全局配置后，用useCurd即可創(chuàng)建用戶CURD頁面。

項目團隊編寫了詳細(xì)的產(chǎn)品文檔供大家參考 ，為了讓大家有更好的閱讀體驗，請移步《快速上手指南》： https://koala-form.mumblefe.cn/zh/gUIde/getting-started.html 了解。

項目近期規(guī)劃

• 其他 UI 庫的插件支持，比如 Ant Design vue （具體時間節(jié)點會根據(jù)社區(qū)用戶的需求或者反饋來調(diào)整）；
• 響應(yīng)社區(qū)的反饋與支持等。

加入 Koala Form

歡迎關(guān)注前端開發(fā)的你，參與到 Koala Form 項目中來，Koala Form 歡迎任何形式的貢獻(xiàn)，有任何建議或意見可在 GitHub / Gitee /微信群中提 issue，期待你的到來。

• 文檔地址
  https://koala-form.mumblefe.cn/
• 倉庫地址
  https://github.com/WeBankFinTech/KoalaForm
• https://gitee.com/WeBankOS/KoalaForm
• Demo 地址https://github.com/WeBankFinTech/KoalaForm/tree/main/packages/demo-with-fes
• 社群二維碼過期可聯(lián)絡(luò)項目負(fù)責(zé)人 aring（ 微信 ID : aring_93）、（郵件：aringlai@163.com）