在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
在 这篇文章中,我们介绍了在 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 # or yarn add -d @lzwme/simple-mock
2.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-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 请求参数至 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) ); } }); } } } } };
通过以上两个步骤,即完成了 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, // 是否自动保存远端请求的 api isforcesaveapi: 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-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 运行示例
自动保存 api 数据的文件
3 更多参考
是基于 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 接口数据模拟,希望对大家有所帮助