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:
Simulationsdaten basierend auf Datenvorlagen generieren.
Generieren Sie Simulationsdaten basierend auf einer HTML-Vorlage.
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:
Der Attributname und die Generierungsregel werden durch einen vertikalen Strich | getrennt.
Generierungsregeln sind optional.
Es gibt 7 Formate zum Generieren von Regeln:
'Name|Min-Max': Wert
'name|count': Wert
'name|min-max.dmin-dmax': Wert
' name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count .dcount': value
'name|+step': value
Die Bedeutung der generierten Regel hängt vom Typ ab des Attributwerts Sicher.
Der Attributwert kann einen @-Platzhalter enthalten.
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:
Verwenden Sie @, um anzugeben, dass die folgende Zeichenfolge ein Platzhalter ist.
Platzhalter bezieht sich auf die Methode in Mock.Random.
Erweitern Sie benutzerdefinierte Platzhalter durch Mock.Random.extend().
Platzhalter können auch auf Attribute in Datenvorlagen verweisen.
Platzhalter verweisen vorzugsweise auf Attribute in der Datenvorlage.
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
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!
