有时候我们在进行项目前端开发的时候,可能后台数据接口给的不及时,影响工作进度,应该怎么办呢?这时候mock.js是一种较好的解决方案,它可以模拟接口数据,也很方便后期进行接口数据替换,下面我们来简单看下mock.js的介绍和特点吧
mock.js:可以生成随机数据,拦截ajax请求
特点:1、前后端分离(让前端攻城师独立于后端进行开发)
2、增加单元测试的真实性(通过随机数据,模拟各种场景)
3、开发无侵入(不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据)
4、用法简单
5、数据类型丰富(支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等)
6、方便扩展(支持支持扩展更多数据类型,支持自定义函数和正则)
详细请看官方文档:mock.js官方
在项目中的使用:
1、项目根目录下创建mock文件夹:
在mock文件夹下创建index.js,写入如下内容:
import Mock from "mockjs";
const data = Mock.mock({
"data|10":[
{
"id|+1":1,
name:"@cname",//注意数据name前面加c,要不然就变成了英文名
"sex|1":["男","女"],
"tel":/^1[ 3456789]{10}$/,
}
]
})
export default [{
url: '/api/getData',
type: 'get',
response() {
return {
code: 200,
msg: 'success',
data: {data}
};
},
}, ];
2、在src目录下创建api文件夹,创建index.js,写入如下内容:
import request from '@/utils/request.js';
export const getAbc = () => {
return request({
url: '/getData',
method: 'get',
});
};
3、最后就可以开心的在页面中使用啦:
import {getData} from '@/api/index.js';//引入
getData().then((e) => {
console.log(e);//获取到请求的数据
});