ホームページ > ウェブフロントエンド > jsチュートリアル > Express+mockjsでバックグラウンドデータ送信を実装する方法

Express+mockjsでバックグラウンドデータ送信を実装する方法

亚连
リリース: 2018-06-13 14:09:14
オリジナル
2653 人が閲覧しました

この記事では主に、模擬バックグラウンドデータ送信機能を実装するためのexpress+mockjsを紹介します

前書き:

ほとんどの場合、フロントエンドとバックエンドは次のようになります。ページの完成と同時に開発することになりますが、現時点では、インターフェースとコードの完全な機能を実現するには、データのシミュレーションが必要になる場合があります。

データのシミュレーション方法

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

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

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

2. ajaxを通してjsonファイルをリクエストします

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

欠点: Ajax にはクロスドメインの問題があり、通常はローカル ファイルをリクエストできません。通常は、IDE または自分でサービスを手動で開始する必要があります

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

利点: フロントエンド コードが共同デバッグ段階に入ると、すべてのインターフェイス名を合意されたパスと一致させるだけで済み、ポスト リクエストをテストできます。欠点: バックエンドを自分で作成する必要があります。 1 と 2 の 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 に直接アクセスできます。「hello world」というテキストを参照してください

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)));
     }
    })
   })
  })
 }
})
ログイン後にコピー

この時点で、node server.js を使用してノード サーバーが正常に構築されました。フロントエンドでインターフェイスに直接アクセスできますが、バックエンドを生成するだけで、フロントエンドページがバックエンド経由でアクセスされない場合、クロスドメインの問題が発生する可能性があります。それを解決する必要がある場合は、追加することができます。バックエンドでのクロスドメインリクエスト

/*为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 と mockjs の詳細な手順については、公式 Web サイトの API を確認してください

上記は私がコンパイルしたものです。将来すべての人にとって役立つことを願っています。

関連記事:

JavaScriptでパスをbase64エンコーディングに変換する方法

VUEにおけるie9互換性の詳細な解釈

パーセルを使用してvueスキャフォールディングを構成する方法(詳細なチュートリアル)

以上がExpress+mockjsでバックグラウンドデータ送信を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート