预览本文的实现效果：
# gitee
git clone git@gitee.com:cloudyly/dscloudy-admin-single.git
# github
git clone git@github.com:cloudyly/dscloudy-admin-single.git
git checkout 05_MockJS
本文主要内容：基于 Mock JS，优雅设计网络请求的模拟数据。
Git 本地仓库切换新分支：
git checkout -b 05_MockJS
确认分支：
git branch
上文已经封装了基于 axios 的网络请求，假设接口还没有开发完毕，前端就无法正常的获取数据。为了提高开发效率，前后端在制定好 API 接口文档后能够并行开发，此时前端就需要使用模拟数据了。Mock JS 为模拟数据提供了很好的支持。
1 安装依赖
安装 Mock JS 依赖：
npm install --save mockjs
2 登录模拟数据
上一篇文章已经开发了登录接口，现在为登录接口创建模拟数据。按照系统设计，该接口成功时值返回一个 token 字符串。
2.1 创建 mock 文件
src/modules/core/mock/ 该目录是用于存放 mock 请求数据的，随着模块的庞大，每个模块也可能包括很多功能，故可以在该目录下按照功能模块创建子目录，然后统一导入到 index.js 中。由于 core module 中只有两三个请求，因此我直接在该目录下创建模拟数据文件 index.js。
src/modules/core/mock/index.js:
import Mock from 'mockjs'
import urls from '@/config/urls'
// 登录请求
Mock.mock(urls.core.login, 'post', '149e5916-fada-42cd-9298-5d85b7dff2bb')
2.2 在 src/mock 中导入
src/mock 用于管理整个应用的 mock 数据，在该目录下创建 index.js，里面导入上面 core module 的 mock 文件即可。
src/mock/index.js:
import '@/modules/core/mock'
2.3 main.js 中引入
最后还需要在 main.js 中，根据全局配置，决定是否使用mock 数据。在 mock.js 中添加如下代码：
...
import config from '@/config'
...
if (config.isMock) {
require('@/mock')
}
...
2.4 测试
src/config/index.js 中 isMock 属性为 true 时，点击登录按钮，控制台会打印出 mock 请求中的第三个参数 149e5916-fada-42cd-9298-5d85b7dff2bb； isMock 属性为 false 时，不会返回模拟数据，而是像上一篇文章一样返回 Network Error。
3 Mock JS 的技巧
登录请求比较简单，还没有完全体现 Mock JS 的其他一些技巧。此处先简单提一下，后面的实战中会都会遇到：
3.1 路径匹配问题
Mock.mock() 函数的第一个参数就是请求路径。按照上面的写法，是完全匹配。但 RESTful 风格的路径会出现：/users/x 这种形式，而 x是不确定的，这时候就需要路径的模糊匹配了，支持正则匹配。此时第一个参数可以写为：
RegExp(urls.core.demo + '.*')
即：
Mock.mock(RegExp(urls.core.demo + '.*'), 'get', '149e5916-fada-42cd-9298-5d85b7dff2bb')
3.2 返回复杂 JSON
Mock.mock() 第三个参数就是 mock 数据，如果模拟的数据是一个很长的 JSON 或其他的，直接写在这里会非常不优雅。我优雅的做法是在当前文件所在目录创建一个子目录 json， 把模拟的 json 数据放在 json目录下的 json 文件中，如 demo.json:
{
"id": "12345",
"username": "zhangsan"
}
此时第三个参数可以写为：
() => {
return require('./json/demo')
}
即：
Mock.mock(RegExp(urls.core.demo + '.*'), 'get', () => {
return require('./json/demo')
})
3.3 随机字符
有时候我们希望 mock 数据能返回一些随机字符串、数字之类的，Mock JS 提供了这方面的支持。如 { 'data|1-3': 'abcd' }, { 'name': '@cname' } 等函数。具体可以看看 Mock JS 的官网。在后面的实战过程中都会遇到的。
提交代码：
git add .
git cz
[框架开发] Mock数据
合并到 master 分支：
git checkout master
git merge 05_MockJS
将本地分支分别全部推送到 Gitee 和 GitHub
git push --all gitee_origin
git push --all github_origin
)
