Vue企业级优雅实战07-框架开发03-封装基于MockJS的模拟数据

预览本文的实现效果：

# 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

---

更多内容请关注我的个人公众号，留言可加我个人微信或交流问题