微众Koala Form开源了,中后台前端苦CURD久矣

350 阅读3分钟

背景

对于中后台产品的前端开发来说,最常见的场景无非是开发一个表的 CURD 操作:

  • Create: insert into Table(...) values(...);
  • Update:Update Table Set... Where...;
  • Retrieve: Select ... From Table Where...;
  • Delete: Delete From Table Where...;

比如开发一个用户页面,包含条件查询、用户新增、用户更新、用户删除、用户详情功能。

图片

常规的开发步骤如下:

图片

接下来又要新增一个角色页面,一样是 CURD 的功能,一样重复上面的步骤;最终发现两个页面除了字段和接口不同,大概有 80% 的胶水代码完全一致。

面对重复胶水代码,被苦很久的前端开发团队,在 2022 年推出了 Koala Form 解决方案来解决这些问题,又经过项目团队半年多的打磨,现在推出面向社区用户来共同使用。

Koala Form 是什么

Koala Form 是一个表单页面的低代码解决方案,以 Vue3 为基础,围绕中后台产品的表单场景进行抽象,帮助开发者进行配置化的开发。

对比于业内的其他产品的学习成本较高,需引多个包,包体积较大的痛点, Koala Form 提供了更强的 UI 库支持度、 维护性和复用性, 并且提供了极强的场景封装能力,使用和学习成本更低,降低开发的复杂度。

特性概述:

  • 高效:从 0 开发一个完整的表单页面也许需要你花一天或者几个小时,而 Koala From 也许仅需几分钟,你需要做的就配置字段的展示规则。
  • 简单:内置基础的表单场景,useScene, useFrom、useTable、useModal、usePager, 提供上下文 API 操作场景内容;
  • 灵活:场景可以自由组合,支持字段联动,字段和组件描述也支持 vue slot,可编写插件扩展功能。

图片
Koala Form 架构图

Koala Form 的快速上手

可以用 Koala Form 快速实现如下用户页面:

图片
图片

过程简述:创建 Vue3 项目后,安装 koala form 相关依赖 @koala-form/core@koala-form/fes-plugin 和 @fesjs/fes-design 组件库,在入口文件全局配置后,用 useCurd 即可创建用户 CURD 页面。
项目团队编写了详细的产品文档供大家参考 ,为了让大家有更好的阅读体验,请移步《快速上手指南》 koala-form.mumblefe.cn/zh/guide/ge… 了解(或者点击 “阅读原文” 跳转)。

图片

Get Started:koala-form.mumblefe.cn/

近期规划

  • 其他 UI 库的插件支持,比如 Ant Design vue (具体时间节点会根据社区用户的需求或者反馈来调整);
  • 响应社区的反馈与支持等。

我们已迈出了第一步,虽然目前不能更全面的实现某些功能,随着时间的推移,这部分功能一定会越发完善,希望这些可以帮助开发者们更好的进行开发。

在此诚邀关注前端开发的你,参与到 Koala Form 项目中来,我们欢迎任何形式的贡献,有任何建议或意见可在 GitHub/gitee 提 issue,期待你的到来。

图片

文档地址:koala-form.mumblefe.cn/

仓库地址

Demo 地址:
github.com/WeBankFinTe…