先端開発におけるmockデータの方法について

フロントエンド開発にはバックエンドのインターフェースを呼び出す必要があります。バックエンドがまだreadyでない場合、ブロック開発プロセスをブロックしないために、フロントエンドは自分でmockデータを必要とします。私たちがよく使う方法は大体以下の二つです。

は、Easy Mock

などのオンラインmockデータプラットフォームを介して

ローカルセーバーを通過します。

最初の方法はネット操作が必要です。私は何回かネット接続ができない状況に遭遇しました。自分のネット問題かもしれません。
第二の方法は、自分でいろいろなルートルールを書く必要があります。

app.get('/api/getuser', (req, res)=>{
    res.send({...})
})

ここではnpmパッケージfe-appi-mockerを利用して、インターフェースルールを定義するjsファイルを通じて、すべてのルートに対する処理を実現できます。また、mockjsルールもサポートします。

mockに戻る遅延時間、ステータスコード、ヘッド、レスポンスデータ

は、mockjsを内蔵し、mockデータをより柔軟かつ効率的にする

。

は、関数的にdata

に戻ることをサポートしています。
fe-appi-mockerをインストールします

$ npm i -D fe-api-mocker

基本的な使い方
1../mockData.jsのようなmockインターフェースを定義する。
デフォルトではGET要求であり、POSTまたは他の要求であれば、post /api

/*
*     
* status            ,   ：200
* delay         ，  ：100ms
* headers      header
* data          ,    json，    ，    req    ，    query，body，  params
*/
module.exports = {
	//       api  。
	//     GET   。
	"api/1": {
		status: 200,
		//    header
		headers: {
			'X-Foo': 'bar'
		},
		//     ，  100ms
		delay: 1000,
		//     
		data: {
			msg: 'response data'
		}
	},

	//          
	"api/2": {
		data(req) {
			return {
				role: req.query.username === 'paul' ? 'admin': 'not admin'
			}
		}
	},

	//   mockjs
	"api/3": {
		data: {
			//      5～10 list  
			'list|5-10': [{
				//    id       ，     1，    1
				'id|+1': 1
			}]
		}
	},

	//   POST  
	"post api/1": {
		data: {
			msg: 'response data'
		}
	},

	//          
	"post api/2": {
		data(req) {
			return {
				role: req.body.username === 'paul' ? 'admin': 'not admin',
				name: req.body.username
			}
		}
	},
}

2.サーバの設定
expressベースのserverを使うなら、vue-cli、webpack-dev-severなど、devServer.beforeを配置する必要があります。

module.exports = {
	devServer: {
		before(app) {
			//         ./mockData.js
			mock(app, path.resolve(__dirname, './mockData.js'));
		}
	}
}

直接expressを走れば、以下のように配置されます。

const mock = require('fe-api-mocker');
const app = require('express')();
//       ……
//         ./mockData.js
mock(app, path.resolve(__dirname, './mockData.js'));

app.listen(3000);

3.フロントエンド要求

//             
fetch('http://localhost:3000/api/2?username=paul')
	.then(d => d.json())
	.then(d => {
		console.log(d)
	})