Generieren Sie Zufallsdaten mit Mock.js-js-Tutorial-php.cn

Generieren Sie Zufallsdaten mit Mock.js

亚连

Freigeben： 2018-06-13 14:12:09

Original

3415 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Implementierungsmethode für die Verwendung von Mock.js-Zufallsdaten und die Verwendung von Express zur Ausgabe der JSON-Schnittstelle vorgestellt. Freunde, die sie benötigen, können darauf verweisen.

Front-End-Projekte verwenden die Back-End-Schnittstelle , aber wenn die Back-End-Schnittstelle nicht gut geschrieben ist, können Sie mit mock.js zufällig einige gefälschte Daten generieren, um die Seite zu debuggen

Mock.js installieren

Verwenden Sie zuerst Express, um ein NodeJS-Webprojekt zu erstellen. Wenn der Name demo lautet, werde ich ihn hier nicht erwähnen.

yarn add mockjs

Nach dem Login kopieren

Verwenden Sie die Zufallszahl oben

const Mock = require(&#39;mockjs&#39;)

var data = Mock.mock({
 &#39;list|2&#39;: [{
 &#39;id|+1&#39;: 1,
 &#39;color&#39;: &#39;@color()&#39;,
 &#39;date&#39;: &#39;@datetime()&#39;,
 &#39;img&#39;: &#39;@image()&#39;,
 &#39;url&#39;: &#39;@url(http)&#39;,
 &#39;email&#39;: &#39;@email()&#39;,
 &#39;name&#39;: "@name(1,2)",
 &#39;text&#39;: &#39;@paragraph()&#39;
 }]
})
console.log(JSON.stringify(data))

Nach dem Login kopieren

Die Methode finden Sie im unten angegebenen Link zum Mockjs-Dokument. Die von Mock.Random aufgerufene Methode kann direkt durch Hinzufügen von @ verwendet werden sehr praktisch

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."
}
]
}

Nach dem Login kopieren

In Express integriert, um JSON auszugeben

const Mock = require(&#39;mockjs&#39;)

exports.index = function(req, res) {
 var data = Mock.mock({
 &#39;list|2&#39;: [{
  &#39;id|+1&#39;: 1,
  &#39;color&#39;: &#39;@color()&#39;,
  &#39;date&#39;: &#39;@datetime()&#39;,
  &#39;img&#39;: &#39;@image()&#39;,
  &#39;url&#39;: &#39;@url(http)&#39;,
  &#39;email&#39;: &#39;@email()&#39;,
  &#39;name&#39;: "@name(1,2)",
  &#39;text&#39;: &#39;@paragraph()&#39;
 }]
 })
 // 延时1秒，模拟网络请求时间
 setTimeout(function() {
 res.send(JSON.stringify(data))
 }, 1000);
}

Nach dem Login kopieren

Express Cross- Domäne

Schnittstellenadresse und Die Front-End-Projektadresse wird definitiv unterschiedlich sein. Zu diesem Zeitpunkt wird die Anforderungsschnittstelle domänenübergreifende Probleme beinhalten. Die Lösung in Express ist wie folgt >

app.all(&#39;*&#39;, 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",&#39; 3.2.1&#39;)
 res.header("Content-Type", "application/json;charset=utf-8");
 res.header(&#39;Access-Control-Allow-Credentials&#39;, true);
 next();
});

Nach dem Login kopieren

Hinweis: Der obige Code wurde online gefunden, aber so etwas wurde online nicht gefunden. Satz res.header('Access-Control-Allow-Credentials', true);

Die Adresse von Mein Front-End-Projekt ist http://localhost:8080, daher ist der Wert von Access-Control-Allow-Origin http://localhost:8080

Sie können ihn entsprechend Ihrem eigenen Server ändern

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So generieren Sie eine Dropdown-Liste mit reinem JS

Detaillierte Einführung in das chinesische Dokument von vuex

So lösen Sie das Problem des Router-übergreifenden Modulsprungs

Das obige ist der detaillierte Inhalt vonGenerieren Sie Zufallsdaten mit Mock.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!