Mock21-接口数据管理实现

在最初的几篇讲页面实现的时候关于接口管理实现，只是在数据库造了些数据用于查询展示。其中用了antd的高级组件protable，本篇我们在使用高级系列组件中的 ProForm 抽屉（Drawer）弹窗的方式来快速实现接口增改操作。

关于ProFrom高级表单一段官方说明

https://procomponents.ant.design/components/form

与其配合还有一系列封装子组件 ProFormFields 表单项

https://procomponents.ant.design/components/field-set

回到功能本功能实现上

在 protable 通过 toolBarRender 增加自定义按钮

代码语言：javascript复制

toolBarRender={() => [
    <Button
        key="addInterface"
        icon={<PlusOutlined />}
        onClick={() => {
        setApiRecord({})
        setApiAction("ADD")
        setApiVisible(true)
        }}
        type="primary"
    >
        添加接口
    </Button>,
 ]}

在columns定义的操作列增加修改菜单

代码语言：javascript复制

render: (text, record) => (
        <Space>
          <a >规则配置</a>
          <a onClick={() => {
            setApiRecord(record)
            setApiAction("EDIT")
            setApiVisible(true)
          }}>修改接口</a>
        </Space>
      ),

这两个关键部分代码中都展示 setApiRecord,setApiAction,setApiVisible为标记和抽屉显隐控制。

因表单项很多，同样根据之前的学习的自定义Component实现一个自定义独立组件

截图只展示了表单部分代码，全部的实现代码直接参考本项目源码 chapter21 分支代码

前后端伪代码的逻辑

实现新增和修改的统一接口，保存数据通过是否有ID判断是insert还是update；
前端点击新增或修改做对应的动作标记和抽屉表单显示，其中如果是修改要将所在行数据放到定义的变量中，如果是新增则至为空；
抽屉表单中非修改属性要根据动作显示隐藏或不可编辑；
因ProForm和DrawerForm都有默认提交按钮，此处选择了后者，个人实现中根据设计规范可自行选择保留其一；
注意之前篇章中升级过antd，所以新的js接口统一放到servicesant-design-pro实现，不在放在page下；
DrawerForm 中 onFinish 实现前后端接口操作。
保存成功操作后要关闭抽屉，并通过上级refTable刷新列表

最终本篇实现的功能效果如GIF

本篇实现的代码已经在开源代码项目上创建chapter20分支，大家可以下载分支参考实现此部分代码。

数据管理表单后端接口数据

0 人点赞