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/cnpm2. Installieren Sie Express und Mockjs
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!
