溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在前后端分離的開發模式中，接口數據模擬(API Mock)是不可避免的事情。前端同學在應對該情況時采取的辦法可以各種各樣，大概的方案可能會是這幾類：
本文主要介紹在 Angular-cli 中引入 simple-mock 以快速實現項目數據接口模擬功能的方法。該方案本質上為上述的第三種方案。
1 simple-mock 簡介
simple-mock 是一個引入成本簡單的 API Mcok 庫，通過提供 API 方法供 node Server 調用，以幫助 node Server 實現 Mock 功能。實現該庫的主要目的還是為了懶，希望前端開發過程中 mock 數據能夠盡可能地簡單。
與常見 Mock 庫或 Mock Server 有點不同的是，它實現了自動保存后端 API 數據的功能，如果你足夠懶且隨意，可以不寫任何 mock 規則。
2 在 Angular-cli 中使用 simple-mock
這里以 Angular-cli^7.0.0 和 Angular^7.0.0 為例。
Angular-cli^7.0.0 在執行 ng serve 時，內部實際是采用 express 啟動 node server，并且使用 http-proxy-middleware 實現 HTTP API 代理。所以本文方案的本質是在 http-proxy-middleware 執行過程中，注入 simple-mock 相關 API 實現 Mock 功能。
在 Angular-cli 中引入 simple-mock 的方法十分簡單。具體流程參考如下。
2.1 在項目中引入 simple-mock
npm i -D @lzwme/simple-mock # or yarn add -D @lzwme/simple-mock
2.2 增加配置文件angular.json 的代理配置項
在配置文件 angular.json 中的 serve/options 部分增加 proxyConfig 字段的配置。參考：
{
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "github-user-search:build",
"liveReload": true,
"open": true,
"host": "localhost",
"port": ,
"servePath": "/",
"publicHost": "localhost",
"proxyConfig": "config/ngcli-proxy-config.js"
},
},
}
proxyConfig 的值 config/ngcli-proxy-config.js 為我們自定義的代理配置定義文件。
2.3. 新建自定義代理配置文件 config/ngcli-proxy-config.js
我們通過在自定義代理配置文件中引入 simple-mock 相關 API 實現 mock 功能。
這里我們還引入了 co-body 用于解碼 post 請求的參數，以便于自定義 mock 規則時使用。
該文件內容參考如下：
const anyParse = require('co-body');
const apiMock = require('@lzwme/simple-mock');
const chalk = require('chalk');
const apiProxyList = {
'/users/**': 'https://api.github.com/',
};
/**
* 詳細配置參考：https://www.npmjs.com/package/http-proxy-middleware
*/
const proxyCfg = Object.keys(apiProxyList).reduce((pCfg, key) => {
const proxyTarget = apiProxyList[key];
pCfg[key] = {
target: proxyTarget,
changeOrigin: true,
onProxyRes(proxyRes, req, res) {
apiMock.saveApi(req, res, proxyRes.headers['content-encoding']);
},
async onProxyReq(proxyReq, req, res) {
// 嘗試解碼 post 請求參數至 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));
}
});
},
};
return pCfg;
}, {});
module.exports = proxyCfg;
以上操作完成，執行 ng serve，即會在項目根目錄創建 mock 目錄和 simple-mock 的配置文件 simple-mock-config.js，這些文件都會在 .gitignore 中注入過濾規則，可以在本地隨意修改。
2.4 修改 simple-mock 配置文件
simple-mock 可以通過讀取配置文件 simple-mock-config.js 判斷 mock 的開啟或關閉。
對于針對本文實現的示例項目 github-user-search-ng，該配置文件內容參考如下：
module.exports = {
mockFileDir: 'mock', // path.contentlove(__dirname, 'mock'), // 指定 mock 文件存放的目錄
isEnableMock: true, // 是否開啟 Mock API 功能
isAutoSaveApi: true, // 是否自動保存遠端請求的 API
isForceSaveApi: false, // 是否強制保存，否則本地有時不再保存
// 自動保存 API 返回內容時，對內容進行過濾的方法，返回為 true 才保存
fnAutosaveFilter(content) {
// 示例： 不保存空的或 的內容
if (!content || content.message === 'Not Found') {
return false;
}
return true;
}
};
通過修改配置文件中的開關，即可實現 mock 功能的開啟或關閉了。
2.5 通過環境變量開啟或關閉 Mock 功能
除了讀取配置文件，simple-mock 還可以通過讀取環境變量判斷 mock 的開啟或關閉（環境變量的優先級更高，方便將開關注入到工程化工具中），詳細用法參考simple-mock 使用文檔。
例如在示例項目 github-user-search-ng中，創建了 dev-start.bat 文件，在 window 下開發時，啟動該文件即可即時選擇是否開啟 mock 功能。
dev-start.bat 文件主要內容參考：
@title GMTS-FRONT-NG-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 ======================================================= ng serve
更多參考
github-user-search-ng 是為本文實現的一個示例項目，有興趣可前往查閱完整的倉庫代碼。
本文的方案本質上是在 http-proxy-middleware 執行過程中，注入 simple-mock 相關 API 實現 Mock 功能。故本文的示例方法，實際適用于任何使用 http-proxy-middleware 作為 HTTP 代理的 node server 服務。在 simple-mock 的說明文檔中，則是以 node-http-proxy 代理庫作為示例，有興趣可進一步參考研究。
https://github.com/renxia/github-user-search-ng
https://github.com/lzwme/simple-mock
https://lzw.me/pages/share/ppt/simple-mock.html
https://www.npmjs.com/package/http-proxy-middleware
總結
以上所述是小編給大家介紹的在 Angular-cli 中使用 simple-mock 實現前端開發 API Mock 接口數據模擬功能的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
