vue-cli 프로젝트에서 Mockjs를 사용하는 방법

이번에는 vue-cli 프로젝트에서 Mockjs를 사용하는 방법과 vue-cli 프로젝트에서 Mockjs를 사용할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

Background

Front-end 초기 jQuery 시대에는 프런트엔드 기능과 백엔드 프로젝트가 기본적으로 결합되었습니다. 일반적인 예는 일반적인 Maven 프로젝트 아래의 webapp 디렉터리에 다양한 정적 리소스 파일이 포함되어 있다는 것입니다. 프런트 엔드에.

이때 우리는 항상 이런 문제에 직면합니다:

1. 보스, 인터페이스 문서가 아직 출력되지 않아서 많은 일을 할 수 없습니다!

2. 백엔드 형님, 인터페이스가 작성됐나요? 테스트해보고 싶어요!

3. 테스트할 시간이 부족합니다. 버전이 곧 출시됩니다. 오늘은 해가 뜨는 걸 보셨나요?

온갖 일, 단 한 문장: 노사, 더 이상 당신을 믿지 마세요!

노드 등장 이후, 더 정확히 말하면 프런트엔드와 백엔드 분리 이후 프런트엔드는 더 이상 백엔드 인터페이스 개발에 의존할 필요가 없는 메커니즘이 시급히 필요합니다. 수년간의 개발 끝에 많은 유명 기업들이 이 분야에 대한 연구를 수행했습니다.

이제 드디어 실제 시뮬레이션 테스트를 구현할 수 있습니다. 예를 들어 오늘의 주인공 mockjs

자세한 사용법 설명

1. 먼저 src 디렉터리에 mock 폴더를 만들고, mock 메인 파일 index.js를 정의하고, 이 파일에 차단 라우팅 구성을 정의합니다.

2. 파일에 템플릿 함수 클래스를 정의합니다. 예:

/**
 * 定义本地测试接口，最好与正式接口一致，避免联调阶段修改工作量
 */
// 引入mockjs
import Mock from 'mockjs';
// 引入模板函数类
import record from './presc-record-api';
Mock.setup({
 timeout: 800, // 设置延迟响应，模拟向后端请求数据
});
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock(/\/api\/healthPlat\/getRecipe\/\w*\/\w*/, 'get', record.getRecipe);

3. main.js에 mock/index.js 파일을 도입합니다.

// 获取 mock.Random 对象
// 引入mockjs
import { Random } from 'mockjs';
import Utils from './Utils';
function getRecipe(req) {
 // mock一组数据
 const data = [];
 for (let i = 0; i 다음 작업은 모의 라우팅 및 템플릿 기능을 구성하는 것입니다. 즐거운 시간 보내세요! <p style="text-align: left;"></p><p style="text-align: left;"><span style="color: #ff0000"> 함정<strong></strong></span></p>여기서 vue-cli에서 Mockjs를 사용할 때의 함정을 소개합니다: <p style="text-align: left;"></p><p style="text-align: left;">1. 요청 경로에 변수가 포함되어 있습니다. 어떻게 해야 합니까? <strong></strong></p> 라우터를 사용하는 코더는 주소에 매개변수가 포함된 경로를 처리해야 하는 경우가 많다는 것을 알고 있습니다. 이때 경로를 일치시키려면 Mockjs에서 <p style="text-align: left;">정규식<a href="http://www.php.cn/wiki/1548.html" target="_blank">만 사용하면 됩니다. code</a> 코드는 다음과 같습니다.</p><p style="text-align: left;">Mock.mock(//api/healthPlat/getRecipeDetail/w*/w*/, 'get', Record.getRecipeDetail);<span style="text-decoration:underline;"></span>즉, 일반 문자 집합만 사용합니다. 변수에 우리 변수와 일치하도록 합니다. </p><p style="text-align: left;"></p>2. 콘솔의 네트워크에 내 요청이 표시되지 않는 이유는 무엇입니까? <p style="text-align: left;"></p><p style="text-align: left;">처음 테스트를 시작했을 때 네트워크를 확인했는데 요청이 없는 걸 보니 이상했어요! 스스로에게 몇 가지 질문을 던져보세요. <strong></strong></p><p style="text-align: left;">main.js </p>항목 파일<ol class=" list-paddingleft-2">에 mockjs 관련 구성 파일을 도입하는 이유는 무엇인가요? <li><p style="text-align: left;"><a href="http://www.php.cn/code/8553.html" target="_blank"></a>엔트리 파일은 webpack으로 컴파일해서 브라우저에서 실행하는거 아닌가요? </p></li>
<li><p style="text-align: left;">콘솔이 요청을 가로채지 못했다는 것은 서버로 전송된 요청을 가로채지 못했다는 뜻이죠? </p></li>
<li><p style="text-align: left;">이러한 질문으로 저는 소스 코드와 문서를 읽고 다음을 발견했습니다. </p></li>
</ol><p style="text-align: left;">소스 코드에서 먼저 요청이 Mockjs에 정의되어 있는지 확인하고, 그렇다면 가로채고 시뮬레이션된 요청 개체를 사용합니다. MockXMLHttpRequest 응답, 즉 XHR 요청이 전송되지 않습니다. </p><ol class=" list-paddingleft-2">
<li>
<p style="text-align: left;"> 그렇지 않으면 로컬 표준 XHR 개체를 사용하여 요청합니다. 이때 </p>요청 정보는 콘솔 네트워크</li>
<li><p style="text-align: left;">에서 볼 수 있습니다. <a href="http://www.php.cn/php/php-tp-solicitedmessage.html" target="_blank"></a> 따라서 해당 mockjs는 main.js 항목 파일에 도입됩니다. 구성 파일은 실제로 요청을 보내는 대신 브라우저에서 Mockjs를 추가하는 시뮬레이션 방법이지만 우리는 할 수 있습니다. 보기 위해 콘솔에 인쇄하십시오. </p></li>네티즌들은 현재로서는 실제 요청이라고 댓글을 달았습니다. 해당 실습을 여기서는 수행하지 않았으니 참고하시기 바랍니다. mock-server:</ol><p style="text-align: left;"></p>3. 템플릿 구문을 사용하면 반환된 데이터에 "|rules" 규칙이 포함되어 있어 구문 분석이나 값 검색이 실패하게 됩니다. <p style="text-align: left;"></p><p style="text-align: left;">刚开始的时候，我按照文档上说的模板语法进行配置，如：</p><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/2f23235be0427a404cff54073e140270-0.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p><p   style="max-width:90%">看到属性 code 居然带着规则一起返回了，我说我请求为啥没有解析成功啊，原来 res.code 一直是 undefined ，这是坑啊。<br>查看源码和可以搜到的网上示例发现：没有使用模板规则的现象，而是使用 mockjs 提供的<a href="http://www.php.cn/wiki/157.html" target="_blank">内置函数</a>来实现，如 .id() .cname() 等等方法。</p><p style="text-align: left;">于是我将mock<a href="http://www.php.cn/code/10546.html" target="_blank">相关文件</a>中 code 定义改成下面这样：</p><pre class="brush:php;toolbar:false">function setRes(req, options) {
 window.console.log(req.url);
 const { code = Random.int(0, 5) >= 1 ? 1 : 0, message, data = {}, totalCount = 100 } = options;
 const result = {
  code,
  message: message || ['失败', '错误', '异常'][Random.integer(0, 2)],
  data,
  totalCount,
 };
 window.console.log(result);
 return result;
}

刚开始的时候属性code是这样定义的—— 'code|1', true, ，后来改成了 code = Random.boolean()，发现生成 false 的概览太高了，不适合我们真实的场景。

想到我们只需要增加 code 为 1 的概率，于是本人使用 Random.int(0, 5) 随机生成一个整数，当这个整数大于等于1，我们将 code 设置为 1 ，其他情况为 0 。

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

4.模拟异步请求的过程，发现请求好像是瞬间完成，loading效果没生效

刚开始的时候，没有设置延迟响应，每次请求都好像是瞬间完成的，没有一步操作的那种等待感，没有看到loading罩层出现。
自己debug时，loading罩层是有的，于是想到：请求没有被延迟，而是被同步执行了。

想到lodash.debounce 函数有延迟网络请求、稀释事件、延迟执行的效果，于是将模板函数用 debounce 包裹起来，如下：

复制代码 代码如下:

Mock.mock('/api/healthPlat/chronicdisease', 'get', debounce(record.chronicdisease, 600));

结果出现有意思的事情：当请求比较频繁，在延迟时间内，本次请求得到的响应数据是上次请求的结果。这显然不是我们希望看到的，而且我们一般是用 debounce 的来稀释请求的，用在请求发送之后显然违背了我们的初衷。

翻阅 mockjs 文档，发现作者已经考虑了这个事情。哎，辛苦忙活了大半天，还是要好好看文档啊。具体如下：

Mock.setup({
 timeout: 800, // 设置延迟响应，模拟向后端请求数据
});

5. Mock 无法拦截带参数的 get 请求

刚开始时，发现设置的有些 get 请求总是请求不到 mock 的数据，而有些 get 请求能得到 mock 的数据，post 则不存在这样的问题。非常郁闷！

仔细 debug 时发现：get 请求带参数时失败，找不到路径；get 请求不带参数成功，路径没找到，获取到 mock 的数据；post 路径正确找到，成功得到 mock 数据。

这时突然意思到：get 请求的路径默认后面会加上参数，因此和设置的路径没有匹配上，导致路径没找到，请求失败。
于是本人将路径改成正则表达式，就好了。如：

// 刚开始字符串路径，带参数的 get 请求匹配失败
Mock.mock('/api/healthPlat/renewCancel', 'get', manage.renewCancel);

改成下面这样就好了：

// 正则表达式路径，带参数的 get 请求匹配成功
Mock.mock(/\/api\/healthPlat\/renewCancel/, 'get', manage.renewCancel);

但是实际开发过程中，发现上述正则表达式不够完备，如后续我们又另一个路径 /api/healthPlat/renewCancelAddr 也会匹配上述地址，这不是我们希望有的。

此时我们只需改进下正则表达式即可：

// 正则表达式路径，带参数的 get 请求匹配成功
Mock.mock(/\/api\/healthPlat\/renewCancel(|\?\S*)$/, 'get', manage.renewCancel);

即只有路径为 /api/healthPlat/renewCancel 的 get 请求才会匹配上述规则。

最后建议：get 请求都用正则表达式书写路径；post 字符串和正则都行；

总结

mock虽然存在以上所涉及的局限和问题，不过对于日常自测联调还是很有益处，个人觉得主要还是简单可行。当然本文所述方式，不仅仅局限在 vue-cli 中，其他框架中亦可按此法进行配置。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何修改npm全局安装模式路径

WebPack을 사용하여 vue 다중 페이지를 구성하는 방법

위 내용은 vue-cli 프로젝트에서 Mockjs를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!