生成随机数据，拦截 Ajax 请求
- 前后端分离-让前端攻城师独立于后端进行开发。
- 增加单元测试的真实性-通过随机数据，模拟各种场景。
- 开发无侵入-不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
- 用法简单-符合直觉的接口。
- 数据类型丰富-支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
- 方便扩展-支持支持扩展更多数据类型，支持自定义函数和正则。
一、安装
npm install mockjs
二、使用
1.mockjs基础配置
新建index.js文件用于mockjs的配置
├── mock
│ └── index.js
index.js文件内容如下:
import Mock from 'mockjs';
// 判断环境不是 prod 或者 preview 是 true 时，加载 mock 服务
// if (process.env.NODE_ENV !== 'production') {
// 使用同步加载依赖
// 防止 vuex 中的 GetInfo 早于 mock 运行，导致无法 mock 请求返回结果
console.log('mock mounting');
require('./services/user');
Mock.setup({
timeout: 800 // 设置延迟时间
});
console.log('mock mounted');
// }
2.模拟一个用户登录接口
新建user.js文件
├── mock
│ ├── services
│ │ └── user.js
│ └── index.js
user.js文件内容如下:
let Mock = require('mockjs');
let login = (req) => {
return {
'success': true,
'msg': '登录成功',
'errorCode': 0,
'data': {
'username': 'admin',
'password': '123456',
}
};
};
Mock.mock('/user/login', 'post', login);
3.main.js中全局使用
import '@/mock'// 引入mock.js
4. Entry.vue
<script>
export default {
data() {
return {
};
},
methods: {
login() {
axios.post('/user/login',params).then( res => {
console.log(res);
})
}
},
}
</script>
