Mock.js的说明文档：http://mockjs.com/examples.html
Mock.js的作用就是：生成随机数据，拦截 Ajax
使用情形：
1.前端只有接口文档，后台接口暂未写好，这个时候，我们不必等待，也不必手动造一堆静态数据，麻烦而又浪费时间，直接使用Mock.js ,炒鸡方便
2.前端需要一些数据，需要在页面操作很多步骤或者求助后端帮忙造数据，而有了Mock.js,想要什么数据，不必再找后端或者自己走一遍流程
3.使用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请求
mock文件夹示例
3.在main.js中引入文件Mock.js
image.png
4.发送网络请求
this.$axios.post('/api/user/myTranferRecord').then(res=>{
console.log(res) //这里返回的就是我们在mock中自定义的数据
})
5.返回的数据
image.png
温馨提示 ：
在实践过程中，发现 Mockjs 本身对 GET 请求的支持并不是很友好。
举个例子，使用 Mock.mock("/user/myTranferRecord", "get", mockData) 的时候，它只会拦截url等于 /user/getUserInfo 的请求，而对于带参数的请求，如/user/getUserInfo?id=12，因为不等于 /user/myTranferRecord 就拦截不到。
采用如下写法即可：
Mock.mock(RegExp("/user/myTranferRecord"+".*"), 'get', newsData)
如果接口还是报404，
image.png
出现这种情况，就是我们在mock.js中定义的接口地址和我们实际发送请求的接口地址写的不一样，导致Mockjs拦截失败，正常情况下，我们使用mock.js，在发送请求时，浏览器是不会发送请求的，因为这时候请求已经被mock.js拦截了，所以仔细检查你的地址是否匹配吧
