在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟


Posted in Javascript onNovember 28, 2018

在 https://3water.com/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
# 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

在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟

dev-start.bat 运行示例

在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟

自动保存 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 接口数据模拟,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS之小练习代码
Oct 12 Javascript
jquery 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
jquery中radio checked问题
Mar 16 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
回顾Javascript React基础
Jun 15 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
详解Vue中watch的详细用法
Nov 28 #Javascript
vscode下的vue文件格式化问题
Nov 28 #Javascript
微信小程序如何获取用户收货地址
Nov 27 #Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 #Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 #Javascript
js canvas实现画图、滤镜效果
Nov 27 #Javascript
js canvas画布实现高斯模糊效果
Nov 27 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
Python模块搜索路径代码详解
2018/01/29 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
Python列表切片常用操作实例解析
2019/12/16 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
毕业生就业自荐书
2013/12/15 职场文书
高一新生军训感言
2014/03/02 职场文书
党员公开承诺事项
2014/03/25 职场文书
爱之链教学反思
2014/04/30 职场文书
小区推广策划方案
2014/06/06 职场文书
卫生标语大全
2014/06/21 职场文书
临床专业自荐信
2014/06/22 职场文书
妈妈活动方案
2014/08/15 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
分享Python异步爬取知乎热榜
2022/04/12 Python