預覽本文的實現效果：

#?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

---

程序員搞藝術

總結

以上是生活随笔為你收集整理的基于androidx的快速开发框架_Vue企业级优雅实战07框架开发03封装基于MockJS的模拟数据...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。