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 🎜>

Nachteile: Sie müssen selbst ein Backend schreiben

1 und 2 Diese Methode der Datensimulation eignet sich für Demos, wenn es sich jedoch um ein Online-Projekt handelt, empfehlen wir dennoch, selbst ein Knoten-Backend zu erstellen

1. Bereiten Sie die Knotenumgebung vor, npm/cnpm

2. Installieren Sie Express und Mockjs

3 .js und stellen Sie verwandte Module vor

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

4. Konfigurieren Sie das Schnittstellenrouting und legen Sie Überwachungsports fest

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

Zu diesem Zeitpunkt greifen wir direkt auf http://localhost:8090/test.action und Sie zu kann den Text „Hallo Welt“ direkt auf der Benutzeroberfläche sehen

5. Verwenden Sie Mockjs, um formatierte JSON-Daten zurückzugeben

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

Zu diesem Zeitpunkt können wir erneut auf die Seitendaten zugreifen Zufällige JSON-Daten

6. Erstellen Sie den Ordner „testData“ für simulierte Daten und die JSON-Datei für simulierte Daten (Hinweis: In der JSON-Datei können keine regulären Ausdrücke verwendet werden und die Objektattribute müssen Zeichenfolgen in doppelte Anführungszeichen sein)

7. Durchlaufen Sie die Simulationsdatendatei und generieren Sie die entsprechende Route

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

Zu diesem Zeitpunkt wurde unser Knotenserver erfolgreich erstellt. Wenn server.js den Server ausführt, können wir direkt auf die Schnittstelle zugreifen Wenn wir jedoch nur das Backend generieren und nicht über das Backend auf die Front-End-Seite zugegriffen wird, treten domänenübergreifende Probleme auf. Wenn wir diese lösen müssen, können wir domänenübergreifende Anforderungen im Backend hinzufügen

/*为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: Wenn der Mock reguläre Ausdrücke verwenden muss, konfigurieren Sie das Routing bitte separat für die Verarbeitung. Weitere Anweisungen zu Express und Mockjs finden Sie auf der offiziellen Website-API

Das Obige ist, was ich Für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

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!