webpack-dev-serverを使ってmock serverを作成します。

プロジェクトの住所:https://github.com/yuanyuansh...
apiに基づいて相互作用し、前後に分離したウェブアプリケーションを開発する時、よくいくつかの問題が発生します。

フロントエンドページはすでに編成されましたが、バックグラウンドインターフェースはまだ準備されていません。

サーバは特定のタイプのデータを返して、あるページが特定の条件で問題があるかどうかをテストしたいですが、フロントエンドとしては基本的にバックエンドコードとデータベースに接触しません。毎回バックエンドを探してアナログデータを追加するのは面倒くさいです。

この二つの問題を解決するために、一番簡単な解決方法はmock serverを構築して、必要なアナログデータを返すことです。
webpack-dev-serverは私達がvue、reactを開発する時に必要なツールです。サーバーである以上、彼にmock serverの機能を実現させることができますか？
原理：webpack-dev-serverのbeforeフックを通じて、webpack-dev-serverに必要なmock server機能を追加できます。別途サーバを構築する必要はありません。
少し修正するだけで、webpack-dev-serverをmock serverとして使用できます。また、同じURLのGET、POST、PATCHなどの異なるHTTP METHODをそれぞれ処理し、熱い切り替えをサポートします。
使い方は簡単です。webpack.dev.co.f.jsのdevServerに新しいフックbeforeを追加し、すべての要求をappi Mockerに任せて、アナログデータを使用する必要がある場合は、要請したURLをwebpackサーバ上に変更するだけでいいです。プロジェクトアドレスwebpack_api_mocker
インストール

npm install mocker-api --save-dev

使用
package.jsonに配置されています。

"dev-mock": "cross-env MOCK=true webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

webpack.dev.co.nf.jsに配置されています。

   devServer: {
       before (app) {
           if (process.env.MOCK) {
               apiMocker(app, path.resolve('mock/mocker'), {
                   proxy: apiDomainMap,
                   changeHost: true
               })
           }
       }
   }

appi DomainMap.js配置

let urls = {
   'https://api.github.com': ['/search/repositories*', '/use/repositories*']
}

mocker.js配置

const proxy = {
   'GET /api/user': { id: 1, username: 'kenny', sex: 60 },
   'GET /api/user/list': [
       { id: 1, username: 'kenny', sex: 6 },
       { id: 2, username: 'kenny', sex: 6 }
   ],
   'GET /api/common/list': [
       { id: 1, console: '        ' },
       { id: 2, console: '       ' },
       { id: 2, console: '      ' },
       { id: 2, console: '       ' }
   ]
}
module.exports = proxy