vue中使用mock.js,模拟接口返回数据
在vue项目中使用mock.js,使用axios发送请求,模拟后台接口,返回数据
一、安装
npm install mockjs --save
二、引入
require ('./mock')
三、创建项目文件目录
在src下新建mock文件夹,添加index.js文件,建议给每个模块要使用的mock数据按模块单独创建文件夹,在文件夹中再写mock数据文件,例如user模块中使用的所有接口要使用的mock放到user文件夹下的index文件中。
mock/index.js
import Mock from 'mockjs'
//将mock数据文件引入
import users from './demo/index'
Mock.mock('/user/methods=?getData',users.getData);
export default Mock
四、配置mock数据
这里以demo/index.js中的数据配置为例
import Mock from 'mockjs'
const users = {};
Mock.mock(users.getData, {
"code": 0,
"data": {
"fullName": "@CNAME", // 随机生成中文人名
"userId": 1000234234001,
"username": "zhangsan"
},
"msg": "success"
})
export default users
五、发送请求,测试数据
this.$axios.get('/user/methods=?getData').then(res=>{
console.log( res.data);
});
返回输出结果:
六、小结
整个过程就是这样子啦,关于mock.js更深入的了解可以在mock官网深入了解哦。
mock官网