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

フロントエンド プロジェクトはすべてバックエンド インターフェイスを使用しますが、バックエンド インターフェイスが適切に記述されていない場合は、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 です

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

関連する推奨事項:

Expressとmockjsは、シミュレートされたバックグラウンドデータ送信機能の共有例を実装します

nodejs+expressを使用して簡単なファイルアップロード機能を実装する詳細な説明

WebSocketベースを使用するnode.jsの詳細な説明急行で

以上がmock.js のランダム データと、Express を使用した JSON インターフェイスの出力に関するサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。