Utilisez mockjs pour simuler les données back-end dans vue, vuecli et webpack

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. Cet article présente principalement des exemples d'utilisation de mockjs pour simuler des données back-end dans vue+vuecli+webpack. Il a une certaine valeur de référence et les amis intéressés peuvent s'y référer.

Les principales fonctions sont :

1. Générer 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écification grammaticale

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

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

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

Chacun L'attribut dans le 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. Il existe 7 formats pour générer des règles :

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. 'nom|compte .dcount' : value

7. 'name|+step' : value

4. La signification de la règle générée dépend du type. de la valeur de l'attribut.

5. La valeur de l'attribut peut contenir @ placeholder.

6. La valeur d'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 : générer de manière inversée une chaîne qui peut correspondre à l'expression régulière regexp . 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
}

Espace réservé aux données Spécification de définition 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 indiquer que la chaîne suivante est un espace réservé.

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

3. Étendez les espaces réservés personnalisés via Mock.Random.extend().

4. Les espaces réservés 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. , Présentez mockjs et jquery (utilisez ajax encapsulé jq pour envoyer la demande)

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

2. Utilisez mock 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 requête 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

La structure sous mon projet src est la suivante :

Je suis dans Un nouveau mockdata.js

a été créé dans des 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, la simulation. données qui doivent être utilisées Dans la page du composant vue, écrivez

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

pour référencer les données, et citez 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)
 })

Recommandations associées :

Tutoriel sur l'utilisation de Mock.js pour intercepter les requêtes AJAX dans Node.js environnement serveur

Utilisez mock.js pour rendre le développement front-end et back-end indépendant

Partage d'un simple script json simulé implémenté en PHP , tutoriel phpmockjson script_PHP

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!