mock模拟接口测试 vue_在 Vue-CLI 中引入 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

# 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 更多参考

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367284.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kudu系列: Kudu主键选择策略

每个Kudu 表必须设置Pimary Key(unique), 另外Kudu表不能设置secondary index, 经过实际性能测试, 本文给出了选择Kudu主键的几个策略, 测试结果纠正了我之前的习惯认知. 简单介绍测试场景: 表中有一个unqiue字段Id, 另外还有一个日期维度字段histdate, 有三种设置kudu PK的方法…

OSS网页上传和断点续传(OSS配置篇)

OSS网页上传和断点续传主要根据BrowserJS-SDK和相关文档整理而得,快速构建OSS上传应用 一、Bucket设置 浏览器中直接访问OSS需要开通Bucket的CORS设置 将allowed origins设置成 *将allowed methods设置成 PUT, GET, POST, DELETE, HEAD将allowed headers设置成 *将e…

html vbs 输入框,HTML_vbs实现的下拉框对应键入值,vbs实现的下拉框对应键入值 - phpStudy...

vbs实现的下拉框对应键入值vbs实现的下拉框对应键入值 选择自 gu1dai 的 Blog关键字 vbs实现的下拉框对应键入值select centerbody{text-align:left;font:12px #000080 ;}#main{float:left;width:750px;border:#dddddd 1px solid;margin:5px 10px;padding:10px 5px;}#maintable…

为您的下一个基于Spring的应用程序考虑使用spring-boot的原因!

Spring-boot提供了一种创建基于Spring的应用程序的快速方法。 对于下一个项目,有一些非常令人信服的理由考虑使用Spring-boot: 原因1:使用spring-boot启动程序项目进行更简单的依赖性管理。 考虑使用Spring引导提供数据访问抽象的h2数据库实…

小程序各种姿势实现登录

喜闻乐见的背景时间--由于最近接触小程序比较多,又刚好经历过小程序的自动登录时代以及现在的点击登录时代。结合自己的实践以及观察到其他小程序的做法,就有了这篇小分享~ 本文可能涉及的内容-- 更新 首先感谢shaonialife同学的精彩评论~ 可能由于用词…

c#如何使用反射去创建一个委托_C# 反射的委托创建器

.Net 的反射是个很好很强大的东西,不过它的效率却实在是不给力。已经有很多人针对这个问题讨论过了,包括各种各样的 DynamicMethod 和各种各样的效率测试,不过总的来说解决方案就是利用 Expression Tree、Delegate.CreateDelegate 或者 Emit …

BBS-登录

from django.db import models# Create your models here. from django.contrib.auth.models import AbstractUser#用户 class UserInfo(AbstractUser):nidmodels.AutoField(primary_keyTrue)telephonemodels.CharField(max_length32)avatarmodels.FileField(upload_toavatar/,…

html 输入框从左上角,在输入框的左上角,使文本开始_input_开发99编程知识库

網頁上有幾個輸入框,我希望文本從左上角開始。 目前,使用 below,它的左對齊,但在框的中間。 我嘗試了垂直對齊和其他的東西,但沒有。 我不想使用 padding,因為文本需要包圍,它只能使它彈出框頂部…

PHP定时任务Crontab结合CLI模式详解

从版本 4.3.0 开始,PHP 提供了一种新类型的 CLI SAPI(Server Application Programming Interface,服务端应用编程端口)支持,名为 CLI,意为 Command Line Interface,即命令行接口。 STDIN 标准输…

使用Mockito和BeanPostProcessors在Spring注入测试双打

我非常确定,如果您曾经使用过Spring并且熟悉单元测试,那么您会遇到与您不想修改的Spring应用程序上下文中注入模拟/间谍(测试双打)有关的问题。 本文介绍了一种使用Spring组件解决此问题的方法。 项目结构 让我们从项目结构开始&…

当面试官问你如何进行性能优化时,你该这么回答(一)

背景 在开发好页面后,如何让页面更快更好的运行,是区分一个程序猿技术水平和视野的一个重要指标。所以面试时,面试官总会问你一个问题,如何进行性能优化呢? 如果你这时是头脑一片空白,或是像之前的我一样…

二叉搜索时与双向链表python_JZ26-二叉搜索树与双向链表

1、中序遍历,当前结点,以及左侧排好序的双向链表,再调整当前结点的指针指向最前结点/* struct TreeNode {int val;struct TreeNode *left;struct TreeNode *right;TreeNode(int x) :val(x), left(NULL), right(NULL) {} };*/ class Solution …

dva使用心得

组件在异步数据到来前已经完成初始化&#xff0c;是导致constructor中无法取到所需数据的原因。所以最直接的方法&#xff0c;就是修改组件创建的时间 //把原来的组件内部控制显示/* <ComponentName show{modelName.show}/> *///更改为状态直接控制组件是否存在{ modelN…

html右缩进怎么设置,WPS中怎么设置右缩进两个字符?

回答&#xff1a;打开我们的Word文档&#xff0c;调整好我们的文字内容&#xff0c;然后全选我们的文字内容&#xff0c;注意要分段时按下键盘上的回车键另起一行。请点击输入图片描述接着&#xff0c;我们点击顶部菜单栏的“开始”菜单&#xff0c;在开始菜单下面的子菜单中找…

VS2013专业版+QT5.6.3+qt-vs-addin-1.2.5环境搭建

一、工具资料&#xff1a; 1.vs2013专业版地址&#xff1a;http://download.csdn.net/download/u010368556/10238145 2.qt各版本地址&#xff1a;http://download.qt.io/archive/qt/ 3.qt-vs插件地址&#xff1a;http://download.qt.io/archive/vsaddin/ 二、环境搭建过程&…

不到50行代码实现一个能对请求并发数做限制的通用RequestDecorator

使用场景 在开发中&#xff0c;我们可能会遇到一些对异步请求数做并发量限制的场景&#xff0c;比如说微信小程序的request并发最多为5个&#xff0c;又或者我们需要做一些批量处理的工作&#xff0c;可是我们又不想同时对服务器发出太多请求&#xff08;可能会对服务器造成比…

使用ActiveMQ和HornetQ通过WebSocket通过STOMP轻松进行消息传递

消息传递是用于构建不同级别的分布式软件系统的极其强大的工具。 通常&#xff0c;至少在Java生态系统中&#xff0c;客户端&#xff08;前端&#xff09;从不直接与消息代理&#xff08;或交换&#xff09;进行交互&#xff0c;而是通过调用服务器端&#xff08;后端&#xff…

yum 安装mysql的位置_Yum安装MySQL以及相关目录路径和修改目录

有些时候,为了方便,有些同学喜欢通过yum的方式安装MySQL,没有设置统一的文件目录以及软件目录,那么就会为后续的维护工作带来很大的麻烦&#xff01;下面就简单介绍一下yum安装MySQL的步骤以及这类安装下的相关目录路径,最后简单介绍下如何更改文件目录&#xff01;YUM安装MySQ…

【laravel】【转发】laravel 导入导出excel文档

1、简介 Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel &#xff0c;从而方便我们以优雅的、富有表现力的代码实现Excel/CSV文件的导入和 导出 。 该项目的GitHub地址是&#xff1a; https://github.com/Maatwebsite/Laravel-Excel 。 本文我们将在Laravel中…

javaScript--DOM

一、JavaScript JavaScript这门语言由 DOM、BOM、ECMAScript 组成。 DOM&#xff1a;document object model 文档对象模型。体现在代码中就是 document 对象。 BOM&#xff1a;browser object model 浏览器对象模型。体现在代码中就是window对象。 ECMA&#xff1a;核心语法。包…