Front-End-Projekte verwenden alle die Back-End-Schnittstelle. Wenn die Back-End-Schnittstelle jedoch nicht gut geschrieben ist, können Sie mit Mock.js zufällig einige gefälschte Daten generieren, um die Seite zu debuggen. In diesem Artikel wird hauptsächlich die Implementierungsmethode der Verwendung von Mock.js-Zufallsdaten und die Verwendung von Express zur Ausgabe der JSON-Schnittstelle vorgestellt. Ich hoffe, dass sie allen helfen kann.
Mock.js installieren
Verwenden Sie zuerst Express, um ein NodeJS-Webprojekt zu erstellen. Wenn der Name demo lautet, werde ich hier nicht auf Details eingehen
yarn add mockjs
Verwenden
const Mock = require('mockjs')
var data = Mock.mock({
'list|2': [{
'id|+1': 1,
'color': '@color()',
'date': '@datetime()',
'img': '@image()',
'url': '@url(http)',
'email': '@email()',
'name': "@name(1,2)",
'text': '@paragraph()'
}]
})
console.log(JSON.stringify(data))Die oben genannte Zufallsmethode finden Sie im unten angegebenen Link zum Mockjs-Dokument. Die von Mock.Random aufgerufene Methode kann direkt verwendet werden, indem Sie @ davor hinzufügen.
Ausgabe
{
"list": [
{
"id": 1,
"color": "#8179f2",
"date": "2015-06-22 12:10:08",
"img": "http://dummyimage.com/250x250",
"url": "http://hwujcvh.fk/vfrjfmi",
"email": "y.ahbatuekk@mbkhfybrh.pl",
"name": "James Ronald Rodriguez",
"text": "Zsogshtw qjscoe qwggnfk ppbdpqd avftd pvczrvnu gsyfyefm rbnbjyy tgemy buple ieghyjp klcxauofu lhjmnb kjpyodk. Njync ysrvx jevei stawy mcosrlpo iacryqob wkkcfuh nkrrdutr zduikjvtf dcv pppbhi ygjnkmg xvpusp ayu lvu. Wgqmtwvo ibqzp cct kodyh ovz slo cpc uqaseuwv ubjgbf hihh oudly mooztiojpi tubmwhsmb kktbkyqp hsvwgoluu jrkosqudm. Wpumdvtw riytwoa sbittrr xtjy beorkb osnjpigntu ndrgxhozeq iufhu hpuirgmh lstoijpqx hopk lkxceqhvr uymj pgdms njjmu ivxijmokn."
},
{
"id": 2,
"color": "#94f279",
"date": "1980-02-20 19:46:44",
"img": "http://dummyimage.com/336x280",
"url": "http://voyqj.cx/jjyksqzur",
"email": "k.ydgui@gixl.cr",
"name": "Ronald Nancy Harris",
"text": "Lbdpwqwpgd sodipqu oncnnyis ebtwho dnbt fqxnjyzr qtrriop gfbjt prto dgmtgff gwaqnhon sdlvpxpj pqomfflsc skj. Cvteunoj oqmjnfm vowvmw ypywtr klcazkvg cvsyzayytl bgvywe kfqqzhfg iahm jwury xsgf xnr pvfxwhaed nauookwi xuxtgnwq flcbmnrm qglgziy vegml. Cexit vdotefuj nptmei hekmljnt bukxrd ndhj lkfyjcv oldpgo rrj kprfklt nfks yvrvc. Aynbyd hxguza ftjrn kmlirqo wxald jqjkvahim jnhezpgm usev qbynwhm yotehgkwdg eyxj vfnm icchnds dgmd odxajing vqrdl yhpp eba. Tykxnhe njod bslwbsjcj rwlv rkvxk rypew fpfqrqi psislxuwgs jcwrbtfn qeszy leovhc jwupwzo kitct nhbdhjq xyiajxms. Gfgkw nnlg drcqnpwn bowqknwy oiw yysaohk fqqsbgvp mulik vusikwv nbp kpbo nhti dhf hrgql."
}
]
}In Express integriert, um JSON auszugeben
const Mock = require('mockjs')
exports.index = function(req, res) {
var data = Mock.mock({
'list|2': [{
'id|+1': 1,
'color': '@color()',
'date': '@datetime()',
'img': '@image()',
'url': '@url(http)',
'email': '@email()',
'name': "@name(1,2)",
'text': '@paragraph()'
}]
})
// 延时1秒，模拟网络请求时间
setTimeout(function() {
res.send(JSON.stringify(data))
}, 1000);
}Express domänenübergreifend
Die Schnittstellenadresse unterscheidet sich definitiv von der Vorderseite -end-Projektadresse. Fordern Sie zu diesem Zeitpunkt die Schnittstelle an. Es handelt sich um domänenübergreifende Probleme. Die Lösung in Express lautet wie folgt:
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:8080");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
res.header('Access-Control-Allow-Credentials', true);
next();
});Erklärung: Der obige Code wurde online gefunden, aber der Satz res. header('Access-Control-Allow-Credentials', true);
Die Adresse meines Front-End-Projekts ist http://localhost:8080, also ist der Wert von Access-Control-Allow-Origin http://localhost:8080
Kann entsprechend Ihrem eigenen Server geändert werden.
Verwandte Empfehlungen:
Detaillierte Erklärung von node.js mit Websocket basierend auf Express
Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zu den Zufallsdaten von mock.js und der Verwendung von Express zur Ausgabe der JSON-Schnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
