Exemple de tutoriel sur les données aléatoires mock.js et utilisation d'Express pour générer l'interface JSON

Les projets front-end utiliseront tous l'interface back-end, mais lorsque l'interface back-end n'est pas bien écrite, vous pouvez utiliser mock.js pour générer aléatoirement de fausses données afin de déboguer la page. Cet article présente principalement la méthode d'implémentation consistant à utiliser les données aléatoires mock.js et à utiliser express pour générer l'interface json. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Installez mock.js

Utilisez d'abord express pour créer un projet Web nodejs Si le nom est démo, je n'entrerai pas dans les détails ici

yarn add mockjs

Utiliser.

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))

La méthode aléatoire ci-dessus peut être trouvée dans le lien vers le document mockjs donné en bas. La méthode appelée par Mock.Random peut être utilisée directement en ajoutant @ devant. 🎜>

Sortie

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

Intégré dans express pour sortir json

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 cross-domain

L'adresse de l'interface sera certainement différente de l'avant -adresse de fin du projet. À ce stade, demandez l'interface Cela impliquera des problèmes inter-domaines. La solution en express est la suivante

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

Explication : Le code ci-dessus a été trouvé en ligne, mais la phrase est res. header('Access-Control- Allow-Credentials', true);

L'adresse de mon projet front-end est http://localhost:8080, donc la valeur de Access-Control-Allow-Origin est http://localhost:8080

Peut être modifié en fonction de votre propre serveur.

Recommandations associées :

Express et mockjs réalisent le partage d'exemples de fonction d'envoi de données d'arrière-plan de simulation

Explication détaillée de l'utilisation de nodejs+express pour implémenter la fonction de téléchargement de fichiers simples

Explication détaillée de node.js à l'aide de websocket basé sur express

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!