03 基於umi搭建React快速開發框架(封裝列表增刪改查)

摘要： 前言 大家在做業務系統的時候，很多地方都是列表增刪改查，做這些功能佔據了大家很長時間，如果我們有類似的業務，半個小時就能做出一套那是不是很爽呢。 這樣我們就可以有更多的時間學習一些新的東西。我們這套框架對此做了下封裝，適合的小夥伴也可以借鑑封裝到自己的框架當中去。核心思想用的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. 檢視演示

   

關於

ofollow,noindex" target="_blank">BTable文件地址

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

目前我正在開發一個頭條的開源專案。可以用此地址檢視，這個是用的真實的資料

結束語

表格的增刪改查封裝已經完成, 程式碼已放到github上，大家可以自行檢視 umi-react 。如果覺得不錯，請 start 一下

我建了一個QQ群，大家加進來，可以一起交流。群號787846148