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.jsisMock 属性为 true 时,点击登录按钮,控制台会打印出 mock 请求中的第三个参数 149e5916-fada-42cd-9298-5d85b7dff2bbisMock 属性为 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

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

程序员搞艺术

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页