03 基于umi搭建React快速开发框架(封装列表增删改查)
前言
大家在做业务系统的时候,很多地方都是列表增删改查,做这些功能占据了大家很长时间,如果我们有类似的业务,半个小时就能做出一套那是不是很爽呢。
这样我们就可以有更多的时间学习一些新的东西。我们这套框架对此做了下封装,适合的小伙伴也可以借鉴封装到自己的框架当中去。核心思想用的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.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表单项就可以了,是不是很简单。
至此。我们的创建和查询就完成了添加编辑功能。编辑和删除的操作在列表上,所以我们需要在
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就完成了。
查看演示
关于
线上演示地址:http://39.105.188.65:8080/system/channel
目前我正在开发一个头条的开源项目。可以用此地址查看,这个是用的真实的数据
结束语
表格的增删改查封装已经完成, 代码已放到github上,大家可以自行查看umi-react。如果觉得不错,请 start 一下
我建了一个QQ群,大家加进来,可以一起交流。群号 787846148
03 基于umi搭建React快速开发框架(封装列表增删改查)的更多相关文章
- 01 基于umi搭建React快速开发框架
介绍 基于umi搭建一个快速开发框架,react 应用框架.umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载. 我们会 ...
- 02 基于umi搭建React快速开发框架(国际化)
前言 之前写过一篇关于React的国际化文章,主要是用react-intl库,雅虎开源的.react-intl是用高阶组件包装一层来做国际化. 基于组件化会有一些问题,比如在一些工具方法中需要国际化, ...
- 基于gin的golang web开发:mysql增删改查
Go语言访问mysql数据库需要用到标准库database/sql和mysql的驱动.标准库的Api使用比较繁琐这里再引入另一个库github.com/jmoiron/sqlx. go get git ...
- 基于SpringBoot开发一个Restful服务,实现增删改查功能
前言 在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便.快捷.但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练. ...
- node.js封装数据库增删改查
数据库增删改查的封装 小编不容易 const sql = { insert: function (Collection, insertData) { return new Promise((resol ...
- 使用虚拟机在ubuntu下搭建mongoDB开发环境和简单增删改查操作
最近在折腾mongodb和nodejs,在imooc上找了一个mongodb的入门教程,跟着里面一步一步的走,下面记录下我操作的步骤和遇到的问题. 课程地址:http://www.imooc.com/ ...
- idea使用maven搭建ssm框架实现登陆商品增删改查
创建项目->maven->webapp->输入坐标->完成. pom.xml <project xmlns="http://maven.apache.org/P ...
- PHP历程(封装的增删改查方法)
db.class.php 主要方法 <?php /** * 数据库配置信息 */ define('DB_HOST','127.0.0.1'); //服务器 define('DB_USER', ...
- 后台代码对iBatis配置文件中具体的sql语句的调用实现(被封装的增删改查)
using IBatisNet.Common.Exceptions; using IBatisNet.DataAccess; using IBatisNet.DataAccess.DaoSession ...
随机推荐
- 控制input输入框光标的位置
一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...
- ES5与ES6对比
ES5与ES6对比 1. 模块引用 1.在ES5里,引入React包基本通过require进行,代码类似这样: // ES5 var React = require('react'); var { C ...
- cisco ospf
ospf配置:(Open Shortest Path First)PC0 and PC1 via Ospf to communicate. Network map as below.Environme ...
- Omi框架学习之旅 - 组件通讯(group-data通讯) 及原理说明
childrenData的方式可以批量传递数据给组件,但是有很多场景下data的来源不一定非要都从childrenData来, childrenData是个数组,会和组件的顺序一一对应,这就给不同传递 ...
- Java字节码里的invoke操作&&编译时的静态绑定与动态绑定
一个一直运行正常的应用突然无法运行了.在类库被更新之后,返回下面的错误. Exception in thread "main" java.lang.NoSuchMethodErro ...
- 使用Quartz实现定时任务
一:Quertz的用途 Quertz是一个开源的作业任务调度框架,他可以完成像JavaScript定时器类式的功能,其实Java中Timer也可实现部分功能,但相比Quertz还是略逊一筹,本人这次需 ...
- QZEZ第一届“饭吉圆”杯程序设计竞赛
终于到了饭吉圆杯的开赛,这是EZ我参与的历史上第一场ACM赛制的题目然而没有罚时 不过题目很好,举办地也很成功,为法老点赞!!! 这次和翰爷,吴骏达 dalao,陈乐扬dalao组的队,因为我们有二个 ...
- 使用 cron 定时任务实现 war 自动化发布
autoRelease.sh #!/bin/sh /home/tomcat/bin/shutdown.sh echo "tomcat stoped" cd /home/tomcat ...
- C_数据结构_递归自己调用自己
# include <stdio.h> void f(int n) { ) printf("哈哈\n"); else f(n-i); } int main(void) ...
- linux-安装-源码安装
编译安装 tengine