1.什么是Mock.js?
Mock.js是拦截AJAX请求,并返回请求需要的数据的工具。
2.为什么会有Mock.js?
在前后端分离的开发过程中,在后端接口没完成的情况下可以利用Mock.js提供的随机数据来进行测试。
3.Mock.js的使用?
3.1 安装mockjs
npm install mockjs - -save-dev
3.2 新建mock文件夹
在根目录下新建mock文件夹:
3.3 实现模拟接口
在mock文件夹中新建mock.js文件,并输入下图所示代码
此代码表示:拦截/api/user 接口并随机返回一个包含20个字母的字符串。如若看不明白,请移步Mock.js查阅官方文档。
3.4 连接项目
在src/index.js
文件中引入mock.js
import ‘../mock/mock’;
3.5 删除dist/api文件夹+ 去掉接口路径中的.json
dist/api /*删除文件夹*/
- promise: client => client.get(/api/user.json
)
+ promise: client => client.get(/api/user
) /*去掉接口路径中的.json*/
到此处基本实现模拟请求数据的功能,但还需要配置。因为只有在开发环境下,才引入mock,生产环境无需引入。配置方法如下:
3.6 配置webpack
首先配置webpack.common.config.js
,为mock文件夹加个别名:
其次配置webpack.dev.config.js
最后修改src/index.js
添加下面的代码:
如此便实现了只有在开发模式
下才会启用mock,如果不想使用mock功能,可以在webpack.dev.config.js
中将’MOCK:false’即可!