注意：
- 用 @ 来标识其后的字符串是 占位符。
- 占位符 引用的是 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"
}
}
通过jQuery ajax请求假数据例子
1.首先，引入mockjs，引入jquery（此处用jq封装好的ajax发送请求）
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> <script src="http://mockjs.com/dist/mock.js"></script>
2.使用mock生成数据模板
//这里的第一个参数http://api.cn 就是下面ajax请求的url，mock对该url进行拦截'
//这里的第二个参数就是template数据模板，mock会返回模板生成的数据
Mock.mock('http://api.cn', {
'name': '@name',
'age|1-100': 100,
'city': '@city'
});
3.ajax发送请求与结果
$.ajax({
url: 'http://api.cn',
dataType: 'json'
}).done(function(data, status, xhr) {
console.log( JSON.stringify(data)); //{"name":"Mark Lee","age":4,"city":"辽阳市"}
});
vuecli中使用mockjs
首先安装
npm install mockjs
我的项目src下的结构如下：
我在scripts中新建了一个mockdata.js
里面的内容如下：
import Mock from 'mockjs';
const data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'foods|10-50': [{
'name': "@ctitle(2,10)",
"img": "@image('600x600',#b7ef7c)",
"brief": "@csentence(1,50)",
"price|0-20.0-2": 1,
"num": 0,
"minusFlag": true,
"time": "@time",
"peisongfei|0-100.0-2": 1,
"limit|0-50": 1
}],
"sales|10-50": [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'name': "@ctitle(2,10)",
"img": "@image('600x600',#b7ef7c)",
"brief": "@csentence(1,50)",
"price|0-100.0-2": 1,
"num": 0,
"minusFlag": true,
"time": "@time",
"peisongfei|0-100.0-2": 1,
"limit|0-100": 1
}]
});
export default {
data
}
接下来，在需要用到的mock数据的vue组件页面中，这样写