So verwenden Sie Mockjs im Vue-Cli-Projekt

Dieses Mal zeige ich Ihnen, wie Sie Mockjs im Vue-Cli-Projekt verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Mockjs im Vue-Cli-Projekt? sehen.

Hintergrund

Front-End In der frühen jQuery-Ära wurden Front-End-Funktionen und Back-End-Engineering grundsätzlich kombiniert war häufig Das Webapp-Verzeichnis unter dem Maven-Projekt enthält verschiedene statische Front-End-Ressourcendateien.

Zu diesem Zeitpunkt stoßen wir immer auf diese Probleme:

1. Chef, das Schnittstellendokument wurde noch nicht ausgegeben, daher kann ich nicht viel arbeiten!

2. Backend-Typ, hast du die Schnittstelle schon geschrieben? Ich möchte sie testen!

3. Es ist nicht genug Zeit zum Testen und die Version steht kurz vor der Veröffentlichung. Habe ich heute den Sonnenaufgang beobachtet?

Alles Mögliche, nur ein Satz: Arbeit und Management, rechnen Sie nicht mehr mit Ihnen!

Nach dem Aufkommen von Knoten, genauer gesagt nach der Trennung von Front-End und Back-End, benötigt das Front-End dringend einen Mechanismus, der nicht mehr auf die Entwicklung der Back-End-Schnittstelle angewiesen ist. Nach mehreren Jahren der Entwicklung haben viele große Namen auf diesem Gebiet geforscht.

Jetzt können wir endlich echte Simulationstests durchführen. Zum Beispiel die heutigen Protagonisten-Mockjs

Detaillierte Verwendungsanweisungen

1. Erstellen Sie zunächst einen Mock-Ordner im src-Verzeichnis und definieren Sie die Mock-Hauptdatei index.js. Definieren Sie die Interception-Routing-Konfiguration in dieser Datei.

/**
 * 定义本地测试接口，最好与正式接口一致，避免联调阶段修改工作量
 */
// 引入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);

2. Definieren Sie die Vorlagenfunktionsklasse in der angegebenen Datei main.js-Datei;

// 获取 mock.Random 对象
// 引入mockjs
import { Random } from 'mockjs';
import Utils from './Utils';
function getRecipe(req) {
 // mock一组数据
 const data = [];
 for (let i = 0; i < 10; i += 1) {
  const o = {
   recipeId: Random.guid(),
   billId: Random.string(10),
   orgId: Random.string(&#39;number&#39;, 8, 10),
   viewName: Random.cword(4, 16), // 随机生成任意名称
   personName: Random.cname(),
   reason: Random.csentence(10, 32),
  };
  data.push(o);
 }
 // 返回响应数据对象
 return Utils.setRes(req, {
  data: {
   idCard: Random.id(), // 随机
   details: data,
  },
  totalCount: 20,
 });
}
export default {
 getRecipe,
};

Der nächste Schritt besteht darin, Ihre Scheinrouting- und Vorlagenfunktionen zu konfigurieren. Viel Spaß!

FallstrickeHier stelle ich die Fallstricke bei der Verwendung von Mockjs in vue-cli vor:

Programmierer, die Router verwendet haben, wissen, dass wir uns häufig mit Routen befassen müssen, die Parameter in der Adresse enthalten. Derzeit müssen wir in Mockjs nur

verwenden Passen Sie den Pfad an. Abgeschlossen, Beispiel:

Der Code lautet wie folgt:Mock.mock(//api/healthPlat/getRecipeDetail/w*/w */, 'get', record.getRecipeDetail);

Das heißt, wir verwenden nur reguläre Zeichensätze in Variablen, um unsere Variablen abzugleichen.

Als ich zum ersten Mal mit dem Testen begann, habe ich das Netzwerk überprüft und die Anfrage nicht gesehen, was seltsam war! Stellen Sie sich einfach ein paar Fragen:

Warum werden Mockjs-bezogene Konfigurationsdateien in die
1. Eintragsdatei

   von main.js eingeführt?

Werden die Eintragsdateien nicht im Webpack kompiliert und dann im Browser ausgeführt?
Die Konsole hat die Anfrage nicht abgefangen, das heißt, sie hat die an den Server gesendete Anfrage nicht abgefangen, oder?
Bei diesen Fragen habe ich den Quellcode und die Dokumentation gelesen und Folgendes gefunden:

Im Quellcode zunächst prüfen, ob die Anfrage definiert ist in Mockjs. Dann wird das Scheinanforderungsobjekt MockXMLHttpRequest zum Antworten verwendet. Das heißt, es wird zu diesem Zeitpunkt keine XHR-Anfrage gesendet.
Andernfalls verwenden Sie den lokalen Standard-XHR Objekt, um die Anfrage zu stellen. Zu diesem Zeitpunkt können Sie die Anfrage im Konsolennetzwerk stellen. Siehe
2. Informationen anfordern

Daher müssen Sie die relevanten Konfigurationsdateien von Mockjs einführen Die Eingabedatei main.js bedeutet, dass die Simulation von Mockjs zur Front-End-Codemethode hinzugefügt wird. Sie wird im Browser ausgeführt, anstatt tatsächlich eine Anfrage zu senden, aber wir können sie zur Anzeige auf der Konsole ausdrucken.

Netizens haben angegeben, dass Sie Mockjs auf dem Server verwenden können. Wenn Sie interessiert sind, können Sie die entsprechenden Informationen in der Konsole anzeigen , Sie können sich auf Mock-Server beziehen:

刚开始的时候，我按照文档上说的模板语法进行配置，如：

看到属性 code 居然带着规则一起返回了，我说我请求为啥没有解析成功啊，原来 res.code 一直是 undefined ，这是坑啊。
查看源码和可以搜到的网上示例发现：没有使用模板规则的现象，而是使用 mockjs 提供的内置函数来实现，如 .id() .cname() 等等方法。

于是我将mock相关文件中 code 定义改成下面这样：

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;
}

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

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

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

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