在vue-cli项目中使用Mockjs的详细说明

背景

当前端处于早期jQuery时代时，前端功能和后端项目基本结合。通常，公共maven项目下的webapp目录在前端包含各种静态资源文件。

这时，我们总会遇到这些问题：

老板，界面文档还没有输出，所以我不能做很多工作！后端兄弟，界面写好了吗？我想测试一下！测试时间不够，所以会发布。我明天看日出了吗？比如各种事情，就是一句话：劳动和资本，不要再指望你了！

节点出现之后，正好是前端分离之后，前端迫切需要一个机制，不再需要依赖后端接口开发。经过几年的发展，很多大牛都在这个领域做了研究。

现在我们终于可以实现真正的模拟测试了。比如今天的主角莫克js

使用的详细说明

1.首先在src目录中创建mock文件夹，定义mock主文件index.js，并在该文件中定义拦截路由配置；

/* * *定义本地测试接口，与正式接口保持一致，避免联合调试阶段的修改工作量。*///从‘Mock js’引入mockjsimport Mock//从“”导入模板函数类导入记录。/prec-record-API '；Mock.setup({ timeout: 800，//设置延迟响应，模拟从后端请求数据})；//Mock.mock(url，post/get，返回数据)；mock . mock(/\/API \/health plat \/getRecipe \/\ w * \/\ w */，' get '，record . getRecipe)；2.在指定文件中定义模板函数类。示例：

//被嘲笑。random object//从“mockjs”导入mock jsimport { random }；从“”导入Utils。/Utils '；函数getRecipe(req) {//模拟一组数据const data=[]；for(设I=0；i 10I=1){ const o={ recipied : random . guid()，billId: Random.string(10)，orgid : random . string(' number '，8，10)，Viewname:random.cword (4，16)，//随机生成任意名称personame 3360 random . cname()，reason 3360 random . csentence(10，32)，}；data . push(o)；}//返回响应数据对象returnutils.setres (req，{data: {idcard3360random.id()，//random details 3360 data，}，totalcount 336020，})；}导出默认值{ getRecipe，}；3.在main.js中引入mock/index.js文件；

//导入模拟文件导入。/mock/index '；//模拟模式，正式发布的时候可以评论出来。下一步是配置模拟路由和模板功能。玩得开心！

踩坑了

在这里，我将介绍Mockjs在vue-cli中踩过的坑：

1.请求路径包含变量。我该怎么办？

用过路由器的朋友都知道，我们经常要用地址中的参数来处理路由。此时，我们只需要使用正则表达式来匹配Mockjs中的路径。示例：

复制代码如下： mock . mock(/\/API \/health plat \/getrecippedetail \/\ w * \/\ w */，' get '，record . getrecippedetail)；

也就是说，我们只使用常规字符集来匹配我们的变量。

2.为什么我没有在控制台的网络中看到我的请求？

刚开始测试的时候，我发现很奇怪，我查网络的时候没有看到请求！只问自己几个问题：

为什么要在main.js入口文件中引入mockjs的相关配置文件？不是所有的门户文件都是在webpack中编译然后在浏览器中执行的吗？控制台没有拦截请求，所以没有拦截发送到服务器的请求，对吗？带着这些问题，阅读源代码和文档，发现：

在源代码中，先找出请求是否在Mockjs中定义，然后截取，然后使用其模拟请求对象MockXMLHttpRequest进行响应，即此时不发送XHR请求；否则，本地标准XHR对象用于请求，此时可以在控制台网络中看到请求信息。因此，在main.js门户文件中引入Mockjs的相关配置文件，意味着在前端代码中加入了mockjs的模拟模式，将在浏览器中执行，而不是发送请求，但我们可以将其打印到控制台上查看。

用户评论可以在服务器中使用mockjs，此时它是一个真实的请求，并且请求信息可以在控制台中查看。我这里没有进行过相应的实践，有兴趣的可以参考mock-server:

3.使用模板语法，返回的数据包含规则“|rules”，这会导致解析或取值失败。我该怎么办？

一开始，我根据文档中描述的模板语法进行了配置，例如：

看到属性代码实际上与规则一起返回，我说为什么我的请求没有被成功解析。原来res.code一直是未定义的，这是个坑。查看源代码和可以搜索到的在线例子，发现没有使用模板规则，而是使用了mockjs提供的内置函数，比如。id()。cname()等等。

因此，我将模拟相关文件中代码的定义更改为：

函数setRes(req，options){ window . console . log(req . URL)；const { code=Random.int(0，5)=1？1 : 0，消息，数据={}，totalCount=100 }=选项；Const result={code，message: message | | ['failure '，' error '，' exception'] [random。整数(0，2)]，数据，totalcount，}；window.console.log(结果)；返回结果；}开始时，属性代码被定义为——“code | 1”，true，后来更改为code=Random.boolean()。发现生成假的概观对于我们的真实场景来说太高了。

考虑到我们只需要增加代码为1的概率，我使用Random.int(0，5)来随机生成一个整数。当这个整数大于等于1时，我们将代码设置为1，其他情况为0。

也就是说，从概率上来说，成功的概率是0.8，失败的概率是0.2，基本符合我们的测试要求。哈哈，机智是不够的。

4.模拟异步请求的过程，发现请求似乎瞬间完成，加载效果不生效

一开始没有设置延迟响应，每一个请求好像都是瞬间完成的，没有等待一步操作的感觉，也没有加载叠加的样子。我自己调试的时候，有一个加载覆盖层，所以我认为请求没有延迟，而是同步执行的。

考虑到lo dash . debook函数具有延迟网络请求、稀释事件和延迟执行的效果，模板函数用debook包装如下：

复制代码如下： mock . mock('/API/health plat/chronic disease '，' get '，去抖(record.chronicdisease，600))；

结果，有趣的事情发生了：当请求频繁时，在延迟时间内，这个请求获得的响应数据是最后一个请求的结果。这显然不是我们所希望看到的，我们通常会用去抖来淡化请求，这显然违背了我们发送请求后的初衷。

翻看mockjs文档，发现作者已经考虑过这件事了。嘿，我努力了很久，但还是要看文件。具体如下：

Mock.setup({ timeout: 800，//设置延迟响应，模拟从后端请求数据})；5.Mock无法拦截带有参数的get请求

一开始发现有些get请求不能一直请求模拟数据，而有些get请求可以得到模拟数据，但是在post中没有这样的问题。很郁闷！

仔细调试发现get请求失败，参数和路径都找不到；获取请求成功，无参数，找不到路径，获取mock数据。已正确找到发布路径，并成功获取模拟数据。

这时我突然想到，默认情况下get请求的路径中添加了参数，所以和设置的路径不匹配，因为找不到路径，导致请求失败。所以我把路径改成了正则表达式，这样就可以了。例如：

//字符串路径开头，参数为的get请求与mock.mock不匹配('/API/healthplat/renewcancel '，' get '，manage . renewcancel)；只需将其更改为以下内容：

//正则表达式路径，带有参数的get请求与mock.mock成功匹配(/\/API \/health plat \/renewcancel/，' get '，manage . renewcancel)；然而，在实际开发过程中，发现上述正则表达式并不完整。例如，另一个路径/API/health plat/renewcanceladr也会匹配上面的地址，这不是我们想要的。

此时，我们只需要改进正则表达式：

//正则表达式路径，获取参数匹配成功的请求mock . mock(/\/API \/health plat \/renewcancel(| \？\S*)$/，' get '，manage . renewcancel)；也就是说，只有路径为/api/healthPlat/renewCancel的get请求才会符合上述规则。

最后，建议所有get请求都使用正则表达式来写路径；帖子串和常规都可以；

摘要

虽然mock有上面提到的局限性和问题，但是对于日常的自检联调还是很有好处的，我觉得主要是简单可行。当然，本文描述的模式并不局限于vue-cli，也可以按照这个方法在其他框架中进行配置。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。