Maison > Article > interface Web > 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 :
Générer des données de simulation basées sur des modèles de données.
Générez des données de simulation basées sur un modèle HTML.
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 :
Le nom de l'attribut et la règle de génération sont séparés par une barre verticale |.
Les règles de génération sont facultatives.
Il existe 7 formats pour générer des règles :
'nom|min-max' : valeur
'nom|compte' : valeur
'nom|min-max.dmin-dmax' : valeur
'nom|min-max.dcount' : valeur
'nom|count.dmin-dmax' : valeur
'nom|compte .dcount' : value
'name|+step' : value
La signification de la règle générée dépend du type. de la valeur de l'attribut.
La valeur de l'attribut peut contenir @ placeholder.
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 :
Utilisez @ pour indiquer que la chaîne suivante est un espace réservé.
Placeholder fait référence à la méthode dans Mock.Random.
Étendez les espaces réservés personnalisés via Mock.Random.extend().
Les espaces réservés peuvent également référencer des attributs dans les modèles de données. Les espaces réservés
référenceront préférentiellement les attributs dans le modèle de données.
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 :
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!