Comment simuler les données backend à l'aide de mockjs

Cette fois, je vais vous montrer comment utiliser mockjs pour simuler des données back-end. Quelles sont les précautions pour utiliser mockjs pour simuler des données back-end. Ce qui suit est un cas pratique, prenons un. regarder.

En utilisant mockjs, vous pouvez simuler des données à l'avance. Le principe est que l'interface de données et le type de données ont été convenus avec le backend. Vous pouvez utiliser mock pour générer les données souhaitées, réalisant ainsi une séparation front-end et back-end pendant le développement.

Ses principales fonctions sont :

1. Générez des données de simulation basées sur des modèles de données.

2. Générez des données de simulation basées sur un modèle HTML.

3. Interceptez et simulez les requêtes ajax.

Spécifications grammaticales

La spécification syntaxique de Mock.js comprend deux parties :

1. Définition du modèle de données (DTD)
2. Définition de l'espace réservé aux données (DPD)

Spécification de définition de modèle de données DTD

Chaque attribut du modèle de données se compose de 3 parties : nom de l'attribut, règle de génération, valeur de l'attribut :

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

Remarque :

1. Le nom de l'attribut et la règle de génération sont séparés par une barre verticale |.

2. Les règles de génération sont facultatives.

3. Les règles de génération ont 7 formats :

1. 'nom|min-max' : valeur

2. 'nom|compte' : valeur

3. 'nom|min-max.dmin-dmax' : valeur

4. 'nom|min-max.dcount' : valeur

5. 'nom|count.dmin-dmax' : valeur

6. 'name|count.dcount' : valeur

7. 'name|+step' : valeur

   Signification des règles générées Cela dépend du type de valeur d'attribut.

   La valeur de l'attribut peut contenir @ placeholder.
   La valeur de l'attribut spécifie également la valeur initiale et le type de la valeur finale.

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

Exemple 2 : sur la base de l'expression rationnelle expression régulière, générez à l'envers une chaîne qui peut y correspondre. Utilisé pour générer des chaînes formatées personnalisées :

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

Exemple 3 :

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

Résultat :

//Le nombre d'étoiles est de 3
{
"string": "★★★"
}

Exemple 4 :

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

Résultat :

{
"numéro": 8
}

Spécification de définition d'espace réservé aux données DPD

L'espace réservé occupe uniquement une position dans la chaîne de valeur d'attribut et n'apparaît pas dans la valeur d'attribut finale.

Le format de l'espace réservé est :

@placeholder
@placeholder(paramètre [, paramètre])

Remarque :

1. Utilisez @ pour identifier la chaîne suivante comme espace réservé.

2. Placeholder fait référence à la méthode dans Mock.Random.

3. Mock.Random.extend() pour étendre les espaces réservés personnalisés. Les espaces réservés

4. peuvent également référencer des attributs dans les modèles de données. Les espaces réservés

5. référenceront préférentiellement les attributs dans le modèle de données.

6. l'espace réservé prend en charge les chemins relatifs et les chemins absolus.

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

Exemple de demande de fausses données via jQuery ajax

1. Tout d'abord, introduisez mockjs et jquery (utilisez ajax encapsulé jq pour envoyer la requête)

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

2. Utilisez une simulation pour générer un modèle de données

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

3.ajax envoie la demande et le résultat

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

Utiliser mockjs dans vuecli

Première installation

npm install mockjs

J'ai créé un nouveau mockdata.js

dans les scripts Le contenu à l'intérieur est le suivant :

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
}

Ensuite, dans la page du composant vue des données fictives qui doivent être utilisées, écrivez

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

comme ceci Pour citer des données, citez simplement directement les mockdata tout à l'heure dans vos méthodes. Par exemple :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!