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

4. Configurer le routage de l'interface et définir le port d'écoute

/**
 * 配置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 moment-là, lorsque nous accédons directement à http://localhost:8090/test.action, nous pouvons voir le textez 'hello world' directement sur l'interface

5. Utilisez mockjs pour renvoyer des données json formatées

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 à nouveau aux données de la page, nous pouvons obtenir un résultat aléatoire json data

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 le fichier json et les attributs d'objet doivent être des 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é construit et exécuté avec succès à l'aide du serveur node server.js, nous pouvons accéder à l'interface directement sur le front-end, mais 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 cela doit être résolu, nous pouvons ajouter des requêtes inter-domaines dans le backend <.>

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 l'API du site officiel

/*为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. :

Explication détaillée de la façon dont jquery ajax renvoie les données d'arrière-plan à l'exemple de code de la table frontale

Partager un morceau de code que jQuery Ajax demande des données d'arrière-plan et reçoit au premier plan

Utilisez Angular pour obtenir des données de stockage local locales en temps réel afin d'obtenir l'effet de simulation de connexion aux données d'arrière-plan