基于androidx的快速开发框架_Vue企业级优雅实战07框架开发03封装基于MockJS的模拟数据...

预览本文的实现效果：

#gitee

gitclonegit@:cloudyly/dscloudy-admin-single.git

#github

gitclonegit@:cloudyly/dscloudy-admin-single.git

gitcheckout05_MockJS

本文主要内容：基于 Mock JS，优雅设计网络请求的模拟数据。

Git 本地仓库切换新分支：

gitcheckout-b05_MockJS

确认分支：

gitbranch

上文已经封装了基于 axios 的网络请求，假设接口还没有开发完毕，前端就无法正常的获取数据。为了提高开发效率，前后端在制定好 API 接口文档后能够并行开发，此时前端就需要使用模拟数据了。Mock JS 为模拟数据提供了很好的支持。

1 安装依赖

安装 Mock JS 依赖：

npminstall--savemockjs

2 登录模拟数据

上一篇文章已经开发了登录接口，现在为登录接口创建模拟数据。按照系统设计，该接口成功时值返回一个 token 字符串。

2.1 创建 mock 文件

src/modules/core/mock/该目录是用于存放 mock 请求数据的，随着模块的庞大，每个模块也可能包括很多功能，故可以在该目录下按照功能模块创建子目录，然后统一导入到 index.js 中。由于 core module 中只有两三个请求，因此我直接在该目录下创建模拟数据文件index.js。

src/modules/core/mock/index.js:

importMockfrom'mockjs'

importurlsfrom'@/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中添加如下代码：

...

importconfigfrom'@/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"

}

此时第三个参数可以写为：

()=>{

returnrequire('./json/demo')

}

即：

Mock.mock(RegExp(urls.core.demo+'.*'),'get',()=>{

returnrequire('./json/demo')

})

3.3 随机字符

有时候我们希望 mock 数据能返回一些随机字符串、数字之类的，Mock JS 提供了这方面的支持。如{ 'data|1-3': 'abcd' },{ 'name': '@cname' }等函数。具体可以看看 Mock JS 的官网。在后面的实战过程中都会遇到的。

提交代码：

gitadd.

gitcz

[框架开发]Mock数据

合并到 master 分支：

gitcheckoutmaster

gitmerge05_MockJS

将本地分支分别全部推送到 Gitee 和 GitHub

gitpush--allgitee_origin

gitpush--allgithub_origin