Exemple de partage d'express et de mockjs pour implémenter la fonction d'envoi de données en arrière-plan simulée

La plupart du temps, le front-end et le back-end seront développés en même temps. Autrement dit, 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. , afin de garantir l'efficacité de notre interface et le fonctionnement complet du code , nous pouvons avoir besoin de données simulées. Cet article présente principalement express+mockjs pour implémenter la fonction d'envoi de données en arrière-plan simulée. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Méthode de simulation de données

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

Avantages : aucun serveur n'est requis

Inconvénients : nécessité de créer beaucoup de variables , et en même temps Utilisez la variable dans notre code valide, et enfin supprimez-la

2. Demandez le fichier json via ajax

Avantages : Il vous suffit de configurer le chemin pour y accéder , et il n'est pas nécessaire de le modifier lors de l'entrée dans la phase de débogage commun. Une grande quantité de code js

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

3. Utilisez nodejs pour écrire un service spécifiquement pour l'envoi de requêtes, sans logique métier

Avantages : Lorsque le front- le code final entre dans la phase de débogage commun, il vous suffit de modifier un basePath, et tous les noms d'interface peuvent être les mêmes que Le chemin convenu reste cohérent, vous pouvez tester les demandes de publication et simuler l'environnement réseau

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

Les deux méthodes de simulation des données 1 et 2 conviennent à la démonstration, mais s'il s'agit d'un projet en ligne, nous vous recommandons toujours de créer vous-même un backend de nœud

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

2. Installez express et mockjs

3. Créez le fichier serveur server.js et introduisez les modules pertinents. 🎜>

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

/**
 * 配置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');

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
  }]
 }));
});

/*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)));
     }
    })
   })
  })
 }
})

/*为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();
});

Recommandations associées. :