mockjs を使用して vue、vuecli、webpack でバックエンドデータをシミュレートする-jsチュートリアル-php.cn

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

小云云

リリース： 2018-01-03 13:03:48

オリジナル

2191 人が閲覧しました

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

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

データテンプレートに基づいてシミュレーションデータを生成します。
HTMLテンプレートに基づいてシミュレーションデータを生成します。
Ajax リクエストをインターセプトしてシミュレートします。

文法仕様

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

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

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

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

// 属性名  name
// 生成规则 rule
// 属性值  value
&#39;name|rule&#39;: value

ログイン後にコピー

注:

属性名と生成ルールは縦棒 | で区切られています。
生成ルールはオプションです。
生成ルールには 7 つの形式があります:

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax ' : value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
' name|+step': value

生成ルールの意味は属性値の種類によって異なります。
属性値には @ プレースホルダーを含めることができます。
属性値は、初期値と最終値の型も指定します。

例 1:

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

ログイン後にコピー

例 2: 正規表現 regexp を逆にして、それに一致する文字列を生成します。カスタム形式の文字列を生成するために使用されます:

Mock.mock({
  &#39;regexp1&#39;: /[a-z][A-Z][0-9]/,
  &#39;regexp2&#39;: /\w\W\s\S\d\D/,
  &#39;regexp3&#39;: /\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])

注:

@ を使用して、次の文字列をプレースホルダーとして識別します。
Placeholder は、Mock.Random のメソッドを指します。
Mock.Random.extend() を通じてカスタムプレースホルダーを拡張します。
プレースホルダーは、データテンプレートの属性を参照することもできます。
プレースホルダーは、データテンプレート内の属性を優先します。
プレースホルダーは相対パスと絶対パスをサポートします。

Mock.mock({
  name: {
    first: &#39;@FIRST&#39;,
    middle: &#39;@FIRST&#39;,
    last: &#39;@LAST&#39;,
    full: &#39;@first @middle @last&#39;
  }
})
// =>
{
  "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进行拦截&#39;
//这里的第二个参数就是template数据模板，mock会返回模板生成的数据
   Mock.mock(&#39;http://api.cn&#39;, {
    &#39;name&#39;: &#39;@name&#39;,
    &#39;age|1-100&#39;: 100,
    &#39;city&#39;: &#39;@city&#39;
  });

ログイン後にコピー

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

$.ajax({
  url: &#39;http://api.cn&#39;,
  dataType: &#39;json&#39;
}).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 &#39;mockjs&#39;;
const data = Mock.mock({
 // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
 &#39;foods|10-50&#39;: [{
  &#39;name&#39;: "@ctitle(2,10)",
  "img": "@image(&#39;600x600&#39;,#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
  &#39;name&#39;: "@ctitle(2,10)",
  "img": "@image(&#39;600x600&#39;,#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)
 })

ログイン後にコピー