中后台前端苦 CURD 久矣,今将举 Koala Form


背景

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

  • Create:
    insert into Table(...) values(...);

  • Update:
    Update Table Set... Where...;

  • Retrieve:
    Select ... From Table Where...;

  • Delete:
    Delete From Table Where...;

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

常规的开发步骤如下:

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

 

被这个可爱的logo治愈了10086点

面对重复胶水代码,被苦很久的前端开发团队,在 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页面。 

项目团队编写了详细的产品文档供大家参考 ,为了让大家有更好的阅读体验,请移步快速上手指南 https://koala-form.mumblefe.cn/zh/guide/getting-started.html 了解(或者点击“阅读原文”跳转)。 

Get Started:https://koala-form.mumblefe.cn/

近期规划

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

  • 响应社区的反馈与支持等。

 加入我们

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

在此诚邀关注前端开发的你,参与到 Koala Form 项目中来,我们欢迎任何形式的贡献,有任何建议或意见可在 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

相關推薦

2022-08-15

Erupt  通用后台管理框架 Erupt 是一个低代码 全栈类 框架,它使用 Java 注解 动态构建页面,及增、删、改、查、权限控制等功能。 零前端代码、零 CURD、自动建表,仅需 一个类文件 + 简洁的注解配

2022-09-05

Erupt  通用后台管理框架 Erupt 是一个低代码 全栈类 框架,它使用 Java 注解 动态构建页面,及增、删、改、查、权限控制等功能。 零前端代码、零 CURD、自动建表,仅需 一个类文件 + 简洁的注解配

2023-02-08

商业使用,欢迎持续关注我们。 v4.3 更新内容 1、优化后台模板 2、新增公众号微信支付 3、优化广告插件 4、模板增加全局会员变量 5、模板增加多语言适配URL函数 6、修正 AdminComposer 7、优化获取广告函数返回值 8、修正fast curd

2022-11-13

,是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案,可用于快速搭建美观的 React 应用。 Semi Design v2.23.1 现已发布,此版本带来如下更新内容: 【Fix】 修复 Popover 中的 Transfer 在拖拽时导致 Popover 意

2024-05-26

,是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案,可用于快速搭建美观的 React 应用。 Semi Design v2.59.0 现已发布,此版本带来如下更新内容: 【Chore】 Form组件 FormApi setValue 类型定义更新,优化嵌套路

2023-04-29

,是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案,可用于快速搭建美观的 React 应用。 Semi Design v2.34.0 现已发布,此版本带来如下更新内容: 【Fix】 修复 Table SSR 时渲染不正确的问题 #1466 修复 F

2023-01-17

,是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案,可用于快速搭建美观的 React 应用。 Semi Design v2.27.1 现已发布,此版本带来如下更新内容: 【Fix】 修复Form Field 级别校验,使用 props.rules 时存在

2023-12-06

What's Changed fix: 事件参数 by @aringlai in #9 fix: disabled插件提前计算computed问题 by @aringlai in #10 fix: 插件merge无法覆盖问题 by @aringlai in #13 属性合并问题 by @aringlai in #14 fix: curd中befo

2022-05-10

,是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案,可用于快速搭建美观的 React 应用。 目前 Semi Design 发布了 v2.10.0 版本,此版本带来如下更新内容: 【Fix】 修复Form组件在Nextjs中使用时,x-form-id在

2023-03-01

目介绍 db3 network 是一款开源去中心化 firebase 实现 新增CURD TodoMVC DEMO 每个用户进入都会自动在浏览器创建一个私钥,然后写入数据都会通过签名来保证数据的拥有控制权 体验地址 demo代码地址 预览功能更新 支持L1到L2

2024-06-06

Simple Admin - Go 语言分布式后台管理系统 v1.4.4 更新 项目介绍 Simple Admin 是一个开箱即用的分布式微服务后端管理系统,基于 go-zero 开发,为开发中大型后台提供了丰富的功能,支持三端代码生成。 官方自带多种扩展,助力中小

2023-05-13

款基于 Laravel 和 Element Plus 二次开发而成后台管理系统。Laravel 社区也有许多非常优秀的后台管理系统,例如 Nova, 官方出品,当然是收费的,免费的有基于 Livewire 的 Filament,还有不得不说的 

2022-12-21

块化极速开发框架。模块市场拥有丰富的功能应用,支持后台一键快速安装,让开发者能快的实现业务功能开发。 系统完全开源,基于 Apache 2.0 开源协议。 功能特性 丰富的模块市场,后台一键快速安装 会员模块通用且完

2023-12-06

Simple Admin Go 语言分布式后台管理系统 v1.2.4 更新 项目介绍 Simple Admin 是一个开箱即用的分布式微服务后端管理系统,基于go-zero开发,为开发中大型后台提供了丰富的功能,支持三端代码生成。 官方自带多种扩展,助力中小企