mockjs を使用して vue、vuecli、webpack でバックエンド データをシミュレートする

mockjsを使用すると、データインターフェースやどのようなデータがバックエンドと合意されているかが前提となります。モックを使用して必要なデータを生成できるため、開発中にフロントエンドとバックエンドを分離できます。この記事では主に、mockjs を使用して vue+vuecli+webpack でバックエンド データをシミュレートする例を紹介します。一定の参考値があり、興味のある友人はそれを参照できます。

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

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

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

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

文法仕様

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

1. データ テンプレート定義 (DTD)
2. データ プレースホルダー定義、DPD)

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

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

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

注:

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

2. 生成ルールはオプションです。

3. 生成ルールには 7 つの形式があります:

1. 'name|min-max': value

2. 'name|count': value

3. 'name|min-max.dmin-dmax ' : value

4. 'name|min-max.dcount': value

5. 'name|count.dmin-dmax': value

6. 'name|count.dcount': value

7. ' name|+step': value

4. 生成ルールの意味は属性値の種類によって異なります。

5. 属性値には @ プレースホルダーを含めることができます。

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

例 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 を逆にして、それに一致する文字列を生成します。カスタム形式の文字列を生成するために使用されます:

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

結果:

{
"number": 8
}

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

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

placeholder の形式は次のとおりです:

@placeholder
@placeholder(parameter [,parameter])

注:

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

2. Placeholder は、Mock.Random のメソッドを指します。

3. Mock.Random.extend() を通じてカスタム プレースホルダーを拡張します。

4. プレースホルダーは、データ テンプレートの属性を参照することもできます。

5. プレースホルダーは、データ テンプレート内の属性を優先します。

6. プレースホルダーは相対パスと絶対パスをサポートします。

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

jQuery ajaxを介して偽のデータをリクエストする例

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

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

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

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

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

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

vuecliでmockjsを使用します

最初のインストール

npm install mockjs

私のプロジェクトの下の構造は次のとおりです:

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

内容は以下の通りです:

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
}

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

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

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

new Promise((resolve, reject) => {
  that.foods =mockdata.data.foods; //直接点出你生成的假数据对象即可
  that.foodsListLen = that.foods.length;
 }).catch(err=>{
   console.log(err)
 })

関連する推奨事項:

Mock.js を使用して Node.js サーバー環境で AJAX リクエストをインターセプトするチュートリアル

mock.js を使用してフロントエンド開発とバックエンド開発を行う独立終了

PHP 実装された単純なモック JSON スクリプトの共有、phpmockjson script_PHP チュートリアル

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