在 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 相关文章推荐
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
jQuery异步提交表单实例
May 30 jQuery
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
vue实现一个炫酷的日历组件
Oct 08 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
PHP下判断网址是否有效的代码
2011/10/08 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
php 修改密码实现代码
2017/05/24 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
vue如何使用async、await实现同步请求
2019/12/09 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
Python 字符串操作实现代码(截取/替换/查找/分割)
2013/06/08 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
linux安装python修改默认python版本方法
2019/03/31 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
python中 * 的用法详解
2019/07/10 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
Django 实现图片上传和下载功能
2020/12/31 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
数据库的约束含义
2012/09/09 面试题
工程师岗位职责
2013/11/08 职场文书
工程招投标邀请书
2014/01/30 职场文书
大学军训感想
2014/02/12 职场文书
决心书范文
2014/03/11 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL