Dieses Mal zeige ich Ihnen, wie Sie Mockjs zum Simulieren von Back-End-Daten verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Mockjs zum Simulieren von Back-End-Daten? sehen.
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. Seine Hauptfunktionen sind:Grammatikspezifikationen
Die Syntaxspezifikation von Mock.js besteht aus zwei Teilen: 1. Datenvorlagendefinition (DTD) 2. Datenplatzhalterdefinition (DPD)
Datenvorlagendefinitionsspezifikation DTD
Jedes Attribut in der Datenvorlage besteht aus 3 Teilen: Attributname, Generierungsregel, Attributwert:// 属性名 name // 生成规则 rule // 属性值 value 'name|rule': value
Der Attributwert gibt auch den Anfangswert und den Typ des Endwerts an.
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
}regulären Ausdruck regexp umgekehrt eine Zeichenfolge, die damit ü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"
}//string表示属性名
//3表示后面属性值重复次数
Mock.mock({
"string|3": "★"
}){
"string": "★★★"
}
// num为属性名
// 生成一个大于等于1，小于等于100 的整数，属性值100只是用来确定类型
Mock.mock({
"num|1-100": 100
}) „Nummer“: 8
}
Datenplatzhalterdefinitionsspezifikation 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])
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
1. Führen Sie zunächst Mockjs und JQuery ein (verwenden Sie hier 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>
//这里的第一个参数http://api.cn 就是下面ajax请求的url，mock对该url进行拦截'
//这里的第二个参数就是template数据模板，mock会返回模板生成的数据
Mock.mock('http://api.cn', {
'name': '@name',
'age|1-100': 100,
'city': '@city'
});$.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
Zuerst installierennpm install mockjs
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
}import mockdata from "@/scripts/mockdata.js";
new Promise((resolve, reject) => {
that.foods =mockdata.data.foods; //直接点出你生成的假数据对象即可
that.foodsListLen = that.foods.length;
}).catch(err=>{
console.log(err)
})Das obige ist der detaillierte Inhalt vonSo verspotten Sie Backend-Daten mit Mockjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
