您现在的位置是:网站首页> 内容页

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

  • 铜雀台注册账号
  • 2019-09-24
  • 48人已阅读
简介前言大家在做业务系统的时候,很多地方都是列表增删改查,做这些功能占据了大家很长时间,如果我们有类似的业务,半个小时就能做出一套那是不是很爽呢。这样我们就可以有更多的时间学习一些新的东西

前言

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

基础用法

    导入我们的业务组件import { BTable } from "bcomponents";

    写好我们的页面模板。调用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;

    查看演示

完整的一套增删改查

    创建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;

    写我们的页面模板,完成创建和查询的操作。我们这次用了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表单项就可以了,是不是很简单。至此。我们的创建和查询就完成了

    添加编辑功能。编辑和删除的操作在列表上,所以我们需要在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就可以了。是不是很简单

    添加删除功能

    BTable.Del({ url: `/api/table/${data.id}`, getData,})这是最简单的了,传一个url和getData就完成了。

    查看演示

关于

BTable文档地址

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

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

结束语

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

, 1, 0, 9);

文章评论

Top