阿里粑粑开源的管理框架Ant Design Pro使用记录之mock。
1、有用的Mock
antd pro在本地开发环境下start时就提供了mock环境了，在根目录的mock里可以定义自己需要mock的方法和出入参数，非常的方便。
2019-06-03补充：
在我的尝试之前推荐下json-server，我下面没有使用，但是在别的地方用过，确实还是很方便的。
接下来介绍下我怎么之前怎么用的：
import Mock from 'mockjs';
const { Random } = Mock;
const userListLength = Random.integer(10, 100);
const userList = [];
// 生成表格mock数据
for (let i = 0; i < userListLength; i += 1) {
userList.push({
id: i,
love: Math.random(0, 1) > 0.5,
taxNo: Random.integer(4e14, 5e14),
taxtype: i % 3 === 0 ? 'small' : i % 2 === 0 ? 'personal' : 'normal',
name: `深圳市丝悦化妆品有限公司${i + 1}`,
no: i % 2 === 0 ? `B${i}` : `T${i}`,
taxZone: Math.random(0, 1) > 0.5 ? '广东' : '深圳',
key: Math.random(0, 1) > 0.5,
sysVerify: Math.random(0, 1) > 0.5,
taxManager: 'lane',
accountManager: 'lane',
date: Random.datetime('yyyy-MM-dd HH:mm:ss'),
})
}
export default {
[`POST /api/biz/md/bizMdClient/search`](req, res, u, b) { // 分页查询处理
const body = (b && b.body) || req.body;
const { skip, limit } = body;
const start = skip * limit; // 数据开始索引
const end = start + (limit * 1); // 数据结束索引
const dataSource = userList.slice(start, end); // 要返回的数据
const result = {
code: 200,
data: dataSource,
// 分页信息
pageinfo: {
"total": userList.length,
"pageindex": skip,
"pagesize": limit,
}
};
if (res && res.json) {
res.json(result);
} else {
return result;
}
},
[`POST /api/biz/md/bizMdClient/love`](req, res) {
const { client } = req.body
for (let i = 0, length = userList.length; i < length; i += 1) {
if (client.id === userList[i].id) {
userList[i].love = !userList[i].love;
break;
}
}
res.send({ code: 200 }).end()
},
[`POST /api/biz/md/bizMdClient/queryFilterOptions`](req, res) {
const dataSource = [
{
title: '全部',
},
{
title: '一般',
},
{
title: '小规模',
},
{
title: '税务待分配',
},
{
title: '账务待分配',
},
{
title: '我的关注',
},
];
const result = {
code: 200,
data: dataSource,
};
if (res && res.json) {
res.json(result);
} else {
return result;
}
}
}
上面的mock是基于本地npm start 时启动的mock服务说的，但是代码撸完了，总要在服务器上提供服务，不能再本地自己玩吧，也就是说npm build后，生成的dist的目录的文件要在服务器上跑的，一般是用nginx作为服务器。测试mock就没有了，这时候怎么办，有两种办法解决，其实就算是本地我个人也比较推荐下面这种方式。
将一个json格式的文本复制到比如test.json中，内容如下：
{
"list": [
{
"callNo": "11101",
"desc": "20ml",
"name": "1号脱敏针",
"updatedAt": "2019-04-12T14:00:00.000Z",
"pingHao": 1,
"fenZhen": "是"
},
{
"callNo": "11102",
"desc": "20ml",
"name": "2号脱敏针",
"updatedAt": "2019-04-12T14:00:00.000Z",
"pingHao": 2,
"fenZhen": "是"
},
{
"callNo": "11103",
"desc": "30ml",
"name": "3号脱敏针",
"updatedAt": "2019-04-12T14:00:00.000Z",
"pingHao": 3,
"fenZhen": "是"
},
{
"callNo": "11104",
"desc": "30ml",
"name": "4号脱敏针",
"updatedAt": "2019-04-12T14:00:00.000Z",
"pingHao": 4,
"fenZhen": "是"
},
{
"callNo": "11105",
"desc": "40ml",
"name": "5号脱敏针",
"updatedAt": "2019-04-12T14:00:00.000Z",
"pingHao": 5,
"fenZhen": "是"
},
{
"callNo": "11106",
"desc": "40ml",
"name": "6号脱敏针",
"updatedAt": "2019-04-12T14:00:00.000Z",
"pingHao": 6,
"fenZhen": "是"
},
{
"callNo": "111017",
"desc": "60ml",
"name": "7号脱敏针",
"updatedAt": "2019-04-12T14:00:00.000Z",
"pingHao": 7,
"fenZhen": "是"
},
{
"callNo": "11108",
"desc": "60ml",
"name": "8号脱敏针",
"updatedAt": "2019-04-12T14:00:00.000Z",
"pingHao": 8,
"fenZhen": "是"
}
],
"pagination": {
"total": 8,
"pageSize": 10,
"current": 1
}
}
然后把这个文件上传到任何一个有网就可以下载的服务器上，比如七牛啊，百度啊，什么的提供存储的地方，比如我的
models里还是一样的调用services的js文件里提供的接口
*fetchTuoMinZhen({ payload }, { call, put }) {
const response = yield call(queryTuoMinZhen, payload);
yield put({
type: 'save',
payload: response,
});
},
重点来了，本来services里的接口是这样的:
export async function queryTuoMinZhen(params) {
return request(`/api/tuominzhen?${stringify(params)}`);
}
也安装mock-server专门提供服务，具体可以google试试。
2、在table的行render时常用的操作
1、时间格式化，指定时区
{
title: '更新时间',
dataIndex: 'updateTime',
sorter: true,
render: val => <span>{moment(val).utc().format('YYYY-MM-DD HH:mm:ss')}</span>,
},
2、显示图片
3、长文本使用省略号
4、可折叠table
5、显示总条数
6、表头支持筛选和排序
3、修改antd默认的样式
在自定义的class中加入:global关键字的样式:
