前言

大家在做业务系统的时候,很多地方都是列表增删改查,做这些功能占据了大家很长时间,如果我们有类似的业务,半个小时就能做出一套那是不是很爽呢。

这样我们就可以有更多的时间学习一些新的东西。我们这套框架对此做了下封装,适合的小伙伴也可以借鉴封装到自己的框架当中去。核心思想用的React

高阶组件解耦,接下来我们看看怎么用。

基础用法

  1. 导入我们的业务组件
```
import { BTable } from 'bcomponents';
```
  1. 写好我们的页面模板。调用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;
  2. 查看演示

完整的一套增删改查

  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

03 基于umi搭建React快速开发框架(封装列表增删改查)的更多相关文章

  1. 01 基于umi搭建React快速开发框架

    介绍 基于umi搭建一个快速开发框架,react 应用框架.umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载. 我们会 ...

  2. 02 基于umi搭建React快速开发框架(国际化)

    前言 之前写过一篇关于React的国际化文章,主要是用react-intl库,雅虎开源的.react-intl是用高阶组件包装一层来做国际化. 基于组件化会有一些问题,比如在一些工具方法中需要国际化, ...

  3. 基于gin的golang web开发:mysql增删改查

    Go语言访问mysql数据库需要用到标准库database/sql和mysql的驱动.标准库的Api使用比较繁琐这里再引入另一个库github.com/jmoiron/sqlx. go get git ...

  4. 基于SpringBoot开发一个Restful服务,实现增删改查功能

    前言 在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便.快捷.但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练. ...

  5. node.js封装数据库增删改查

    数据库增删改查的封装 小编不容易 const sql = { insert: function (Collection, insertData) { return new Promise((resol ...

  6. 使用虚拟机在ubuntu下搭建mongoDB开发环境和简单增删改查操作

    最近在折腾mongodb和nodejs,在imooc上找了一个mongodb的入门教程,跟着里面一步一步的走,下面记录下我操作的步骤和遇到的问题. 课程地址:http://www.imooc.com/ ...

  7. idea使用maven搭建ssm框架实现登陆商品增删改查

    创建项目->maven->webapp->输入坐标->完成. pom.xml <project xmlns="http://maven.apache.org/P ...

  8. PHP历程(封装的增删改查方法)

    db.class.php   主要方法 <?php /** * 数据库配置信息 */ define('DB_HOST','127.0.0.1'); //服务器 define('DB_USER', ...

  9. 后台代码对iBatis配置文件中具体的sql语句的调用实现(被封装的增删改查)

    using IBatisNet.Common.Exceptions; using IBatisNet.DataAccess; using IBatisNet.DataAccess.DaoSession ...

随机推荐

  1. 控制input输入框光标的位置

    一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...

  2. ES5与ES6对比

    ES5与ES6对比 1. 模块引用 1.在ES5里,引入React包基本通过require进行,代码类似这样: // ES5 var React = require('react'); var { C ...

  3. cisco ospf

    ospf配置:(Open Shortest Path First)PC0 and PC1 via Ospf to communicate. Network map as below.Environme ...

  4. Omi框架学习之旅 - 组件通讯(group-data通讯) 及原理说明

    childrenData的方式可以批量传递数据给组件,但是有很多场景下data的来源不一定非要都从childrenData来, childrenData是个数组,会和组件的顺序一一对应,这就给不同传递 ...

  5. Java字节码里的invoke操作&&编译时的静态绑定与动态绑定

    一个一直运行正常的应用突然无法运行了.在类库被更新之后,返回下面的错误. Exception in thread "main" java.lang.NoSuchMethodErro ...

  6. 使用Quartz实现定时任务

    一:Quertz的用途 Quertz是一个开源的作业任务调度框架,他可以完成像JavaScript定时器类式的功能,其实Java中Timer也可实现部分功能,但相比Quertz还是略逊一筹,本人这次需 ...

  7. QZEZ第一届“饭吉圆”杯程序设计竞赛

    终于到了饭吉圆杯的开赛,这是EZ我参与的历史上第一场ACM赛制的题目然而没有罚时 不过题目很好,举办地也很成功,为法老点赞!!! 这次和翰爷,吴骏达 dalao,陈乐扬dalao组的队,因为我们有二个 ...

  8. 使用 cron 定时任务实现 war 自动化发布

    autoRelease.sh #!/bin/sh /home/tomcat/bin/shutdown.sh echo "tomcat stoped" cd /home/tomcat ...

  9. C_数据结构_递归自己调用自己

    # include <stdio.h> void f(int n) { ) printf("哈哈\n"); else f(n-i); } int main(void) ...

  10. linux-安装-源码安装

    编译安装 tengine