免费ui网站,网页模板网站有那些,h5网站制作案例分析,拼多多货源一件代发从哪里找在 https://www.jb51.net/article/151520.htm这篇文章中#xff0c;我们介绍了在 Angular-CLI 中引入 simple-mock 的方法。本文以 Vue-CLI 为例介绍引入 simple-mock 实现前端开发数据模拟的步骤。本质上这里介绍的是在 webpack-dev-server 中配置 simple-mock 实现 API Mock…在 https://www.jb51.net/article/151520.htm这篇文章中我们介绍了在 Angular-CLI 中引入 simple-mock 的方法。本文以 Vue-CLI 为例介绍引入 simple-mock 实现前端开发数据模拟的步骤。本质上这里介绍的是在 webpack-dev-server 中配置 simple-mock 实现 API Mock所以适用于任何采用 webpack 的前端项目。1 simple-mock 简介simple-mock 是一个引入成本简单的 API Mcok 库通过提供 API 方法供 node Server 调用以帮助 node Server 实现 Mock 功能。前端开发过程中的 API Mock 方案各种各样但有时功能丰富的 mock 方案不一定是最适合当前开发场景的。simple-mock 以提供 API 方法的方式实现简易的 API Mock 逻辑 注重快速简洁。2 在 Vue-CLI 项目中使用 simple-mock下面以当前最新的 Vue-CLI 3 和 vuejs 2 为例介绍引入 simple-mock 的详细流程。2.1 在 项目中引入 simple-mock 依赖npm i -D lzwme/simple-mock# oryarn add -D lzwme/simple-mock2.2 在配置文件 vue.config.js 中增加代理配置项在配置文件 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-middlewareproxy: {/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 请求参数至 req.bodyif (!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));}});}}}}};通过以上两个步骤即完成了 simple-mock 的引入。下面步骤主要是针对 simple-mock 使用的说明示例。2.3 修改 simple-mock 配置文件simple-mock 可以通过读取配置文件 simple-mock-config.js 判断 mock 的开启或关闭。该文件会在首次加载时自动创建。配置内容参考module.exports {mockFileDir: mock, // path.contentlove(__dirname, mock), // 指定 mock 文件存放的目录isEnableMock: true, // 是否开启 Mock API 功能isAutoSaveApi: true, // 是否自动保存远端请求的 APIisForceSaveApi: false, // 是否强制保存否则本地有时不再保存// 自动保存 API 返回内容时对内容进行过滤的方法返回为 true 才保存fnAutosaveFilter(content) {// 示例 不保存空的或 404 的内容if (!content || content.message Not Found) {return false;}return true;}};通过修改配置文件中的开关即可实现 mock 功能的开启或关闭。2.4 通过环境变量开启或关闭 Mock 功能除了读取配置文件 simple-mock 还可以通过读取环境变量判断 mock 的开启或关闭(环境变量的优先级更高方便将开关注入到工程化工具中)。例如在 window 下我们可以创建如下的批处理脚本( dev-start.bat )启动该脚本即可即时选择是否开启 mock 功能。dev-start.bat 文件主要内容参考title VUE-START-HELPERecho offset NODE_ENVdevelopmentset MOCKAPI_ENABLENset MOCKAPI_AUTOSAVENset MOCKAPI_AUTOSAVE_FORCENset /p enablemockEnable mockAPI?(y/):if %enablemock%y set MOCKAPI_ENABLEmockset /p autosaveAuoto Save API Data?(y/):if %autosave%y set MOCKAPI_AUTOSAVEsaveif %enablemock%y goto runset /p forcesaveForce Save API Data?(y/):if %forcesave%y set MOCKAPI_AUTOSAVE_FORCEforce:runecho echo MOCKAPI_ENABLE %MOCKAPI_ENABLE%echo MOCKAPI_AUTOSAVE %MOCKAPI_AUTOSAVE%echo MOCKAPI_AUTOSAVE_FORCE %MOCKAPI_AUTOSAVE_FORCE%echo npm startdev-start.bat 运行示例自动保存 API 数据的文件3 更多参考github-user-search-vue是基于 Vue-CLI 3 和 simple-mock 实现的一个 Github 用户搜索的示例项目如有兴趣可前往参考。本文的方案与在 Angular-CLI 中引入 simple-mock 在本质上是一样的都是在 http-proxy-middleware 执行过程中注入 simple-mock 相关 API 实现 Mock 功能。故本文的示例方法。 Vue-CLI 和 Angular-CLI 的 node Server 内部均采用 webpack-dev-server 它使用 http-proxy-middleware 作为 HTTP 代理插件。故本文示例的方法实际适用于任何使用 http-proxy-middleware 作为 HTTP 代理的 node server 服务。总结以上所述是小编给大家介绍的在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟希望对大家有所帮助如果大家有任何疑问请给我留言小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持