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.SearchBTabLe.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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章