03 基于umi搭建React快速开发框架(封装列表增删改查)

摘要：前言大家在做业务系统的时候，很多地方都是列表增删改查，做这些功能占据了大家很长时间，如果我们有类似的业务，半个小时就能做出一套那是不是很爽呢。我们这套框架对此做了下封装，适合的小伙伴也可以借鉴封装到自己的框架当中去。

大家在做业务系统的时候，很多地方都是列表增删改查，做这些功能占据了大家很长时间，如果我们有类似的业务，半个小时就能做出一套那是不是很爽呢。
这样我们就可以有更多的时间学习一些新的东西。我们这套框架对此做了下封装，适合的小伙伴也可以借鉴封装到自己的框架当中去。核心思想用的React
高阶组件解耦，接下来我们看看怎么用。

导入我们的业务组件

import { BTable } from "bcomponents";

写好我们的页面模板。调用BTable的高阶组件BTable.tableEffectHoc，传入url和columns参数就可以了，是不是很简单

@BTable.tableEffectHoc({
  url: "/api/table/list", //url 参数
  columns: columns // table columns 参数
})
class BasicTable extends React.Component {
  render() {
    return (
      

        基础 Table
      
    );
  }
}

export default BasicTable;

查看演示

创建list.js, 来配置和增强我们的table,注意我们需要使用Btable。

import { BTable } from "bcomponents";

class List extends React.Component {

  render() {
    return (
      
        
      
    );
  }
}

export default List;

写我们的页面模板，完成创建和查询的操作。我们这次用了BTable.Search和BTabLe.Create来快速完成我们的查询和创建

import { BTable } from "bcomponents";
import { Row, Col, Input, Form } from "antd";
import ListTable from "./_components/list";

const Search = BTable.Search;
const Create = BTable.Create;
const FormItem = Form.Item;

@BTable.tableEffectHoc({
  url: "/api/table/list",
  BTable: ListTable,
})
class BasicTable extends React.Component {

  render() {
    const {getData} = this.props;
    return (
      
        
          
            
          
          
            
              {
                ({getFieldDecorator}) => (
                  
                    
                      {getFieldDecorator("name", {
                        initialValue: "",
                        validateFirst: true,
                        rules: [
                          formValid.require(),
                          formValid.name(),
                        ],
                      })(
                        
                      )}
                    
                  
                )
              }
            
          
        
      
    );
  }
}

export default BasicTable;

这里的`BTable.Search`很简单，我们只需传入getData属性方法就可以完成查询操作。
创建其实也很简单，配置`BTable.Create`的url和getData参数。然后只需在组件内写我们的Form表单项就可以了，是不是很简单。
至此。我们的创建和查询就完成了

添加编辑功能。编辑和删除的操作在列表上，所以我们需要在list.js当中去完成.添加BTable.Update模板

  {
    ({getFieldDecorator}) => (
      
        
          {getFieldDecorator("name", {
            initialValue: updateData.name,
            validateFirst: true,
            rules: [
              formValid.require(),
              formValid.name(),
            ],
          })(
            
          )}
        
      
    )
  }

配置项也很简单，配置url，visible和getData就可以了，接着完善我们的FormItem就可以了。是不是很简单

添加删除功能

BTable.Del({
  url: `/api/table/${data.id}`,
  getData,
})

这是最简单的了，传一个url和getData就完成了。

查看演示

BTable文档地址

线上演示地址：http://39.105.188.65:8080/system/channel

目前我正在开发一个头条的开源项目。可以用此地址查看，这个是用的真实的数据

表格的增删改查封装已经完成, 代码已放到github上，大家可以自行查看umi-react。
如果觉得不错，请start一下
我建了一个QQ群，大家加进来，可以一起交流。群号 787846148