Mock.js官网 http://mockjs.com/
Mock.js的Github地址 https://github.com/nuysoft/Mock/wiki
Mock.js可以在不修改既有代码的基础上，拦截 Ajax 请求，返回模拟的响应数据。
非工程项目中快速使用Mock,js
index.html文件结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DEMO</title>
<script src="http://mockjs.com/dist/mock.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="./mock.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="demo-wrapper">
<span class="app">点击</span>
</div>
<script>
</script>
</body>
</html>
接下来添加script标签中的代码，首先我们可以利用Mock.js快速生成一串数据
let data = Mock.mock({
"list|3-10": [{
"id|+1": 1,
"name": "@cname"
}]
})
console.log('data:', JSON.stringify(data, null, 2))
打印结果如下：
data: {
"list": [
{
"id": 1,
"name": "尹涛"
},
{
"id": 2,
"name": "康涛"
},
{
"id": 3,
"name": "武军"
},
{
"id": 4,
"name": "傅平"
}
]
}
其中list数组中的数量是随机3-10个，id依次+1，name是随机生成的。
利用Mock.Random可以生成更多类型的数据，image方法更是可以直接生成定制的图片链接
let random = Mock.Random
let friends = ['小张', '小王', '小李', '小陈']
let data2 = {
email: random.email(),
image: random.image('200x100', '#00405d', '#fff', 'Mock.js'),
name: random.cname(),
url: random.url(),
address: random.city(),
bestfriend: random.pick(friends)
}
console.log('data2:', JSON.stringify(data2, null, 2))
打印出的代码示例：
data2: {
"email": "p.oxlbik@msuh.il",
"image": "http://dummyimage.com/200x100/00405d/fff&text=Mock.js",
"name": "程秀兰",
"url": "mailto://dtr.tp/zcbizzv",
"address": "钦州市",
"bestfriend": "小王"
}
接下来是重头戏，我们可以利用Mock.js生成的数据直接模拟接口，下面是在index.html引入的mock.js的文件代码
data2: {
"email": "p.oxlbik@msuh.il",
"image": "http://dummyimage.com/200x100/00405d/fff&text=Mock.js",
"name": "程秀兰",
"url": "mailto://dtr.tp/zcbizzv",
"address": "钦州市",
"bestfriend": "小王"
}
在index.html中发起请求
$(".app").click(function () {
$.ajax({
url: "yourdomain.com/getlist",
type: 'get',
dataType: 'json'
}).done(function (data, status, xhr) {
console.log(data, null, 2)
})
})
此时运行代码，点击app元素，页面控制台会打印出来请求到的模拟数据
{user: Array(4)}
0: {id: 1, name: "董霞", age: 24, birthday: "1999-10-15", city: "city", …}
1: {id: 2, name: "谭静", age: 20, birthday: "2000-03-20", city: "city", …}
2: {id: 3, name: "史平", age: 28, birthday: "2016-02-17", city: "city", …}
3: {id: 4, name: "李霞", age: 27, birthday: "1970-05-19", city: "city", …}
注意，这里的点击事件，并没有发起真实的ajax请求，此时请求已经在本地就被Mock.js拦截了。
vue项目中使用Mock.js
1.安装Mock.js
npm install mockjs --save-dev
2.在项目中新建mock.js文件，内容如下
const Mock = require('mockjs')
const Random = Mock.Random
const newsData = function () {
let articles = []
for (let i = 0; i < 10; i++) {
let newsObj = {
date: Random.date(), //年月日
longDate:Random.datetime(), //精确到时分秒
number:Random.natural(201,205), //数字
image:Random.image(), //图片
flag:Random.boolean(), // true-false
name:Random.cname(), //姓名
url:Random.url(), //url地址
province:Random.province(), //省
city:Random.city(), //市
county:Random.county() //区
}
articles.push(newsObj)
}
return {
code: 0,
msg: "操作成功",
data: articles,
}
}
Mock.setup({
timeout: 500
})
``请严格注意get请求的地址``
Mock.mock('/api/user/myTranferRecord', 'post',newsData ) //post请求
Mock.mock(RegExp("/api/user/myTranferRecord"+".*"), 'get', newsData) //get请求
3.在main.js中引入文件mock.js
import './mock'
4.页面中进行使用
this.$axios.post('/api/user/myTranferRecord').then(res=>{
console.log(res) //这里返回的就是我们在mock中自定义的数据
})
此时就可以在页面中看到请求被拦截后拿到的模拟接口的数据
特别注意：
在实践过程中，发现 Mockjs 本身对get请求的支持并不是很友好。
举个例子，使用 Mock.mock("/user/getUserInfo ", "get", mockData) 的时候，它只会拦截url等于 /user/getUserInfo 的请求，而对于带参数的请求，如/user/getUserInfo?id=xxx，因为不等于 /user/getUserInfo 就拦截不到。
采用如下写法即可：
Mock.mock(RegExp("/user/myTranferRecord"+".*"), 'get', newsData)
另外，如果请求没有被拦截，多数是因为接口地址和mock.js文件中定义的接口地址不一样，导致拦截失败。
