Koala Form

Koala Form是什么

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

  • Create: 创建一条新的记录

  • Update: 更新一条新的记录

  • Retrieve: 读取一条记录

  • Delete: 删除一条记录

举个🌰

需要实现一个用户管理页面，包含条件查询、用户新增、用户更新、用户删除、用户详情功能。开发步骤如下：

  • Step1: 编写一个查询Form用于填写查询条件，点击查询按钮后，执行接口调用。

  • Step2: 编写一个Table用于展示数据，需要定义哪些字段展示，并把格式化展示查询结果。

  • Step3: 编写一个用户新增Form用于录入用户信息，点击新增后执行接口调用。

  • Step4: 编写一个用户更新Form用于更改用户信息，点击更新后执行接口调用。

  • Step5: 编写一个用户详情信息展示的Form，执行查询详情接口或从Table中获取用户数据

  • Step6: 编写一个删除用户确认提示，点击确定后执行接口调用。

  • Step7: 编写CURD的操作按钮，并编写按钮打开对应的的表单。

接下来又要新增一个角色管理页面，一样是CURD的功能，重复上面的步骤就会发现，两个页面除了字段和接口不同，大概有80%的其他逻辑基本一样，但还是少不了那些胶水代码。

而 Koala Form 可以帮你减少这80%的胶水代码。

Koala Form 是一个表单页面的低代码解决方案。以Vue3为基础，围绕后台产品的表单场景进行封装，使得开发者仅需关注表单页面的字段和接口。

它主要具备以下特点：

  • 高效的： 从零开发一个完整的表单页面也许需要你花一天或者几个小时，而Koala From也许仅需几分钟，你需要做的就配置字段的展示规则。

  • 简单的： 内置基础的表单场景，useScene, useFrom、useTable、useModal、usePager, 根据传入的字段规则解析，返回场景上下文用于操作场景内容，render函数更是减少了你对UI的关注。

  • 灵活的： 丰富的场景可以自由组合；所有的字段也支持vueslot; 可扩展自己的插件，render自己的UI。

基础概念

  • 字段描述

    字段常见于表单和列表中，因此用Field对字段单独描述，关键属性：

    • 字段名
    • 字段描述
    • 字段规则
    • 字段组件

  • 组件描述

    组件用ComponentDesc描述，关键属性：

    • 组件名
    • 组件事件
    • 组件属性
    • children

    children是用于实现多个组件的并列和嵌套的组件树。

  • 场景

    场景是对重复功能的聚合描述，将重复的逻辑隐藏在场景里，提供一些便利的api进行功能操作。

    比如useForm是负责表单的功能，提供validate、resetFields等api；

    场景定义配置（即SceneConfig），场景执行之后返回场景上下文（即SceneContext）。

  • 插件

    插件是运行在场景里面，插件可扩展场景的配置和上下文，定制场景的功能。

    插件之间可以通过emit/on发布订阅的模式进行通信。

  • handler函数

    handler函数是将一系列操作分解成N个单项操作，handler就是单项操作。

    使用时选择合适的handler，并灵活插入一些自定义的操作，组合成一些列完整的逻辑。

    比如按查询列表数据可以分解成: 取表单数据 -> 取pager数据 -> 合并处理（自定义） -> 提交获取数据 -> 设置列表数据 -> 设置分页数据

  • 预设函数

    预设函数是获取一些固定的handler组合和场景描述。能快速的辅助场景的配置。

    比如查询表单，提供预设函数返回固定的查询按钮、重置按钮。