在我们的生产实际中，后端的接口往往是较晚才会出来，于是我们的前端的许多开发都要等到接口给我们才能进行，这样对于我们前端来说显得十分的被动，于是有没有可以制造假数据来模拟后端接口呢，答案是肯定的。于是今天我们来介绍一款非常强大的插件Mock.js ，可以非常方便的模拟后端的数据，也可以轻松的实现增删改查这些操作，在后台数据完成之后，你所做的只是去掉mockjs：停止拦截真实的ajax，仅此而已。
搭建一个vue项目
安装mockjs
开启项目
创建一个mockjs文件夹以及mockjs,并且在main.js引入这个文件
此时可以看到像这样的一个项目结构
mockjs的使用
在项目中的mock.js文件中，写入模拟的数据，此时我们可以参照一下mockjs的文档。
属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
})
// 输出结果
console.log(JSON.stringify(data,null,4))
接下来可以做我们想要做的事了
在mock.js中模拟简单的一些数据
获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceData = function (opt) {
console.log('opt',opt);
let articles = [];
for (let i = 0; i < 30; i++) {
let newArticleObject = {
title: Random.csentence(5,30),// Random.csentence( min,max )
thumbnail_pic_s: Random.dataImage('300x250','mock的图片'),// Random.dataImage( size,text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(),// Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
}
return {
data: articles
}
}
Mock.mock('/news',/post|get/i,produceData);//当post或get请求到/news路由时Mock会拦截请求并返回上面的数据
在vue中请求
{
console.log(res.data);
this.newsListShow = res.data.data;
});}
}
效果预览
再做一个删除的处理
模拟数据
随机生成一个常见的中文姓名
content: Random.csentence(5,max )
id: i
}
arr.push(newArticleObject);
}
let list = function (options) {
let rtype = options.type.toLowerCase(); //获取请求类型
switch (rtype) {
case 'get':
break;
case 'post':
let id = parseInt(JSON.parse(options.body).params.id) //获取删除的id
arr = arr.filter(function(val){
return val.id!=id;//把这个id对应的对象从数组里删除
});
break;
default:
}
return {
data: arr
} //返回这个数组,也就是返回处理后的假数据
}
Mock.mock('/list',/get|post/i,list);//get用于请求数据，post用于删除数据
vue中使用
{
this.data = res.data.data;
});
},deleteList(data) { //删除数据
let id = data.id;
this.$http.post('/list',{
params: {
id: id
}
}).then(function(res) {
console.log(res);
this.data = res.data.data;
alert(data.name + '删除成功');
}.bind(this))
.catch(function(error) {
console.log(error)
});
},}
效果预览
