Comment créer un cadre de simulation de données universel pour le front-end (tutoriel détaillé)

L'éditeur suivant partagera avec vous un tutoriel sur la création d'un cadre commun de simulation de données frontales à l'aide de mockjs et json-server. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un coup d'œil

Que vous fassiez du développement front-end au travail ou pendant votre temps libre, il est inévitable que l'équipe back-end n'ait pas terminé le développement de l'interface, mais le L'équipe front-end doit implémenter les fonctions correspondantes, ne demandez pas pourquoi, cela existe définitivement. Cet article a été réalisé pour cette raison. J'espère que cela sera utile à ceux qui ont des besoins à cet égard.

1. Package de composants utilisé

1. mockjs : utilisé pour simuler les résultats de la requête

2. json-server : Construire un serveur de simulation et simuler les interfaces d'opération liées au CRUD

2. Implémentation spécifique 1. Établir le projet et installer les dépendances correspondantes

cnpm install --save-dev mockjs json-server

La commande ci-dessus permet d'installer les dépendances. L'image ci-dessous montre les résultats du projet :

Instructions :

data : Ce dossier stocke les résultats de la requête simulée à l'aide de mockjs. Le dataProvider est suivi d'une simple

lib distincte : un fichier jquery inclus, utilisé pour simuler les requêtes ajax

<.>route : La table de routage du serveur json, utilisée pour simuler les opérations crud. Je ne sais pas comment implémenter plusieurs db.json

index.js : Fichier d'entrée du serveur de simulation

. test.html : test cors

2. Construire un serveur json-server de base

Cette partie du contenu est entièrement écrite conformément aux instructions officielles. de json-server Il convient de noter qu'il s'agit du paramétrage de static et noCors, qui se fait comme un middleware.

var JsonServer = require('json-server');
var path = require('path')

var Server = JsonServer.create();
var defaultMid = JsonServer.defaults({
 "noCors": false,
 "static": path.join(__dirname, "/lib")
});

var router = JsonServer.router(path.join(__dirname, '/route/db.json'));

Server.use(defaultMid);
Server.use(router);
Server.listen(8009);
console.log('start 8009.....');

3. Augmenter l'application de mockjs

Ici, mockjs n'est utilisé que comme pierre angulaire de la génération de données, tandis que dataProvider.js offre la possibilité d'unifier les interfaces d'accès externes. C'est-à-dire que les données de simulation sont séparées par module (équivalent au contrôleur dans MVC) et fonction (équivalent à l'action dans MVC).

Je ne sais pas si cette implémentation est réalisable (je l'utilise actuellement dans mon projet.) 3.1 Tout d'abord, créez le fichier emp.js dans le dossier data. Le contenu suivant a été écrit :

Voici l'utilisation de mockjs

var mockjs = require('mockjs');

module.exports = {
 list: function(){ 
 var data = mockjs.mock({
 'list|3':[
 {
  'id|+1':1
 }
 ]
 });
 return data.list;
 }
}

3.2 Utiliser dataProvider pour implémenter la collection de modules

3.3 Ajouter la méthode get en json, Utilisée pour obtenir des données

var emp = require('./emp');

var moduels = {
 emp: emp
}

module.exports = {
 execute: function(m, f, args){
 return moduels[m][f].call(moduels[m], args);
 }
}

Si vous souhaitez accéder à la Liste sous emp, l'adresse est : http://localhost:8009/data?moduleName=emp&funName=list

var provider = require('./data/dataProvider');

Server.get('/data',function(req,res){
 var moduleName = req.body ? req.body.moduleName : req.query.moduleName;
 var funName = req.body ? req.body.funName : req.query.funName;
 var arg = null;
 res.json(provider.execute(moduleName, funName));
 res.end();
});

4. Résumé1 Il ne peut y avoir qu'un seul fichier db.json pour le serveur json. Plusieurs entités de données peuvent être configurées ici. utilise get pour obtenir et poster pour écrire. Entrez le protocole http pour implémenter CRUD de données

En voyant cela, pensez-vous qu'il est si simple de construire un serveur de simulation de données, bien sûr, c'est uniquement pour webapi.

Téléchargez l'exemple de code

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment obtenir des effets élastiques en JavaScript

Comment implémenter des cookies inter-domaines dans axios

Comment utiliser JS pour implémenter le mouvement de trajectoire parabolique d'une petite balle

Comment utiliser JavaScript pour implémenter la traversée d'un arbre binaire

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!