在 Vue-CLI 中引入 simple-mock實(shí)現(xiàn)簡(jiǎn)易的 API Mock 接口數(shù)據(jù)模擬
在 http://www.dbjr.com.cn/article/151520.htm這篇文章中,我們介紹了在 Angular-CLI 中引入 simple-mock 的方法。
本文以 Vue-CLI 為例介紹引入 simple-mock 實(shí)現(xiàn)前端開(kāi)發(fā)數(shù)據(jù)模擬的步驟。
本質(zhì)上這里介紹的是在 webpack-dev-server 中配置 simple-mock 實(shí)現(xiàn) API Mock,所以適用于任何采用 webpack 的前端項(xiàng)目。
1 simple-mock 簡(jiǎn)介
simple-mock 是一個(gè)引入成本簡(jiǎn)單的 API Mcok 庫(kù),通過(guò)提供 API 方法供 node Server 調(diào)用,以幫助 node Server 實(shí)現(xiàn) Mock 功能。
前端開(kāi)發(fā)過(guò)程中的 API Mock 方案各種各樣,但有時(shí)功能豐富的 mock 方案不一定是最適合當(dāng)前開(kāi)發(fā)場(chǎng)景的。
simple-mock 以提供 API 方法的方式實(shí)現(xiàn)簡(jiǎn)易的 API Mock 邏輯, 注重快速簡(jiǎn)潔。
2 在 Vue-CLI 項(xiàng)目中使用 simple-mock
下面以當(dāng)前最新的 Vue-CLI 3 和 vuejs 2 為例,介紹引入 simple-mock 的詳細(xì)流程。
2.1 在 項(xiàng)目中引入 simple-mock 依賴
npm i -D @lzwme/simple-mock # or yarn add -D @lzwme/simple-mock
2.2 在配置文件 vue.config.js 中增加代理配置項(xiàng)
在配置文件 vue.config.js 中增加 devServe.proxy 字段的配置。參考:
const anyParse = require("co-body"); const apiMock = require("@lzwme/simple-mock"); const chalk = require("chalk"); const proxyTarget = 'https://api.github.com/'; module.exports = { baseUrl: "", // Links: https://webpack.js.org/configuration/dev-server/ devServer: { open: true, https: false, compress: true, disableHostCheck: true, // Links: https://github.com/chimurai/http-proxy-middleware proxy: { "/users": { target: proxyTarget, changeOrigin: true, port: 3009, onProxyRes(proxyRes, req, res) { apiMock.saveApi(req, res, proxyRes.headers["content-encoding"]); }, async onProxyReq(proxyReq, req, res) { // 嘗試解碼 post 請(qǐng)求參數(shù)至 req.body if (!req.body && proxyReq.getHeader("content-type")) { try { req.body = await anyParse({ req }); } catch (err) { // console.log(err); } } apiMock.render(req, res).then(isMocked => { if (!isMocked) { console.log( chalk.cyan("[apiProxy]"), req._parsedUrl.pathname, "\t", chalk.yellow(proxyTarget) ); } }); } } } } };
通過(guò)以上兩個(gè)步驟,即完成了 simple-mock 的引入。下面步驟主要是針對(duì) simple-mock 使用的說(shuō)明示例。
2.3 修改 simple-mock 配置文件
simple-mock 可以通過(guò)讀取配置文件 simple-mock-config.js 判斷 mock 的開(kāi)啟或關(guān)閉。該文件會(huì)在首次加載時(shí)自動(dòng)創(chuàng)建。配置內(nèi)容參考:
module.exports = { mockFileDir: 'mock', // path.contentlove(__dirname, 'mock'), // 指定 mock 文件存放的目錄 isEnableMock: true, // 是否開(kāi)啟 Mock API 功能 isAutoSaveApi: true, // 是否自動(dòng)保存遠(yuǎn)端請(qǐng)求的 API isForceSaveApi: false, // 是否強(qiáng)制保存,否則本地有時(shí)不再保存 // 自動(dòng)保存 API 返回內(nèi)容時(shí),對(duì)內(nèi)容進(jìn)行過(guò)濾的方法,返回為 true 才保存 fnAutosaveFilter(content) { // 示例: 不保存空的或 404 的內(nèi)容 if (!content || content.message === 'Not Found') { return false; } return true; } };
通過(guò)修改配置文件中的開(kāi)關(guān),即可實(shí)現(xiàn) mock 功能的開(kāi)啟或關(guān)閉。
2.4 通過(guò)環(huán)境變量開(kāi)啟或關(guān)閉 Mock 功能
除了讀取配置文件, simple-mock 還可以通過(guò)讀取環(huán)境變量判斷 mock 的開(kāi)啟或關(guān)閉(環(huán)境變量的優(yōu)先級(jí)更高,方便將開(kāi)關(guān)注入到工程化工具中)。
例如在 window 下我們可以創(chuàng)建如下的批處理腳本( dev-start.bat ),啟動(dòng)該腳本即可即時(shí)選擇是否開(kāi)啟 mock 功能。
dev-start.bat 文件主要內(nèi)容參考:
@title VUE-START-HELPER @echo off set NODE_ENV=development set MOCKAPI_ENABLE=N set MOCKAPI_AUTOSAVE=N set MOCKAPI_AUTOSAVE_FORCE=N set /p enablemock=Enable mockAPI?(y/): if "%enablemock%"=="y" set MOCKAPI_ENABLE=mock set /p autosave=Auoto Save API Data?(y/): if "%autosave%"=="y" set MOCKAPI_AUTOSAVE=save if "%enablemock%"=="y" goto run set /p forcesave=Force Save API Data?(y/): if "%forcesave%"=="y" set MOCKAPI_AUTOSAVE_FORCE=force :run echo ======================================================= echo MOCKAPI_ENABLE = %MOCKAPI_ENABLE% echo MOCKAPI_AUTOSAVE = %MOCKAPI_AUTOSAVE% echo MOCKAPI_AUTOSAVE_FORCE = %MOCKAPI_AUTOSAVE_FORCE% echo ======================================================= npm start
dev-start.bat 運(yùn)行示例
自動(dòng)保存 API 數(shù)據(jù)的文件
3 更多參考
github-user-search-vue 是基于 Vue-CLI 3 和 simple-mock 實(shí)現(xiàn)的一個(gè) Github 用戶搜索的示例項(xiàng)目,如有興趣可前往參考。
本文的方案與在 Angular-CLI 中引入 simple-mock 在本質(zhì)上是一樣的,都是在 http-proxy-middleware 執(zhí)行過(guò)程中,注入 simple-mock 相關(guān) API 實(shí)現(xiàn) Mock 功能。故本文的示例方法。 Vue-CLI 和 Angular-CLI 的 node Server 內(nèi)部均采用 webpack-dev-server ,它使用 http-proxy-middleware 作為 HTTP 代理插件。故本文示例的方法,實(shí)際適用于任何使用 http-proxy-middleware 作為 HTTP 代理的 node server 服務(wù)。
總結(jié)
以上所述是小編給大家介紹的在 Vue-CLI 中引入 simple-mock實(shí)現(xiàn)簡(jiǎn)易的 API Mock 接口數(shù)據(jù)模擬,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 詳解vue-cli本地環(huán)境API代理設(shè)置和解決跨域
- 詳解在vue-cli項(xiàng)目下簡(jiǎn)單使用mockjs模擬數(shù)據(jù)
- webpack+vue-cli項(xiàng)目中引入外部非模塊格式j(luò)s的方法
- 基于vue-cli npm run build之后vendor.js文件過(guò)大的解決方法
- vue新vue-cli3環(huán)境配置和模擬json數(shù)據(jù)的實(shí)例
- vue-cli 3.0 自定義vue.config.js文件,多頁(yè)構(gòu)建的方法
- vue-cli腳手架build目錄下utils.js工具配置文件詳解
- 詳解如何配置vue-cli3.0的vue.config.js
- Vue-cli3項(xiàng)目配置Vue.config.js實(shí)戰(zhàn)記錄
- vue.js的vue-cli腳手架中使用百度地圖API的實(shí)例
相關(guān)文章
Vue一個(gè)動(dòng)態(tài)添加background-image的實(shí)現(xiàn)
這篇文章主要介紹了Vue一個(gè)動(dòng)態(tài)添加background-image的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03淺談vue,angular,react數(shù)據(jù)雙向綁定原理分析
本篇文章主要介紹了淺談vue,angular,react數(shù)據(jù)雙向綁定原理分析,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11vue項(xiàng)目及axios請(qǐng)求獲取數(shù)據(jù)方式
這篇文章主要介紹了vue項(xiàng)目及axios請(qǐng)求獲取數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08VSCode創(chuàng)建Vue項(xiàng)目的完整步驟教程
Vue是一個(gè)輕量級(jí)、漸進(jìn)式的Javascript框架,如果想要要開(kāi)發(fā)全新的Vue項(xiàng)目,建議項(xiàng)目構(gòu)建工具vue-cli,下面這篇文章主要給大家介紹了關(guān)于VSCode創(chuàng)建Vue項(xiàng)目的完整步驟,需要的朋友可以參考下2022-06-06詳解如何編寫(xiě)一個(gè)Vue3響應(yīng)式系統(tǒng)
這篇文章主要為大家學(xué)習(xí)介紹了如何編寫(xiě)一個(gè)Vue3響應(yīng)式系統(tǒng),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解一下2023-07-07Vue 第三方字體圖標(biāo)引入 Font Awesome的方法
今天小編就為大家分享一篇Vue 第三方字體圖標(biāo)引入 Font Awesome的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09