Verwenden Sie Mockjs, um Back-End-Daten in Vue, Vuecli und Webpack zu simulieren

Mit Mockjs können Sie Daten im Voraus simulieren. Voraussetzung ist, dass die Datenschnittstelle und die Art der Daten mit dem Backend vereinbart wurden. Sie können Mock verwenden, um die gewünschten Daten zu generieren und so während der Entwicklung eine Front-End- und Back-End-Trennung zu erreichen. In diesem Artikel werden hauptsächlich Beispiele für die Verwendung von Mockjs zur Simulation von Back-End-Daten in vue+vuecli+webpack vorgestellt. Es hat einen gewissen Referenzwert und interessierte Freunde können darauf verweisen.

Die Hauptfunktionen sind:

1. Simulationsdaten basierend auf Datenvorlagen generieren.

2. Generieren Sie Simulationsdaten basierend auf einer HTML-Vorlage.

3. Ajax-Anfragen abfangen und simulieren.

Grammatikspezifikation

Die Syntaxspezifikation von Mock.js umfasst zwei Teile:

1 Definitionsspezifikation (Datenvorlagendefinition, DTD)
2. Datenplatzhalterdefinition (DPD)

Datenvorlagendefinitionsspezifikation DTD

Jeweils Das Attribut in der Datenvorlage besteht aus drei Teilen: Attributname, Generierungsregel, Attributwert:

// 属性名  name
// 生成规则 rule
// 属性值  value
'name|rule': value

Hinweis:

1. Der Attributname und die Generierungsregel werden durch einen vertikalen Strich | getrennt.

2. Generierungsregeln sind optional.

3. Es gibt 7 Formate zum Generieren von Regeln:

1. 'Name|Min-Max': Wert

2. 'name|count': Wert

3. 'name|min-max.dmin-dmax': Wert

4. ' name|min-max.dcount': value

5. 'name|count.dmin-dmax': value

6. 'name|count .dcount': value

7. 'name|+step': value

4. Die Bedeutung der generierten Regel hängt vom Typ ab des Attributwerts Sicher.

5. Der Attributwert kann einen @-Platzhalter enthalten.

6. Der Attributwert gibt auch den Anfangswert und den Typ des Endwerts an.

Beispiel 1:

Mock.mock({
  'number1|1-100.1-10': 1,
  'number2|123.1-10': 1,
  'number3|123.3': 1,
  'number4|123.10': 1.123
})
// =>
{
  "number1": 12.92,
  "number2": 123.51,
  "number3": 123.777,
  "number4": 123.1231091814
}

Beispiel 2: Erzeugen Sie umgekehrt eine Zeichenfolge, die mit dem regulären Ausdruck regexp übereinstimmen kann. Wird zum Generieren benutzerdefinierter formatierter Zeichenfolgen verwendet:

Mock.mock({
  'regexp1': /[a-z][A-Z][0-9]/,
  'regexp2': /\w\W\s\S\d\D/,
  'regexp3': /\d{5,10}/
})
// =>
{
  "regexp1": "pJ7",
  "regexp2": "F)\fp1G",
  "regexp3": "561659409"
}

Beispiel 3:

//string表示属性名
//3表示后面属性值重复次数
 Mock.mock({
 "string|3": "★"
})

Ergebnis:

//Die Anzahl der Sterne beträgt 3
{
"string": "★★★"
}

Beispiel 4:

// num为属性名
// 生成一个大于等于1，小于等于100 的整数，属性值100只是用来确定类型
Mock.mock({
 "num|1-100": 100
})

Ergebnis:

{
"Nummer": 8
}

Datenplatzhalter Definition Spezifikation DPD

Der Platzhalter nimmt nur eine Position in der Attributwertzeichenfolge ein und erscheint nicht im endgültigen Attributwert.

Das Format des Platzhalters ist:

@placeholder
@placeholder(parameter[, Parameter])

Hinweis:

1. Verwenden Sie @, um anzugeben, dass die folgende Zeichenfolge ein Platzhalter ist.

2. Platzhalter bezieht sich auf die Methode in Mock.Random.

3. Erweitern Sie benutzerdefinierte Platzhalter durch Mock.Random.extend().

4. Platzhalter können auch auf Attribute in Datenvorlagen verweisen.

5. Platzhalter verweisen vorzugsweise auf Attribute in der Datenvorlage.

6. Platzhalter unterstützt relative Pfade und absolute Pfade.

Mock.mock({
  name: {
    first: '@FIRST',
    middle: '@FIRST',
    last: '@LAST',
    full: '@first @middle @last'
  }
})
// =>
{
  "name": {
    "first": "Charles",
    "middle": "Brenda",
    "last": "Lopez",
    "full": "Charles Brenda Lopez"
  }
}

Beispiel für die Anforderung gefälschter Daten über jQuery Ajax

Zuerst , Führen Sie Mockjs und JQuery ein (verwenden Sie JQ-gekapseltes Ajax, um die Anfrage zu senden)

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>

2. Verwenden Sie Mock, um eine Datenvorlage zu generieren

//这里的第一个参数http://api.cn 就是下面ajax请求的url，mock对该url进行拦截'
//这里的第二个参数就是template数据模板，mock会返回模板生成的数据
   Mock.mock('http://api.cn', {
    'name': '@name',
    'age|1-100': 100,
    'city': '@city'
  });

3.ajax sendet Anfrage und Ergebnis

$.ajax({
  url: 'http://api.cn',
  dataType: 'json'
}).done(function(data, status, xhr) {
  console.log( JSON.stringify(data)); //{"name":"Mark Lee","age":4,"city":"辽阳市"}
});

Mockjs in Vuecli verwenden

Erste Installation

npm install mockjs

Die Struktur unter meinem Projekt src ist wie folgt:

I bin Ein neues Mockdata.js

wurde in Skripten erstellt. Der Inhalt darin ist wie folgt:

import Mock from 'mockjs';
const data = Mock.mock({
 // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
 'foods|10-50': [{
  'name': "@ctitle(2,10)",
  "img": "@image('600x600',#b7ef7c)",
  "brief": "@csentence(1,50)",
  "price|0-20.0-2": 1,
  "num": 0,
  "minusFlag": true,
  "time": "@time",
  "peisongfei|0-100.0-2": 1,
  "limit|0-50": 1
 }],
 "sales|10-50": [{
  // 属性 id 是一个自增数，起始值为 1，每次增 1
  'name': "@ctitle(2,10)",
  "img": "@image('600x600',#b7ef7c)",
  "brief": "@csentence(1,50)",
  "price|0-100.0-2": 1,
  "num": 0,
  "minusFlag": true,
  "time": "@time",
  "peisongfei|0-100.0-2": 1,
  "limit|0-100": 1
 }]
});

export default {
 data
}

Als nächstes die Mock-Daten das muss verwendet werden Schreiben Sie auf der Vue-Komponentenseite

import mockdata from "@/scripts/mockdata.js";

, um auf die Daten zu verweisen, und zitieren Sie die Mockdata gerade direkt in Ihren Methoden. Zum Beispiel:

new Promise((resolve, reject) => {
  that.foods =mockdata.data.foods; //直接点出你生成的假数据对象即可
  that.foodsListLen = that.foods.length;
 }).catch(err=>{
   console.log(err)
 })

Verwandte Empfehlungen:

Tutorial zur Verwendung von Mock.js zum Abfangen von AJAX-Anfragen in Node.js Serverumgebung

Verwenden Sie Mock.js, um Front-End-Entwicklung und Back-End unabhängig zu machen

Freigabe eines einfachen Mock-JSON-Skripts, das in PHP implementiert ist , phpmockjson script_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonVerwenden Sie Mockjs, um Back-End-Daten in Vue, Vuecli und Webpack zu simulieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!