一、安装
1,安装模拟axios
npm安装mockjs axios——保存
2,安装axios-mock-adapter
axios-mock-adapter是axios与模拟配置器,简单来说就是把二者结合在一起的工具
npm安装axios-mock-adapter——save-dev
二、使用模拟
1,在src目录下,创建模拟文件夹,在下面再创建数据文件夹,创建数据文件,比如user.js,用于模拟生成用户信息数据,初始化我们需要的数据,这里举例初始化用户信息数据
<代码>//user.js
从“mockjs”进口模拟;//导入mockjs模块
让用户=[];//定义我们需要的数据,后面导出
const数=(1、2、3、4、5);//定义我们需要数量,即生成几条模拟数据
(让我=1;我& lt;=COUNT.length;我+ +){
Users.push(模拟。模拟({//根据数据模板生成模拟数据。
id: Mock.Random.guid()//随机id
标题:Mock.Random.first()//随机标题
名称:Mock.Random.cname()//随机中文名
addr: Mock.mock (“@county(真正的)”),//随机地址
的年龄| 60”:1、//随机年龄
出生:Mock.Random.date()//随机生日
性:Mock.Random.integer(0, 1)//随机性别
isDelete:假的,//是否删除
锁定:Mock.Random.boolean()//随机锁定
记录:COUNT.map(()=比;{//痢痢恋ハ盍斜淼氖?
返回{
文字:Mock.Random.cparagraph(2)//随机内容
isDelete:假的,//是否删除
检查:Mock.Random.boolean()//是否完成
};
})
}));
}
{//导出口出用户数据
用户
};
2,创建模拟,js
核心文件,它的作用就是模拟ajax请求的接口,生成并返回模拟数据。
<代码>进口axios从“axios”;
从“进口MockAdapter axios-mock-adapter ';
从“mockjs”进口模拟;
从“进口用户{}。/数据/user.js ';//导入用户数据
出口默认{/* *
*模仿开始
*/start(){//初始化函数
让模拟=new MockAdapter (axios);//创建MockAdapter实例//获取用户列表
mock.onGet ('/user/列表”)。回复(config=比;{//配置指前台传过来的值网址自己随意定义,访问时要和这个网址一致就可以,这个/user/列表,就是得到请求时的url地址
让{名称}=config.params;
让mockUsers=用户。过滤器(用户=比;{
如果(名字,,user.name.indexOf(名字)==1)返回false;
返回true;
});
返回新的承诺((解决,拒绝)=比;{//响应请求,返回数据给前台
setTimeout(()=比;{
解决([200年,{
用户:mockUsers
}));
},1000);
});
});
mock.onGet ('/todo列表”)。回复(config=比;{//配置指前台传过来的值
让mockTodo=待办事项。地图(tode=比;{//重组Todos数组,变成我们想要的数据
返回{
id: tode.id,
标题:tode.title,
数:tode.record.filter((数据)=比;{
如果(数据)。检查===false)返回true;
返回错误;
})。长度,//过滤到记录里面“检查”为真正的数据,因为它们已经被完成了
锁定:tode.locked,
isDelete: tode.isDelete
};
})。过滤器(tode=比;{
如果(tode。isDelete===true)返回false;//过滤掉“isDelete”为真,因为已经被删除了。
返回true;
});
返回新的承诺((解决,拒绝)=比;{
setTimeout(()=比;{
解决([200年,{
待办事项:mockTodo//返回状态为200,并且返回todos数据
}));
}, 200);
});
});//新增一条待办事项
mock.onPost('/备忘录/addTodo”)。回复(config=比;{
Todos.push ({
id: Mock.Random.guid (),
标题:“newList”,
isDelete:假的,
锁定:假的,
记录:[]
});
返回新的承诺((解决,拒绝)=比;{
setTimeout(()=比;{
解决([200]);
}, 200);
});
});
}
};
3,导出模拟
新建src/嘲笑/index.js,并且复制以下代码,这里的指数作用在于方便其他文件引入。
<代码>进口从’。/模拟的模拟; 出口默认模拟;//导入同级下mock.js的内容,并且导出
4,引入模拟
打开src/main.js,并且复制以下代码,这里的作用就是全局加载模拟,执行初始化函数函数,这样的本地我们设定的接口,就可以在全局调用了。
<代码>进口从’。/模拟的模拟;//引入模拟模块 Mock.start ();//并且执行初始化函数
5封装api函数
-
<李>新建src/api/api.js李
<李>我们把所有需要调用的接口,全部写到一个文件里面,封装成一个一个的函数,需要使用的时候我们直接调用这个函数即可,这里写的话,逻辑就比较清晰,接口需要改动的时候也能快速定位,维护成本就降低了。
