mock.js のランダムデータと、Express を使用した JSON インターフェイスの出力に関するサンプルチュートリアル-jsチュートリアル-php.cn

mock.js のランダムデータと、Express を使用した JSON インターフェイスの出力に関するサンプルチュートリアル

小云云

リリース： 2018-01-09 09:35:24

オリジナル

2273 人が閲覧しました

フロントエンドプロジェクトはすべてバックエンドインターフェイスを使用しますが、バックエンドインターフェイスが適切に記述されていない場合は、mock.js を使用して偽のデータをランダムに生成し、ページをデバッグできます。この記事では主にmock.jsのランダムデータを使用してjsonインターフェースを出力する実装方法を紹介しますので、困っている方は参考にしていただければ幸いです。

mock.jsをインストールします

最初にexpressを使用してnodejs Webプロジェクトを作成します。名前がdemoの場合、ここでは詳細は説明しません

yarn add mockjs

ログイン後にコピー

上記のランダムな方法を使用してください

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

ログイン後にコピー

mockjsドキュメントへのリンクにあります。 Mock.Randomで呼び出されるメソッドは、先頭に@を付けることで直接利用できることがわかります

output

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

ログイン後にコピー

expressに統合されて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クロスドメイン

を出力することができます。インターフェイスアドレスとフロントエンドプロジェクトアドレスは間違いなく異なります。現時点では、リクエストインターフェイスにはクロスドメインの問題が含まれます。Express での解決策は次のとおりです。

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

ログイン後にコピー

説明: 上記のコードはオンラインで見つかりました。そのような文はありません res.header(' Access-Control-Allow-Credentials', true);

私のフロントエンドプロジェクトのアドレスは http://localhost:8080 なので、Access-Control-Allow-Origin の値はは http://localhost:8080 です

変更する独自のサーバーに応じて調整できます。