前言

管理后台应用有两个最主要的功能：

  • 数据录入 ---- 表单 (Form)
  • 数据展示 ---- 表格 (Table)

业务系统必不可少的功能模块，并且占据开发量的 80% 以上。

如何可以快速的，高质量完成对应的业务需求呢？

业务与 UI 彻底分离

术业有专攻，专注才能把事情做完美，减少出错的概率。所以我认为将业务与 UI 彻底分离，会是更好的选择。

例如我们实现以下表单：

一般的做法是，由开发引用 UI 库对应组件然后渲染：

import { Form, Input, Selector } from 'ui'const Page = () => {  return (    <Form>      <Input {...props} onChange={handleChange} />      <Selector {...props} onChange={handleChange} />      // ...    </Form>  )}

这样问题不大，但是如果我们写的页面开始多了，维护起来就很麻烦了，如果由 20 个页面，其中某个功能需要调整，需要改 20 遍，组件化并不能改变代码维护的问题。

所以 ukelli-ui 打造了 聚合表单 的组件，只需要描述业务行为，完全与 UI 分离：

完整定义请参考

import FormLayout, { FormLayoutProps } from 'ukelli-ui/core/form-generator/form-layout'const formOptions: FormLayoutProps['formOptions'] = [  '日期',  {    refs: ['startDate', 'endDate'],    type: 'datetimeRange',    enableTime: true,    title: '日期1',    tips: '123',    defaultValue: []  },  {    refs: ['startDate2', 'endDate2'],    type: 'datetimeRange',    title: '日期2',    tips: '123',    defaultValue: []  },  '选择器',  ...];ReactDOM.render(  <FormLayout formOptions={formOptions}    onChange={(values, changeRef, changeVal) => {      // handleChange    }} />,  document.querySelector('#root'))

干净利落，没有 UI 信息，专注于业务描述，UI 就交给 FormLayout 聚合表单统一处理，最后组件会返回一个统一数据结构的 values，方便快捷。

这里可以体验聚合表单

  • https://ui.ukelli.com/FormGen...

  • https://admin.ukelli.com/

    • Account: admin
    • Password: 123

当然还可以用 HOC 做更进一步的封装，关于 HOC 部分会在其他篇幅讲解。

参考

  • Form聚合表单源码
  • Form聚合表单 demo
  • uke 管理后台