参考文献

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文件夹:
AJAX数据模拟之Mock.js

3.3 实现模拟接口

在mock文件夹中新建mock.js文件,并输入下图所示代码

AJAX数据模拟之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文件夹加个别名:

AJAX数据模拟之Mock.js

其次配置webpack.dev.config.js

AJAX数据模拟之Mock.js

最后修改src/index.js添加下面的代码:

AJAX数据模拟之Mock.js

如此便实现了只有在开发模式下才会启用mock,如果不想使用mock功能,可以在webpack.dev.config.js 中将’MOCK:false’即可!

相关文章: