Beispiel-Tutorial zu den Zufallsdaten von mock.js und der Verwendung von Express zur Ausgabe der JSON-Schnittstelle

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:

Express und Mockjs realisieren die Simulation von Hintergrunddaten zum Senden von Funktionsbeispielen zum Teilen

Detaillierte Erläuterung der Verwendung von NodeJS + Express Implementieren Sie die Funktion zum Hochladen einfacher Dateien

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!