mock.jsを使用してランダムデータを生成する

この記事では主にmock.jsのランダムデータを使用し、Expressを使用してjsonインターフェースを出力する実装方法を紹介します。必要な友人はそれを参照してください

フロントエンドプロジェクトはバックエンドインターフェースを使用しますが、バックエンドプロジェクトではバックエンドインターフェースが使用されます。エンドインターフェースがうまく書かれていません。現時点では、mock.js を使用して偽のデータをランダムに生成してページをデバッグできます

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

場合は、最初に Express を使用して、nodejs Web プロジェクトを作成します。名前はデモです。ここでは説明しません

yarn add mockjs

Use

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を出力します

expressクロスドメイン インターフェースアドレスは必ず異なります。フロントエンドプロジェクトのアドレスから。このとき、インターフェイスのリクエストにはクロスドメインの問題が含まれます。エクスプレスでの解決策は次のとおりです

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

説明: 上記のコードはオンラインで見つかりましたが、文 res.header('Access -Control-Allow-Credentials', true);

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

自分のサーバーに合わせて変更できます

上記は皆さんのためにまとめたものです。将来役立つことを願っています。

関連記事:

純粋なjsでドロップダウンリストを生成する方法

vuexの詳細な紹介中国語ドキュメント

ルーターのクロスモジュールジャンプ問題を解決する方法

以上がmock.jsを使用してランダムデータを生成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。