預(yù)覽本文的實(shí)現(xiàn)效果：

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

本文主要內(nèi)容：基于 Mock JS，優(yōu)雅設(shè)計(jì)網(wǎng)絡(luò)請(qǐng)求的模擬數(shù)據(jù)。

Git 本地倉庫切換新分支：

git?checkout?-b?05_MockJS

確認(rèn)分支：

git?branch

上文已經(jīng)封裝了基于 axios 的網(wǎng)絡(luò)請(qǐng)求，假設(shè)接口還沒有開發(fā)完畢，前端就無法正常的獲取數(shù)據(jù)。為了提高開發(fā)效率，前后端在制定好 API 接口文檔后能夠并行開發(fā)，此時(shí)前端就需要使用模擬數(shù)據(jù)了。Mock JS 為模擬數(shù)據(jù)提供了很好的支持。

1 安裝依賴

安裝 Mock JS 依賴：

npm?install?--save?mockjs

2 登錄模擬數(shù)據(jù)

上一篇文章已經(jīng)開發(fā)了登錄接口，現(xiàn)在為登錄接口創(chuàng)建模擬數(shù)據(jù)。按照系統(tǒng)設(shè)計(jì)，該接口成功時(shí)值返回一個(gè) token 字符串。

2.1 創(chuàng)建 mock 文件

src/modules/core/mock/?該目錄是用于存放 mock 請(qǐng)求數(shù)據(jù)的，隨著模塊的龐大，每個(gè)模塊也可能包括很多功能，故可以在該目錄下按照功能模塊創(chuàng)建子目錄，然后統(tǒng)一導(dǎo)入到 index.js 中。由于 core module 中只有兩三個(gè)請(qǐng)求，因此我直接在該目錄下創(chuàng)建模擬數(shù)據(jù)文件?index.js。

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

import?Mock?from?'mockjs'
import?urls?from?'@/config/urls'

//?登錄請(qǐng)求
Mock.mock(urls.core.login,?'post',?'149e5916-fada-42cd-9298-5d85b7dff2bb')

2.2 在 src/mock 中導(dǎo)入

src/mock?用于管理整個(gè)應(yīng)用的 mock 數(shù)據(jù)，在該目錄下創(chuàng)建?index.js，里面導(dǎo)入上面 core module 的 mock 文件即可。

src/mock/index.js:

import?'@/modules/core/mock'

2.3 main.js 中引入

最后還需要在 main.js 中，根據(jù)全局配置，決定是否使用mock 數(shù)據(jù)。在?mock.js?中添加如下代碼：

...
import?config?from?'@/config'
...
if?(config.isMock)?{
??require('@/mock')
}
...

2.4 測試

src/config/index.js?中?isMock?屬性為?true?時(shí)，點(diǎn)擊登錄按鈕，控制臺(tái)會(huì)打印出 mock 請(qǐng)求中的第三個(gè)參數(shù)?149e5916-fada-42cd-9298-5d85b7dff2bb；?isMock?屬性為?false?時(shí)，不會(huì)返回模擬數(shù)據(jù)，而是像上一篇文章一樣返回 Network Error。

3 Mock JS 的技巧

登錄請(qǐng)求比較簡單，還沒有完全體現(xiàn) Mock JS 的其他一些技巧。此處先簡單提一下，后面的實(shí)戰(zhàn)中會(huì)都會(huì)遇到：

3.1 路徑匹配問題

Mock.mock()?函數(shù)的第一個(gè)參數(shù)就是請(qǐng)求路徑。按照上面的寫法，是完全匹配。但 RESTful 風(fēng)格的路徑會(huì)出現(xiàn)：/users/x?這種形式，而?x是不確定的，這時(shí)候就需要路徑的模糊匹配了，支持正則匹配。此時(shí)第一個(gè)參數(shù)可以寫為：

RegExp(urls.core.demo?+?'.*')

即：

Mock.mock(RegExp(urls.core.demo?+?'.*'),?'get',?'149e5916-fada-42cd-9298-5d85b7dff2bb')

3.2 返回復(fù)雜 JSON

Mock.mock()?第三個(gè)參數(shù)就是 mock 數(shù)據(jù)，如果模擬的數(shù)據(jù)是一個(gè)很長的 JSON 或其他的，直接寫在這里會(huì)非常不優(yōu)雅。我優(yōu)雅的做法是在當(dāng)前文件所在目錄創(chuàng)建一個(gè)子目錄?json， 把模擬的 json 數(shù)據(jù)放在?json目錄下的 json 文件中，如?demo.json:

{
??"id":?"12345",
??"username":?"zhangsan"
}

此時(shí)第三個(gè)參數(shù)可以寫為：

()?=>?{
??return?require('./json/demo')
}

即：

Mock.mock(RegExp(urls.core.demo?+?'.*'),?'get',?()?=>?{
??return?require('./json/demo')
})

3.3 隨機(jī)字符

有時(shí)候我們希望 mock 數(shù)據(jù)能返回一些隨機(jī)字符串、數(shù)字之類的，Mock JS 提供了這方面的支持。如?{ 'data|1-3': 'abcd' },?{ 'name': '@cname' }?等函數(shù)。具體可以看看 Mock JS 的官網(wǎng)。在后面的實(shí)戰(zhàn)過程中都會(huì)遇到的。

提交代碼：

git?add?.
git?cz
[框架開發(fā)]?Mock數(shù)據(jù)

合并到 master 分支：

git?checkout?master
git?merge?05_MockJS

將本地分支分別全部推送到 Gitee 和 GitHub

git?push?--all?gitee_origin
git?push?--all?github_origin

---

程序員搞藝術(shù)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。