反応するプロジェクトモックデータ

序文

我々は、すべての実際の開発段階では、バックエンドインターフェイスの開発とフロントエンドの開発が待ち時間のバックエンド・インターフェースのフロントエンドにまっすぐにつながるスケジュールの前端よりもさらに後に、同時に行われることを知っています。

この状況は、低速であり、この時間というフロントエンドの開発者は、静的なシミュレーションデータを書き込むことができます深刻なフロントエンドの開発につながりました。

JSONの静的データの使用をシミュレートします

この状況は、自分自身の静的なJSONデータを提供し、これらのデータを取得するためのツールとのインタフェースを行うには、確立されたデータ形式（インターフェースのドキュメントなど）に従ったものです。唯一の要求を取得し使用する方法。まだ非常に大きな制限。

ダイナミックシミュレーションインタフェース（モック）

この状況は、要件（インタフェース文書）確立インターフェースとデータ構造、独自のアナログ機能のバックエンドインターフェイスに従って、Webフレームワークとなるようプロジェクトアップスムーズ実行の前端。これは、簡単にアナログ・フロント・エンドのビジネス・ロジックを開発することができます。

スキル紹介

メインプロジェクトは、達成するために明示+模擬集積動的シミュレーション・インターフェースを使用することです。

ディレクトリ構造：

まず、Expressをインストールする必要があります

NPM --save Expressをインストールします

新しいserver.js下のモックファイルの暗号化で

コードは以下の通りであります：

VAR Expressは（ "エクスプレス"が必要です。= ）
 VARのApp = エクスプレス（）;
 VARの bodyParserインクルードは（ 'bodyParser' =必要）; 

app.use（bodyParser.json（））;   // ボディ形式のデータパーサーはJSON解析する 
アプリを。使用（bodyParser.urlencoded（{             // 以下、これは必要bodyParser.json、符号化パラメータに 
    拡張：trueに
}））; 

VARルータ= express.Router（）; 

app.get（ '/'、関数（REQ、RES ）{ 
    res.send（ 'Hello Worldの' ）; 
}）; 

router.use（「/test",require('./test ' ））; 

app.use（ "/ API"、ルータ）

app.listen（ 3001）

それでは、どのサービスを起動するには？二つの方法があります

現在のディレクトリにプロジェクトの最初の実装

ノードモック/ server.js

私たちは、NPM管理パックを使用しているので、第二に、スクリプトがpackage.jsonを追加しました

「モック」：「ノード./mock/server.js」

あなただけが行う必要があります npm run mock ああ~~それにサービスを開始します

これは、単純な速達サービスを可能に、ブラウザに入力します。http：// localhostを：3001は、あなたがハローワールドをロードするためのページを見ることができます

次のステップは、mockJsの紹介です、最初mockjsをインストール

NPM --save-devのmockjsをインストール

新test.jsがモックの次のコードのディレクトリにご参加、モック文法はここで言うことはありません。参照してくださいモック文書は、多くの知識ポイントがある、についてです。

VaRのモック=必要とする（ "mockjs" ）
 VAR Expressが必要（ "エクスプレス" = ）
 VaRのルータ= express.Routerを（）; 

router.use（ "/プロフィール" 機能（REQ、RES）{ 
    にconsole.log（req.body ）; 
    // モックデータシミュレーションコール
    するvarデータ= Mock.mock（{
             // 属性値が1〜10の元素含む配列リストである 
            「リスト| 1-10」：[{
                 // 属性IDでありますインクリメント数、1の初期値、1ずつ 
                'ID | + +1'：1 
            }] 
        } 
    ）; 
    戻りres.json（データ）; 
}）

module.exportsは=ルータ;

ブラウザに入力します。http：// localhostを：3001 / API /テスト/プロファイルJSONデータ出力のリストを参照するには、

あなたがアクセスした場合のアドレスは次のとおりです。HTTP：// localhostを：3001 / API /プロフィールのみserver.jsに置く必要があります

router.use（ "/テスト"、（ './テスト'）が必要です）。修改为：router.use（ "/"、（ './テスト'）を必要とします）。

で使用REACT

次のコードの設定/ webpackDevServer.config.jsを追加します。

プロキシ：{
       '/ API /' ：{ 
        ターゲット： 'のhttp：// localhostを：3001' 、
        セキュアな：偽
      } 
    }、

最初に実行NPMの実行モック、モックサービスを開き、[プロジェクトNPMの実行開始を実行して、あなたはモックデータを取得することができます

参考：https://www.jianshu.com/p/ac23664982b2

反応するプロジェクトモックデータ

で使用REACT

おすすめ