模擬バックグラウンドデータ送信機能を実装するためのexpressとmockjsの共有例-見出し-php.cn

模擬バックグラウンドデータ送信機能を実装するためのexpressとmockjsの共有例

小云云

リリース： 2018-01-09 09:28:15

オリジナル

2167 人が閲覧しました

ほとんどの場合、フロントエンドとバックエンドは同時に開発されます。つまり、ページの開発が完了しても、現時点ではすぐに共同デバッグ段階に入ることができない場合があります。インターフェースの有効性とコードの完全な機能を保証するために、モックデータが必要になる場合があります。この記事では主にExpress+mockjsを使ってバックグラウンドデータ送信機能を擬似的に実装する方法を紹介しますので、必要な方は参考にしていただければ幸いです。

データのシミュレート方法

1. JS変数を使用してバックグラウンドデータをシミュレートします

利点: サーバーは必要ありません

欠点: 大量の変数を作成し、効果的なコードで変数を使用し、最後にそれらを削除する必要があります

2. Ajax 経由で JSON ファイルをリクエストします

利点: アクセスするパスを設定するだけで済み、共同デバッグ段階に入るときに多くの JS コードを変更する必要はありません

欠点: Ajax にはクロスドメインの問題があり、通常、Firefox であってもローカルファイルをリクエストすることはできません。別のファイルディレクトリにある json ファイルにアクセスすることはできません。通常は、IDE または自分でサービスを手動で開始する必要があります

3. リクエストの送信専用のサービスを作成するには、nodejs を使用します。ビジネスロジックは含まれません

利点: フロントエンドコードは共同デバッグに入ります。この段階では、1 つの BasePath を変更するだけで済みます。すべてのインターフェイス名を合意されたパスと一致させることができます。ポストリクエストをテストし、ネットワーク環境をシミュレートできます。短所: 1 と 2 はデータのシミュレーションに適していますが、オンラインプロジェクトの場合は、自分でノードバックエンドを構築することをお勧めします

1。、npm/cnpm

2. Express、mockjsをインストールします

3. ファイルserver.jsを終了し、関連モジュールを導入します

let express = require('express'); //引入express模块
let Mock = require('mockjs');  //引入mock模块
let app = express();    //实例化express

ログイン後にコピー

4. インターフェースのルーティングを設定し、リスニングポートを設定します

/**
 * 配置test.action路由
 * @param {[type]} req [客户端发过来的请求所带数据]
 * @param {[type]} res [服务端的相应对象，可使用res.send返回数据，res.json返回json数据，res.down返回下载文件]
 */
app.all('/test.action', function(req, res) {
 res.send('hello world');
});
/**
 * 监听8090端口
 */
app.listen('8090');

ログイン後にコピー

http://localhost:8090/test.action に直接アクセスすると、インターフェース world' のテキストに直接「hello」が表示されます

5. フォーマットされた JSON データを返すには、mockjs を使用します

app.all('/test.action', function(req, res) {
 /**
  * mockjs中属性名‘|'符号后面的属性为随机属性，数组对象后面的随机属性为随机数组数量，正则表达式表示随机规则，+1代表自增
  */
 res.json(Mock.mock({
  "status": 200,
  "data|1-9": [{
   "name|5-8": /[a-zA-Z]/,
   "id|+1": 1,
   "value|0-500": 20
  }]
 }));
});

ログイン後にコピー

この時点で、ページデータを取得すると、ランダムな json データを取得できます

6. シミュレートされたデータフォルダー testData を作成し、シミュレートされたデータの json ファイルを作成します (注: json ファイルでは正規表現は使用できず、オブジェクト属性は二重引用符で囲まれた文字列である必要があります)。

7. シミュレーションデータファイルをトラバースし、対応するルートを生成します

/*readdir读取目录下所有文件*/
fs.readdir('./testData', function(err, files) {
 if(err) {
  console.log(err);
 } else {
  /*成功读取文件，取得文件名，拼接生成对应action，监听对应接口并返回对应文件数据*/
  files.forEach(function(v, i) {
   app.all(`/${v.replace(/json/, 'action')}`, function(req, res) {
    fs.readFile(`./testData/${v}`, 'utf-8', function(err, data) {
     if(err) {
      console.log(err);
     } else {
      res.json(Mock.mock(JSON.parse(data)));
     }
    })
   })
  })
 }
})

ログイン後にコピー

この時点で、ノードサーバーを使用してサーバーが実行され、フロントエンドでインターフェイスに直接アクセスできます。バックエンドを生成するだけで、バックエンドを介してフロントエンドページにアクセスしない場合、クロスドメインの問題が発生します。それを解決する必要がある場合は、バックエンドにクロスドメインリクエストを追加できます

/*为app添加中间件处理跨域请求*/
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();
});

ログイン後にコピー

ps:モックは正規表現を使用する必要があります。処理のためにルーティングを個別に設定してください。express とモックjs の詳細については、公式 Web サイトの api を確認してください。サンプルコードの詳細な説明

jQuery Ajax がバックグラウンドデータをリクエストし、フォアグラウンドで受信するコードの一部を共有します

Angular を使用してローカル Localstorage データをリアルタイムで取得し、バックグラウンドデータログインをシミュレートする効果を実現します