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

前言

你們在作業務系統的時候,不少地方都是列表增刪改查,作這些功能佔據了你們很長時間,若是咱們有相似的業務,半個小時就能作出一套那是否是很爽呢。
這樣咱們就能夠有更多的時間學習一些新的東西。咱們這套框架對此作了下封裝,適合的小夥伴也能夠借鑑封裝到本身的框架當中去。核心思想用的React
高階組件解耦,接下來咱們看看怎麼用。react

基礎用法

  1. 導入咱們的業務組件git

    import { BTable } from 'bcomponents';
  2. 寫好咱們的頁面模板。調用BTable的高階組件BTable.tableEffectHoc,傳入url和columns參數就能夠了,是否是很簡單github

    @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。api

    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來快速完成咱們的查詢和建立antd

    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文檔地址ui

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

目前我正在開發一個頭條的開源項目。能夠用此地址查看,這個是用的真實的數據url

結束語

表格的增刪改查封裝已經完成, 代碼已放到github上,你們能夠自行查看umi-react
若是以爲不錯,請start一下 我建了一個QQ羣,你們加進來,能夠一塊兒交流。羣號 787846148

相關文章
相關標籤/搜索