Vueはmockjsを使用してシミュレートされたデータケースの詳細を生成します

プロジェクトにmockjsをインストールする

プロジェクトディレクトリで次のインストールコマンドを実行します。

npm インストール mockjs --save

Vueプロジェクトでmockjsを使用する基本的なプロセス

インストールが完了したら、プロジェクトの src/utils ディレクトリ (ディレクトリとファイル名は自分で定義できます) に新しい mock.js を作成して、モックデータを生成します。

// mockjsをインポート
const モック = require('mockjs')

// シミュレーションデータを生成する const test = function() {
    Mock.mock({ を返す
        // 属性リストの値は1〜10個の要素を含む配列です 'list|1-10': [{
            // 属性IDは1から始まり、毎回1ずつ増加する自己増加番号です。
            'id|+1': 1,
            // プレースホルダー 'name': '@name' を通じてランダムデータを生成します。
            '年齢': '@natural(18, 100)',
            'メール': '@メール'
        }]
    });
}

// アクセスURLをマップする
// これは、Ajax が /mock/test パスを要求すると、テスト関数がマッピングされ実行されることを意味します。Mock.mock('/mock/test', test)

プロジェクトの src/api ディレクトリで、Ajax リクエストに応答するための MockSrv.js を作成します。

'axios' から axios をインポートします
'@/utils/mock' からモックをインポートします

エクスポートデフォルト{
    テストモック() {
        axios.get('/mock/test') を返します。
    }
}

コンポーネント内の Mock によって生成されたモックデータを要求します。

<スクリプト>
'@/api/MockSrv' から MockSrv をインポートします。

エクスポートデフォルト{
    名前: 'アプリ'、
    マウント() {
        MockSrv.testMock().then(function(resp) {
            console.log("Mock:", resp.data);
        });
    }
}
</スクリプト>

実行結果

ここに画像の説明を挿入

モック構文仕様

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

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

// 属性名
// ルールを生成する
// 属性値
'名前|ルール': 値

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

プレースホルダーは、属性値文字列内の場所を占めるだけで、最終的な属性値には表示されません。
プレースホルダーの形式は次のとおりです。

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

モック.モック({
    名前： {
        最初: '@FIRST'、
        中間: '@FIRST'、
        最後: '@LAST',
        フル: '@first @middle @last'
    }
})

モック.モック()

データテンプレートに基づいてシミュレートされたデータを生成する
Mock.mock(rurl?, rtype?, テンプレート | 関数(オプション))

rurl はオプションであり、インターセプトする URL を示します。URL 文字列または URL 正規表現を指定できます。
rtype はオプションであり、インターセプトする必要がある Ajax リクエストのタイプを示します。たとえば、GET、POST、PUT、DELETE などです。
テンプレートはオプションで、データテンプレートを示します。これはオブジェクトまたは文字列です。
function(options) オプション、応答データを生成するために使用される関数を示す
- オプションは、このリクエストに設定されたAjaxオプションを参照します。これには、url、type、bodyの3つの属性が含まれます。

モック.ランダム()

Mock.Random は、さまざまなランダムデータを生成するために使用されるツールクラスです。
Mock.Random メソッドはデータテンプレート内では「プレースホルダー」と呼ばれ、記述形式は @placeholder(parameter[, parameter]) です。

var ランダム = Mock.ランダム
ランダム.email()
// => "[email protected]"
モック.モック('@email')
// => "[email protected]"
Mock.mock( { メールアドレス: '@email' } )
// => { メールアドレス: "[email protected]" }

Mock.Random のメソッドは、データテンプレートの @ プレースホルダーに 1 対 1 で対応します。必要に応じて、Mock.Random のメソッドを拡張し、@ 拡張メソッドを介してデータテンプレートで参照することもできます。

Vue で mockjs を使用してシミュレートされたデータを生成するケースに関するこの記事はこれで終わりです。Vue で mockjs を使用してシミュレートされたデータコンテンツを生成する関連の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: