プロジェクトでモックデータを使用するいくつかの方法

デマンドバックグラウンド：フロントエンドとバックエンドが別々にある大規模な環境では、フロントエンドはページをレンダリングするためにバックエンドインターフェイスのデータを取得する必要があります。この場合、バックエンド開発の進捗状況が予定より遅れていると、フロントエンド開発も妨げられます。したがって、フロントエンドにはデバッグ用の静的シミュレーションデータが必要です。
モックデータ（シミュレーションデータ）の生成方法：

手動で作成します。ただし、この方法の問題は明白です。特に、データコンテンツがより複雑である場合や、データ量が大きい場合は、模擬データの作成に非常に時間がかかります。

mockjsを使用します。Mockjsは、データテンプレートに従ってモックデータを生成できます。現在、多くの開発者がmockjsを使用してモックデータを生成しています。この記事で説明する方法もmockjsに基づいています。

サードパーティのオンラインモックプラットフォームを使用します。例：Easy Mock

模擬データ戦闘

1. npmインストールmockjsをインストールします

2.プロジェクトディレクトリに新しいモックフォルダを作成し、モックデータに関連するコンテンツをここに配置します。

3.モックデータを作成する

//mock/data/index.js
const Mock = require("mockjs");
module.exports = [
  Mock.mock("/mock/getData", {
    "data|10": [
      {
        "key|+1": 1,
        "words|1": ["哈哈", "嘿嘿", "biubiu", "啾啾", "喵喵","啦啦"],
        "activity|1": ["吃饭", "睡觉", "打豆豆"]
      }
    ]
  })
];

4.モックデータサービスをオンにします。

方法1：

エントリファイルにモックデータファイルをインポートし、モックデータを要求する

import React,{Component} from "react";
import axios from "axios";
import '../mock/data/index';

class App extends Component {
    constructor(props) {
    	super(props);
    	this.state = {
      		mockData: ""
    	};
  	}
    componentDidMount(){
        axios.get("/mock/getData").then(res => {
      		console.log("This is mock data : ", res.data);
             this.setState({
        		mockData: res.data
     		});
    	});
    }
    render() {
        return (
        	<div>
            <h2>mock数据：</h2>
            <div>{this.state.mockData}</div>
            </div>
        )
    }
}

このとき、モックデータの出力はコンソールとページで確認できます。ただし、この使用方法は、模擬データを使用するすべてのファイルで参照する必要があり、共同デバッグ後に模擬データを使用しない場合は、手動でコメントする必要もあります。

他に注意すべき点が2つあります。

1.この方法で要求されたモックデータは、偽のajaxであるため、ブラウザーのネットワークにキャプチャされ
ません。2. fetchでajaxを送信するときにデータを要求することはできません。現在、Mockjsはフェッチをサポートしていない場合があります。

方法2：プロジェクトのpackage.jsonファイルを構成し、ノードを介してモックサービスを開始します。

mockServer.jsファイルを作成する

//mock/server/mockServer.js
let express = require("express"); //引入express
let Mock = require("mockjs"); //引入mock
let app = express(); //实例化express
//设置允许跨域
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  next();
});

app.get("/mock/getData", function(req, res) {
  res.json(
    Mock.mock({
    "data|10": [
      {
        "key|+1": 1,
        "words|1": ["哈哈", "嘿嘿", "biubiu", "啾啾", "喵喵","啦啦"],
        "activity|1": ["吃饭", "睡觉", "打豆豆"]
      }
    ]
  })
});
app.listen("4000", () => {
  console.log("监听端口 4000");
});

package.json構成を変更してから、プロジェクトの実行後にnpm run mockを実行するだけで済みます。

//package.json部分代码
"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start && npm run mock",
    "type-check": "tsc",
    "pm2:start": "npm run build && pm2 startOrRestart ecosystem.config.js --env production",
    "pm2:stop": "pm2 stop linkchain",
    "pm2:deploy": "pm2 deploy ecosystem.config.js dev",
    "mock": "node ./mock/server/mockServer"//开启mock服务
  }

この方法でモックデータをリクエストすると、ブラウザのネットワークでリクエスト情報を取得できます。

ただし、この方法には欠点もあります。ホットロードを実行できないためです。モックデータ関連のファイルが変更されるたびに、現在のモックサービスを強制終了し、モックサービスを再起動して有効にする必要があります。これも開発に問題を追加します。

もちろん、プロジェクトでモックデータを使用する方法は他にも間違いなくあります。学習した後で更新します。

Cassiel.Lee

50件の元の記事を公開・ Likes5 ・ 20,000以上の訪問

プライベートの手紙の懸念

プロジェクトでモックデータを使用するいくつかの方法

おすすめ