mockjs を使用してバックエンド データをモックする方法

今回は、mockjs を使用してバックエンド データをシミュレートする方法と、mockjs を使用してバックエンド データをシミュレートする際の 注意事項 について説明します。以下は実際的なケースです。

mockjsを使用してデータを事前にシミュレートできます。前提となるのは、データインターフェイスとどのような種類のデータがバックエンドと合意されているかです。モックを使用して必要なデータを生成できるため、開発中にフロントエンドとバックエンドを分離できます。

その主な機能は次のとおりです:

1. データテンプレートに基づいてシミュレーションデータを生成します。

2. HTMLテンプレートに基づいてシミュレーションデータを生成します。

Ajax リクエストをインターセプトしてシミュレートします。

文法仕様

Mock.js の構文仕様には 2 つの部分が含まれます:

1. データ テンプレート定義 (DTD)

2. データ プレースホルダー定義 (DPD)

データテンプレート定義仕様DTD

データ テンプレートの各属性は、属性名、生成ルール、属性値の 3 つの部分で構成されます:

// 属性名  name
// 生成规则 rule
// 属性值  value
'name|rule': value

注:

1. 属性名と生成ルールは縦棒 | で区切られます。

生成ルールはオプションです。
生成ルールには 7 つの形式があります:
1. '名前|min-max': 値

'名前|カウント': 値
'名前|min-max.dmin-dmax': 値
'名前|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
7. 'name|+step': value
   生成ルールの意味依存する必要がある属性値のタイプを決定できます。
   属性値には @ プレースホルダーを含めることができます。

   属性値は、初期値と最終値の型も指定します。

例 1:

Mock.mock({
  'number1|1-100.1-10': 1,
  'number2|123.1-10': 1,
  'number3|123.3': 1,
  'number4|123.10': 1.123
})
// =>
{
  "number1": 12.92,
  "number2": 123.51,
  "number3": 123.777,
  "number4": 123.1231091814
}

例 2:

正規表現regexpに一致するstringを逆生成します。カスタムフォーマットされた文字列を生成する場合:

Mock.mock({
  'regexp1': /[a-z][A-Z][0-9]/,
  'regexp2': /\w\W\s\S\d\D/,
  'regexp3': /\d{5,10}/
})
// =>
{
  "regexp1": "pJ7",
  "regexp2": "F)\fp1G",
  "regexp3": "561659409"
}

例 3:

//string表示属性名
//3表示后面属性值重复次数
 Mock.mock({
 "string|3": "★"
})

結果:

//星の数は3つです

{
"string": "★★★"
}

例 4:

// num为属性名
// 生成一个大于等于1，小于等于100 的整数，属性值100只是用来确定类型
Mock.mock({
 "num|1-100": 100
})

結果:

{

「数字」: 8
}

データプレースホルダー定義仕様 DPD

プレースホルダーは属性値文字列内の位置を占めるだけであり、最終的な属性値には表示されません。

プレースホルダーの形式は次のとおりです:

@placeholder

@placeholder(パラメータ [, パラメータ])

注:

1. @ を使用して、次の文字列をプレースホルダーとして識別します。

プレースホルダーは、Mock.Random のメソッドを参照します。
3. Mock.Random.extend() を使用してカスタム プレースホルダーを拡張します。

プレースホルダーはデータ テンプレートの属性を参照することもできます。
プレースホルダーは、データ テンプレート内の属性を優先します。
プレースホルダーは相対パスと絶対パスをサポートします。
りー

jQuery ajax経由で偽のデータをリクエストする例

1. まず、mockjs と jquery を導入します (ここでは、jq でカプセル化された ajax を使用してリクエストを送信します)

Mock.mock({
  name: {
    first: '@FIRST',
    middle: '@FIRST',
    last: '@LAST',
    full: '@first @middle @last'
  }
})
// =>
{
  "name": {
    "first": "Charles",
    "middle": "Brenda",
    "last": "Lopez",
    "full": "Charles Brenda Lopez"
  }
}

2. モックを使用してデータテンプレートを生成します

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>

3.ajax がリクエストと結果を送信します

//这里的第一个参数http://api.cn 就是下面ajax请求的url，mock对该url进行拦截'
//这里的第二个参数就是template数据模板，mock会返回模板生成的数据
   Mock.mock('http://api.cn', {
    'name': '@name',
    'age|1-100': 100,
    'city': '@city'
  });

vuecliでmockjsを使用する

まずはインストール

$.ajax({
  url: 'http://api.cn',
  dataType: 'json'
}).done(function(data, status, xhr) {
  console.log( JSON.stringify(data)); //{"name":"Mark Lee","age":4,"city":"辽阳市"}
});

スクリプトで新しいmockdata.jsを作成しました

中身は以下の通りです:

npm install mockjs

次に、使用するモックデータのvueコンポーネントページに、次のように記述します

import Mock from 'mockjs';
const data = Mock.mock({
 // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
 'foods|10-50': [{
  'name': "@ctitle(2,10)",
  "img": "@image('600x600',#b7ef7c)",
  "brief": "@csentence(1,50)",
  "price|0-20.0-2": 1,
  "num": 0,
  "minusFlag": true,
  "time": "@time",
  "peisongfei|0-100.0-2": 1,
  "limit|0-50": 1
 }],
 "sales|10-50": [{
  // 属性 id 是一个自增数，起始值为 1，每次增 1
  'name': "@ctitle(2,10)",
  "img": "@image('600x600',#b7ef7c)",
  "brief": "@csentence(1,50)",
  "price|0-100.0-2": 1,
  "num": 0,
  "minusFlag": true,
  "time": "@time",
  "peisongfei|0-100.0-2": 1,
  "limit|0-100": 1
 }]
});
export default {
 data
}

データを引用するには、メソッド内でモックデータを直接引用するだけです。例:

import mockdata from "@/scripts/mockdata.js";

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がmockjs を使用してバックエンド データをモックする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。