---モック---基本的な使用

、問題を解決するモック

　　発展途上バックエンドのデータ出力がまだ完了していない場合は、フロントには、静的なシミュレーションデータを書かなければなりませんでした。データ長すぎる、データは、JSファイル、URL変更の完了後に一つずつで書かれています。ロジック複雑なコードのいくつかは、非常に慎重に除去又はアナログデータ添加されます。実際のデータは、あなたはより多くのコードを書く、手動でシミュレーションデータを変更するか、可能な限り復元したいです。そのような私たちが収集する必要があるIP、乱数、写真、住所などの特殊な形式で、

二、モック利点

　　1、単離された前端と後端

　　フロントエンドエンジニアが独立して、バックエンドで開発してみましょう。

　　図2に示すように、真正性試験を増加させます

　　ランダムデータでは、さまざまなシナリオをシミュレートします。

　　3、非侵襲の開発

　　既存のコードを変更する必要はありません、Ajaxリクエストを傍受することができ、それは応答データのシミュレーションを返します。

　　4、使いやすいです

　　直感的なインターフェース。

　　5、豊富なデータタイプ

　　ランダムなテキスト、数値、ブール、日付、電子メール、リンク、画像、色などの生成をサポートしています。

　　6、簡単に拡張

　　より多くの拡張データタイプ、カスタム関数と通常のサポートをサポートしています。

　　7、既存のインタフェースの文書の場合には、我々が直接インターフェイスが完了した後に書かれた適切なフィールドに合わせて開発する文書をインターフェースすることができ、あなただけのURLアドレスを変更する必要があります。

　　8、クロスドメインの問題を伴いません、

第三に、ケースのデモ

　　モジュールmockjsをダウンロードしてインストールするには1.最初の必要性

　　　 cnpm mockjsをインストール-S

　　 SCRの2は、この文書では、ファイルデータのシミュレーション例の/src/mock/index.jsを保存するためのフォルダを作成します

ザは、モック=定数（ "mockjs"を必要とする）; 
せてデータ = Mock.mock（{
     "データ| 100"：// 100データアレイを生成
        {
             "shopId | + +1"、:. 1 // 製品IDを生成し、増分を1 
            "shopMsg"： "@ctitle（10）"、// 製品情報を生成し、10文字の長さは 
            "SHOPNAME"： "@cname"、// 商品名を生成し、すべての中国の人々の名前を 
            "shopTel"：/ 。（。。。。5 | 3 | 7 | 8）1 ^ [0-9] 9}、{$ /、。// ランダム電話番号生成 
            "shopAddress"： "（真の）@county"、// ランダムに生成されたアドレスを 
            「shopStar | 1- 。5 "：" ★ " // ランダムに生成された1-5つ星 
            "Salesvolume | 30から1000「：30、 // ランダムに30から1000の間で商品価格に生成されました
            "shopLogo"： "@Image（ ' 100x40'、 '＃のC33'、 '#FFFFFF'、 ' 小さなBeibi'）"、// ランダム画像サイズ/背景色/文字色/テキストメッセージ生成 
            「食品を| 7 ： "[ // 7の各製品は、ランダムに生成された食品
                {
                     "：" @cname " foodName" // 食品名 
                    " foodPic "：" @Image（ ' 100x40'、 '＃のC33'、「#FFFFFFを''）」小さなかわいい」、// ランダム画像サイズ/背景色/文字色/テキストメッセージを生成する 
                    "：20、1-100 | foodPrice " // 1から100までの乱数を発生させる 
                    " ANAME | 14" ：[ 
                        {
                             "ANAME"： "@cname" 、 
                            "aprice | 30-60"：20  
                        }  
                    ]
                }
            ] 
        } 
    ] 
}）
Mock.mock（ /グッズ\ /グドール/、 'POST'、（）=> { // 三つのパラメータ。最初のパス、第2の要求メソッドPOST /取得し、第3の補正、戻り値
    戻りデータ
}）

　　前記アナログデータの後、ファイルがマスタファイルmain.jsアナログデータ入力に導入される必要があります

　　　輸入「./mock/index.js」

　　ページ4.、我々は直接要求axios（ここでは、簡単な方法、および通常の状況下では、それは各インタフェースパッケージAPI、一連の操作を変更することは容易ポストの維持に必要である）ことができます

「axios」からインポートaxios 。


（）{搭載
        この.initMsg（）。
    }、
メソッド：{ 
   initMsg（）{

　　　　　　axios.post（ "にhttp：// localhost：8080 /雑貨/グドール"）.then（（RES）=> {

　　　　　　　　console.log（RES）

　　　　　}）

　　}   
}

おすすめ