So implementieren Sie das Senden von Hintergrunddaten in Express+MockJS

In diesem Artikel werden hauptsächlich Express + Mockjs zur Implementierung der Funktion zum Senden simulierter Hintergrunddaten vorgestellt. Freunde, die sie benötigen, können darauf verweisen

Vorwort:

Meistens werden Front-End und Back-End gleichzeitig entwickelt. Das heißt, wenn wir mit der Entwicklung der Seite fertig sind, können wir möglicherweise nicht sofort mit der gemeinsamen Debugging-Phase beginnen Dieses Mal sind möglicherweise Scheindaten erforderlich, um die Wirksamkeit unserer Schnittstelle und die vollständige Funktion des Codes sicherzustellen.

Simulationsdatenmethode

1. Simulieren Sie Hintergrunddaten durch js-Variablen

Vorteile: Kein Server erforderlich

Nachteile: Wir müssen viele Variablen erstellen und gleichzeitig die Variablen in unserem effektiven Code verwenden und sie schließlich löschen

2. JSON-Dateien über Ajax anfordern

Vorteile : Es ist nur die Konfiguration des Pfads erforderlich, Sie können darauf zugreifen und müssen nicht viel JS-Code ändern, wenn Sie in die gemeinsame Debugging-Phase eintreten

Nachteile: Ajax weist domänenübergreifende Probleme auf und kann dies normalerweise nicht Lokale Dateien anfordern. Selbst Firefox kann nicht auf JSON-Dateien in verschiedenen Dateiverzeichnissen zugreifen. Normalerweise müssen Sie den Dienst über die IDE starten.

3. Verwenden Sie nodejs, um einen Dienst speziell zum Senden von Anforderungen zu schreiben Logik

Vorteile: Der Front-End-Code muss nur in die gemeinsame Debugging-Phase eintreten. Ein Basispfad muss geändert werden. Alle Schnittstellennamen können mit den vereinbarten Pfaden übereinstimmen und Netzwerkumgebungen simuliert werden 🎜>

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

So konvertieren Sie Pfade in Base64-Codierung in Javascript

Detaillierte Interpretation der IE9-Kompatibilität in VUE

So konfigurieren Sie Vue-Gerüst mithilfe von Parcel (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Senden von Hintergrunddaten in Express+MockJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!