Beispiel für die gemeinsame Nutzung von Express- und Mockjs zur Implementierung einer simulierten Funktion zum Senden von Hintergrunddaten

Meistens werden Front-End und Back-End gleichzeitig entwickelt. Das heißt, wenn wir mit der Entwicklung der Seite fertig sind, können wir zu diesem Zeitpunkt möglicherweise nicht sofort in die gemeinsame Debugging-Phase eintreten Um die Wirksamkeit unserer Schnittstelle und die vollständige Funktion des Codes sicherzustellen, benötigen wir möglicherweise simulierte Daten. 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.

Simulationsdatenmethode

1. Hintergrunddaten über js-Variablen simulieren

Vorteile: Kein Server erforderlich

Nachteile: Es müssen viele Variablen erstellt werden , und verwenden Sie gleichzeitig die Variable in unserem gültigen Code und löschen Sie sie schließlich

2. Fordern Sie die JSON-Datei über Ajax an

Vorteile: Sie müssen nur den Pfad konfigurieren, um darauf zuzugreifen , und es besteht keine Notwendigkeit, es zu ändern, wenn die gemeinsame Debugging-Phase beginnt. Eine große Menge an JS-Code

Nachteile: Ajax hat domänenübergreifende Probleme und kann normalerweise keine lokalen Dateien anfordern. Selbst Firefox kann nicht auf unterschiedliche JSON-Dateien zugreifen Dateiverzeichnisse. Normalerweise müssen Sie den Dienst manuell über die IDE oder selbst starten

3. Verwenden Sie nodejs, um einen Dienst speziell zum Senden von Anfragen zu schreiben, ohne Geschäftslogik

Der Endcode tritt in die gemeinsame Debugging-Phase ein, Sie müssen nur einen BasePath ändern, und alle Schnittstellennamen können gleich sein. Der vereinbarte Pfad bleibt konsistent, Sie können Post-Anfragen testen und die Netzwerkumgebung simulieren

Nachteile: Sie Sie müssen selbst ein Backend schreiben

Die beiden Methoden zur Simulation von Daten 1 und 2 eignen sich für die Demo. 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

Installieren Sie Express und Mockjs

3. Erstellen Sie die Serverdatei server.js und führen Sie relevante Module ein 🎜>

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

4. Konfigurieren Sie das Schnittstellenrouting und legen Sie den Überwachungsport 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 können wir direkt auf http://localhost:8090/test.action zugreifen Text „Hallo Welt“ direkt auf der Benutzeroberfläche

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

Wenn wir zu diesem Zeitpunkt erneut auf die Seitendaten zugreifen, können wir eine zufällige Ausgabe erhalten 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 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 mit node server.js erstellt und ausgeführt. Auf dem Server können wir direkt auf die Schnittstelle zugreifen Das Front-End, aber wenn wir nur das Backend generieren und nicht über das Backend auf die Front-End-Seite zugegriffen wird, treten domänenübergreifende Probleme auf. Wenn es gelöst werden muss, können wir domänenübergreifende Anforderungen im Backend hinzufügen 🎜>

ps: Wenn 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

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

Verwandte Empfehlungen :

Detaillierte Erklärung, wie jQuery Ajax Hintergrunddaten an den Beispielcode der Front-End-Tabelle zurückgibt

Teilen Sie einen Code, der jQuery Ajax verwendet Fordert Hintergrunddaten an und empfängt sie im Vordergrund

Verwenden Sie Angular, um lokale Localstorage-Daten in Echtzeit abzurufen und so den Effekt einer Simulation der Hintergrunddatenanmeldung zu erzielen