對(duì)于中后臺(tái)產(chǎn)品的前端開(kāi)發(fā)來(lái)說(shuō)，最常見(jiàn)的場(chǎng)景無(wú)非是開(kāi)發(fā)一個(gè)表的 CURD 操作：

• Create:

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

• Update：

Update Table Set... Where...

• Retrieve:

Select ... From Table Where...

• Delete:

Delete From Table Where...

比如開(kāi)發(fā)一個(gè)用戶(hù)頁(yè)面，包含條件查詢(xún)、用戶(hù)新增、用戶(hù)更新、用戶(hù)刪除、用戶(hù)詳情功能。

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

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

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

Koala Form 是什么

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

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

特性概述：

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

Koala Form 架構(gòu)圖

Koala Form 的快速上手

可以用 Koala Form 快速實(shí)現(xiàn)如下用戶(hù)頁(yè)面：

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

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

項(xiàng)目近期規(guī)劃

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

加入 Koala Form

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

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