/**
* 使用mockjs来mock数据, 提供mock数据API接口
*/
import Mock from 'mockjs'
import data from './data.json'
//注册接口
Mock.mock('/api2/goods', {
// code表示成功
code: 0,
data: data.goods
})
Mock.mock('/api2/ratings', {
code: 0,
data: data.ratings
})
Mock.mock('/api2/seller', {
code: 0,
data: data.seller
})
// 不用export
mock数据模板
1. 属性值是字符串 String
-
'name|min-max': string通过重复
string生成一个字符串，重复次数大于等于min，小于等于max。 -
'name|count': string通过重复
string生成一个字符串，重复次数等于count。
2. 属性值是数字 Number
-
'name|+1': number属性值自动加 1，初始值为
number。 -
'name|min-max': number生成一个大于等于
min、小于等于max的整数，属性值number只是用来确定类型。 -
'name|min-max.dmin-dmax': number生成一个浮点数，整数部分大于等于
min、小于等于max，小数部分保留dmin到dmax位
Mock.mock({
'number1|1-100.1-10': 1,
'number2|123.1-10': 1,
'number3|123.3': 1,
'number4|123.10': 1.123
})
// =>
{
"number1": 12.92,
"number2": 123.51,
"number3": 123.777,
"number4": 123.1231091814
}
3. 属性值是布尔型 Boolean
-
'name|1': boolean随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
-
'name|min-max': value随机生成一个布尔值，值为
value的概率是min / (min + max)，值为!value的概率是max / (min + max)。
4. 属性值是对象 Object
-
'name|count': object从属性值
object中随机选取count个属性。 -
'name|min-max': object从属性值
object中随机选取min到max个属性。
5. 属性值是数组 Array
-
'name|1': array从属性值
array中随机选取 1 个元素，作为最终值。 -
'name|+1': array从属性值
array中顺序选取 1 个元素，作为最终值。 -
'name|min-max': array通过重复属性值
array生成一个新数组，重复次数大于等于min，小于等于max。 -
'name|count': array通过重复属性值
array生成一个新数组，重复次数为count。
6. 属性值是函数 Function
-
'name': function执行函数
function，取其返回值作为最终的属性值，函数的上下文为属性'name'所在的对象。
数据占位符定义规范 DPD
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符 的格式为：
@占位符
@占位符(参数 [, 参数])
注意：
- 用
@来标识其后的字符串是 占位符。 -
占位符 引用的是
Mock.Random中的方法。 - 通过
Mock.Random.extend()来扩展自定义占位符。 - 占位符 也可以引用 数据模板 中的属性。
- 占位符 会优先引用 数据模板 中的属性。
- 占位符 支持 相对路径 和 绝对路径。
Mock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
})
// =>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
}
Mock.mock()用法
mock参数
rurl
可选。
表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。
rtype
可选。
表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template
可选。
表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
function(options)
可选。
表示用于生成响应数据的函数。
options
指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性，参见 XMLHttpRequest 规范。
1.Mock.mock( template )
根据数据模板生成模拟数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script>
// mock数据模板
// 属性名 name
// 生成规则 rule
// 属性值 value
// 'name|rule': value
var template = {
'title': 'Syntax Demo', //固定文本 //结果:Syntax Demo
'string1|1-10': '★', //随机生成重复1到10个★ ★★★★
'string1|1-10': 'abc', //随机生成重复1到10个abc abcabcabcabcabcabc
'string2|3': 'value', //重复3个value valuevaluevalue
'number1|+1': 100, //属性值自动加 1，初始值为100 100
'number2|1-100': 100, //随机1-100
'number3|1-100.1-10': 1, //随机1-100,并小数点后带1-10位数 24.23586
'number4|123.1-10': 1, //123,并小数点后带1-10位数 123.9722331,
'number5|123.3': 1, //123，并小数点后带3位数 123.346
'number6|123.10': 1.123, // 123.1232441918
'boolean1|1': true,
'boolean2|1-2': true,
'object1|2-4': { //从属性值 object 中随机选取2到4个属性。
'110000': '北京市',
'120000': '天津市',
'130000': '河北省',
'140000': '山西省'
},
'object2|2': { //从属性值 object 中随机选取2个属性。
'310000': '上海市',
'320000': '江苏省',
'330000': '浙江省',
'340000': '安徽省'
},
'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'], //从属性值 array 中随机选取1个元素为最终值 'CMD'
'array2|1-10': ['Mock.js'],
'array3|3': ['Mock.js'], //重复属性值mock.js三次 生成新数组 ['Mock.js','Mock.js','Mock.js']
'name': function() { //执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
return this.title
}
}
var data = Mock.mock(template)
console.log(data)
</script>
</body>
</html>
2.Mock.mock( rurl, template )
记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
3.Mock.mock( rurl, rtype, template )
记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。
4.Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
在html中使用
get请求
在实践过程中，发现 Mockjs 本身对 GET 请求的支持并不是很友好。
举个例子，使用 Mock.mock("/user/getUserInfo", "get", mockData) 的时候，它只会拦截url等于 /user/getUserInfo 的请求，而对于带参数的请求，如/user/getUserInfo?id=12，因为不等于 /user/getUserInfo 就拦截不到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
</head>
<body>
<div>
<h2 id="mock1">mock模拟带参数的get请求</h2>
</div>
<script type="text/javascript">
// Mock.mock("http://mockjs",'get',function(options) {
// return options
// });
// 上面直接请求http://mockjs?data=abc，无法请求，可通过下面正则来匹配
// 对于带参数的get请求，url为：http://mockjs?data=abc
Mock.mock(/http:\/\/mockjs/,'get',function(options) {
return options
});
$("#mock1").click(function(){
$.get("http://mockjs",{data:'abc'},
function (res) {
console.log(typeof(res)) //string res为JSON字符串
var res=JSON.parse(res) //通过JSON.parse JSON字符串转为JSON对象
console.log(res)
//{url: "http://mockjs?data=abc", type: "GET", body: null}
// body: null
// type: "GET"
// url: "http://mockjs?data=abc"
// __proto__: Object
}
);
});
</script>
</body>
</html>