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

前言

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

基础用法

1. 导入我们的业务组件

```
import { BTable } from 'bcomponents';
```

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

   @BTable.tableEffectHoc({
     url: '/api/table/list', //url 参数
     columns: columns // table columns 参数
   })
   class BasicTable extends React.Component {
     render() {
       return (
         <div style={{marginBottom: '20px'}}>
           基础 Table
         </div>
       );
     }
   }
   
   export default BasicTable;
   
   

3. 查看演示
   

完整的一套增删改查

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

   import { BTable } from 'bcomponents';
   
   class List extends React.Component {
   
     render() {
       return (
         <React.Fragment>
           <BTable
             columns={columns}
             {...this.props}
           />
         </React.Fragment>
       );
     }
   }
   
   export default List;
   

2. 写我们的页面模板，完成创建和查询的操作。我们这次用了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 (
         <React.Fragment>
           <Row justify='space-between' style={{ marginBottom: '20px' }}>
             <Col span={12}>
               <Search getData={getData} />
             </Col>
             <Col span={12} style={{textAlign: 'right'}}>
               <Create
                 url='/api/table'
                 getData={getData}
               >
                 {
                   ({getFieldDecorator}) => (
                     <React.Fragment>
                       <FormItem {...formItemLayout} label="名称">
                         {getFieldDecorator('name', {
                           initialValue: '',
                           validateFirst: true,
                           rules: [
                             formValid.require(),
                             formValid.name(),
                           ],
                         })(
                           <Input placeholder="请输入渠道" />
                         )}
                       </FormItem>
                     </React.Fragment>
                   )
                 }
               </Create>
             </Col>
           </Row>
         </React.Fragment>
       );
     }
   }
   
   export default BasicTable;
   

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

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

   <Update
     visible={visible}
     url={`/api/table/${updateData.id}`}
     onCancel={this.onUpdateCancel}
     getData={this.props.getData}
   >
     {
       ({getFieldDecorator}) => (
         <React.Fragment>
           <FormItem {...formItemLayout} label="名称">
             {getFieldDecorator('name', {
               initialValue: updateData.name,
               validateFirst: true,
               rules: [
                 formValid.require(),
                 formValid.name(),
               ],
             })(
               <Input placeholder="请输入渠道" />
             )}
           </FormItem>
         </React.Fragment>
       )
     }
   </Update>
   

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

4. 添加删除功能

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

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

5. 查看演示
   

关于

BTable文档地址

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

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

结束语

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