Heim > Web-Frontend > js-Tutorial > Hauptteil

So verspotten Sie Backend-Daten mit Mockjs

php中世界最好的语言
Freigeben: 2018-04-17 10:20:57
Original
3096 Leute haben es durchsucht

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:

  1. Generieren Sie Simulationsdaten basierend auf Datenvorlagen.

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

  3. Ajax-Anfragen abfangen und simulieren.

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
Nach dem Login kopieren
Hinweis:

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

  2. Generierungsregeln sind optional.
  3. Generierungsregeln haben 7 Formate:
    1. 'name|min-max': Wert

    2. 'name|count': Wert
    3. 'name|min-max.dmin-dmax': Wert
    4. 'name|min-max.dcount': Wert
    5. 'name|count.dmin-dmax': Wert
    6. 'name|count.dcount': Wert
    7. 'name|+step': Wert

      Bedeutung der generierten Regeln Dies hängt von der Art des Attributwerts ab.

      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
}
Nach dem Login kopieren
Beispiel 2: Generieren Sie basierend auf dem

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"
}
Nach dem Login kopieren
Beispiel 3:

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

//Die Anzahl der Sterne beträgt 3

{
"string": "★★★"
}

Beispiel 4:

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

{

„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])

Hinweis:

  1. Verwenden Sie @, um die folgende Zeichenfolge als Platzhalter zu identifizieren.

  2. Platzhalter bezieht sich auf die Methode in Mock.Random.
  3. Mock.Random.extend() zum Erweitern benutzerdefinierter Platzhalter.

  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"
  }
}
Nach dem Login kopieren

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>
Nach dem Login kopieren
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'
  });
Nach dem Login kopieren
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":"辽阳市"}
});
Nach dem Login kopieren

Mockjs in Vuecli verwenden

Zuerst installieren

npm install mockjs
Nach dem Login kopieren

Ich habe eine neue Mockdata.js

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
}
Nach dem Login kopieren
Schreiben Sie als Nächstes auf der Vue-Komponentenseite der zu verwendenden Scheindaten

import mockdata from "@/scripts/mockdata.js";
Nach dem Login kopieren
wie folgt Um Daten zu zitieren, zitieren Sie einfach die Mockdata 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)
 })
Nach dem Login kopieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:



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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!