fastmock在线模拟数据

107 阅读 0 评论 71 点赞

我是靠谱客的博主安详柚子，这篇文章主要介绍fastmock在线模拟数据，现在分享给大家，希望可以做个参考。

fastmock可以让你在没有后端程序的情况下能真实地在线模拟ajax请求，你可以用fatmock实现项目初期纯前端的效果演示，也可以用fastmock实现开发中的数据模拟从而实现前后端分离。在使用fastmock之前，你的团队实现数据模拟可能是下面的方案中的一种或者多种

本地手写数据模拟，在前端代码中产生一大堆的mock代码。
利用mockjs或者canjs的can-fixture实现ajax拦截，本地配置必要的json规则。
后端在Controller层造假数据返回给前端。

上面的方式中，不管哪一种方式，都会要求开发人员写一些跟项目本无任何关联的代码，第一个和第二个方式还会需要前端项目在本地引入不必要的js文件。比如下面的mock数据

复制代码

// 产品配置
{
url: '/pms/product/list',
on: true,
type: 'get',
resp: Mock.mock({
'body': {
'currentPage': 1,
'isMore': 0,
'pageSize': 15,
'resultList|10': [
{
'productNo': '11111',
'productName|1': ['产品名称1', '产品名称2', '产品名称3', '产品名称4', '产品名称5'],
'productType|1': ['1', '2', '3', '4', '5'],
'status|1': ['1', '2'],
'gmtCreate': '@DATETIME("yyyy-MM-dd HH:mm:ss")',
'gmtModified': '@now("yyyy-MM-dd HH:mm:ss")',
'createUserCode': '@name'
}
],
'startIndex': 0,
'totalNum': 100,
'totalPage': 1
},
'reCode': '0000',
'reMsg': '成功',
'success': true
})
},
// 产品配置-贷款材料配置
{
url: '/pms/cfgLoanDoc/list',
on: true,
resp: Mock.mock({
'body': {
'currentPage': 1,
'isMore': 0,
'pageSize': 15,
'resultList|10': [
{
'loanDocCode|+1': 1,
'loanDocName': /[测试字体]{4,30}/
}
],
'startIndex': 0,
'totalNum': 100,
'totalPage': 1
},
'reCode': '0000',
'reMsg': '成功',
'success': true
})
},
// 产品配置-费用类型配置
{
url: '/pms/productFeeDetail/queryByProductNo',
type: 'get',
on: true,
resp: Mock.mock({
'body': {
'currentPage': 1,
'isMore': 0,
'pageSize': 15,
'resultList|10': [
{
'feeTypeNo|+1': 1,
'feeTypeCode': /[A-Z]{4,8}/,
'feeTypeName': '@name',
'incomeType|1': ['1', '2'],
'feeType|1': ['C', 'D'],
'ratio|1': ['0.5', '0.25'],
'productChargeBasis|1': ['1', '2', '3'],
'fixedAmount|1-100': 5
}
],
'startIndex': 0,
'totalNum': 100,
'totalPage': 1
},
'reCode': '0000',
'reMsg': '成功',
'success': true
})
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
// 产品配置
{
url: '/pms/product/list',
on: true,
type: 'get',
resp: Mock.mock({
'body': {
'currentPage': 1,
'isMore': 0,
'pageSize': 15,
'resultList|10': [
{
'productNo': '11111',
'productName|1': ['产品名称1', '产品名称2', '产品名称3', '产品名称4', '产品名称5'],
'productType|1': ['1', '2', '3', '4', '5'],
'status|1': ['1', '2'],
'gmtCreate': '@DATETIME("yyyy-MM-dd HH:mm:ss")',
'gmtModified': '@now("yyyy-MM-dd HH:mm:ss")',
'createUserCode': '@name'
}
],
'startIndex': 0,
'totalNum': 100,
'totalPage': 1
},
'reCode': '0000',
'reMsg': '成功',
'success': true
})
},
// 产品配置-贷款材料配置
{
url: '/pms/cfgLoanDoc/list',
on: true,
resp: Mock.mock({
'body': {
'currentPage': 1,
'isMore': 0,
'pageSize': 15,
'resultList|10': [
{
'loanDocCode|+1': 1,
'loanDocName': /[测试字体]{4,30}/
}
],
'startIndex': 0,
'totalNum': 100,
'totalPage': 1
},
'reCode': '0000',
'reMsg': '成功',
'success': true
})
},
// 产品配置-费用类型配置
{
url: '/pms/productFeeDetail/queryByProductNo',
type: 'get',
on: true,
resp: Mock.mock({
'body': {
'currentPage': 1,
'isMore': 0,
'pageSize': 15,
'resultList|10': [
{
'feeTypeNo|+1': 1,
'feeTypeCode': /[A-Z]{4,8}/,
'feeTypeName': '@name',
'incomeType|1': ['1', '2'],
'feeType|1': ['C', 'D'],
'ratio|1': ['0.5', '0.25'],
'productChargeBasis|1': ['1', '2', '3'],
'fixedAmount|1-100': 5
}
],
'startIndex': 0,
'totalNum': 100,
'totalPage': 1
},
'reCode': '0000',
'reMsg': '成功',
'success': true
})
}

为此，我们将mock层独立出来，通过中间服务的形式在前端和后端服务之前建立一道围栏，使用fastmock，前端只需要修改自己的XHR请求地址，后端只需要在开发前和前端约定好接口文档即可。等到后端服务开发完成，前端再将XHR请求地址替换回来进行联调测试即可。

Mock.js语法

fastmock 引入了mock.js的支持，支持所有的Mock.js随机数据的生成规则。在这里介绍几个基本规则，更多Mock.js内容移步mockjs文档

基础随机内容的生成

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"string|1-10": "=", // 随机生成1到10个等号
"string2|3": "=", // 随机生成2个或者三个等号
"number|+1": 0, // 从0开始自增
"number2|1-00.1-3": 1, // 生成一个小数，小数点前面1到10，小数点后1到3位
"boolean": "@boolean( 1, 2, true )", // 生成boolean值 三个参数，1表示第三个参数true出现的概率，2表示false出现的概率
"name": "@cname", // 随机生成中文姓名
"firstname": "@cfirst", // 随机生成中文姓
"int": "@integer(1, 10)", // 随机生成1-10的整数
"float": "@float(1,2,3,4)", // 随机生成浮点数，四个参数分别为，整数部分的最大最小值和小数部分的最大最小值
"range": "@range(1,100,10)", // 随机生成整数数组，三个参数为，最大最小值和加的步长
"natural": "@natural(60, 100)", // 随机生成自然数（大于零的数）
"email": "@email", // 邮箱
"ip": "@ip" ,// ip
"datatime": "@date('yy-MM-dd hh:mm:ss')" // 随机生成指定格式的时间
// ......
}

列表数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"code": "0000",
"data": {
"pageNo": "@integer(1, 100)",
"totalRecord": "@integer(100, 1000)",
"pageSize": 10,
"list|10": [{
"id|+1": 1,
"name": "@cword(10)",
"title": "@cword(20)",
"descript": "@csentence(20,50)",
"price": "@float(10,100,10,100)"
}]
},
"desc": "成功"
}

图片
mockjs可以生成任意大小，任意颜色块，且用文字填充内容的图片，使我们不用到处找图片资源就能轻松实现图片的模拟展示

复制代码

1
2
3
4
5
6
7
8
9
10
11
"code": "0000",
"data": {
"pageNo": "@integer(1, 100)",
"totalRecord": "@integer(100, 1000)",
"pageSize": 10,
"list|10": [{
// 参数从左到右依次为，图片尺寸，背景色，前景色（及文字颜色）,图片格式，图片中间的填充文字内容
"image": "@image('200x100', '#ffcc33', '#FFF', 'png', 'Fast Mock')"
}]
},
"desc": "成功"