Comment implémenter l'envoi de données en arrière-plan dans express+mockjs

Cet article présente principalement express+mockjs pour implémenter la fonction d'envoi de données en arrière-plan simulé. Les amis qui en ont besoin peuvent s'y référer

Avant-propos :

La plupart du temps, le front-end et le back-end seront développés en même temps. C'est-à-dire que lorsque nous aurons fini de développer la page, nous ne pourrons peut-être pas entrer immédiatement dans la phase de débogage commun. cette fois, afin de garantir l'efficacité de notre interface et le fonctionnement complet du code, des données simulées peuvent être nécessaires.

Méthode de simulation de données

1. Simuler les données d'arrière-plan via des variables js

Avantages : aucun serveur requis

Inconvénients : Nous devons créer beaucoup de variables, et en même temps utiliser les variables dans notre code efficace, et enfin les supprimer

2. Demander des fichiers json via ajax

Avantages : Seule la configuration est requise Chemin, vous pouvez y accéder et vous n'avez pas besoin de modifier beaucoup de code js lorsque vous entrez dans l'étape de débogage conjoint

Inconvénients : Ajax a des problèmes inter-domaines, et il ne peut généralement pas demander des fichiers locaux. Même Firefox ne peut pas accéder aux fichiers json dans différents répertoires de fichiers. Habituellement, vous devez démarrer le service via l'IDE ou manuellement

3. Utilisez nodejs pour écrire un service spécifiquement pour l'envoi de requêtes, qui n'inclut pas les affaires. logique

Avantages : Le code frontal n'a besoin que d'entrer dans l'étape de débogage conjointe. Vous devez modifier un basePath. Tous les noms d'interface peuvent être cohérents avec les chemins convenus. Vous pouvez tester les requêtes de publication et simuler l'environnement réseau.

Inconvénients : Vous devez écrire vous-même un backend

1 et 2 Cette méthode de simulation de données convient aux démos, mais s'il s'agit d'un projet en ligne, nous recommandons quand même de construire un backend de nœud en vous-même

1. Préparez l'environnement du nœud, npm/cnpm

2 .Installez express et mockjs

3. server.js et introduire les modules pertinents

let express = require('express'); //引入express模块
let Mock = require('mockjs');  //引入mock模块
let app = express();    //实例化express

4. Configurer le routage de l'interface et configurer le port de surveillance

/**
 * 配置test.action路由
 * @param {[type]} req [客户端发过来的请求所带数据]
 * @param {[type]} res [服务端的相应对象，可使用res.send返回数据，res.json返回json数据，res.down返回下载文件]
 */
app.all('/test.action', function(req, res) {
 res.send('hello world');
});
/**
 * 监听8090端口
 */
app.listen('8090');

À ce stade, nous accédons directement à http://localhost:8090/test .action, et vous pouvez voir le texte 'hello world' directement sur l'interface

5. Utilisez mockjs pour renvoyer les données au format json

app.all('/test.action', function(req, res) {
 /**
  * mockjs中属性名‘|'符号后面的属性为随机属性，数组对象后面的随机属性为随机数组数量，正则表达式表示随机规则，+1代表自增
  */
 res.json(Mock.mock({
  "status": 200,
  "data|1-9": [{
   "name|5-8": /[a-zA-Z]/,
   "id|+1": 1,
   "value|0-500": 20
  }]
 }));
});

À ce moment-là, lorsque nous accédons à la page à nouveau des données, nous pouvons obtenir des données json aléatoires

6. Créez le dossier de données simulées testData et créez le fichier json de données simulées (remarque : les expressions régulières ne peuvent pas être utilisées dans les fichiers json et les attributs d'objet doivent être doubles. chaînes entre guillemets)

7. Parcourez le fichier de données de simulation et générez l'itinéraire correspondant

/*readdir读取目录下所有文件*/
fs.readdir('./testData', function(err, files) {
 if(err) {
  console.log(err);
 } else {
  /*成功读取文件，取得文件名，拼接生成对应action，监听对应接口并返回对应文件数据*/
  files.forEach(function(v, i) {
   app.all(`/${v.replace(/json/, 'action')}`, function(req, res) {
    fs.readFile(`./testData/${v}`, 'utf-8', function(err, data) {
     if(err) {
      console.log(err);
     } else {
      res.json(Mock.mock(JSON.parse(data)));
     }
    })
   })
  })
 }
})

À ce stade, notre serveur de nœuds a été configuré avec succès à l'aide de node server.js. exécutez le serveur, nous pouvons accéder directement à l'interface sur le front-end. Cependant, si nous générons simplement le backend et que la page front-end n'est pas accessible via le backend, il y aura des problèmes inter-domaines si vous devez le résoudre. , vous pouvez ajouter des requêtes inter-domaines en arrière-plan

/*为app添加中间件处理跨域请求*/
app.use(function(req, res, next) {
 res.header("Access-Control-Allow-Origin", "*");
 res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
 res.header("Access-Control-Allow-Headers", "X-Requested-With");
 res.header('Access-Control-Allow-Headers', 'Content-Type');
 next();
});

ps : Si mock doit utiliser des expressions régulières, veuillez configurer le routage séparément pour le traitement. Pour plus d'instructions sur express et mockjs, veuillez consulter le site officiel. api

Ce qui précède, c'est moi, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Comment convertir les chemins en encodage base64 en Javascript

Interprétation détaillée de la compatibilité ie9 dans VUE

Comment configurer l'échafaudage vue à l'aide de Parcel (tutoriel détaillé)

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!