vue がローカル データ構成を要求するバックグラウンド データをシミュレートする方法

フロントエンド フレームワークの継続的な開発に伴い、フロントエンドとバックエンドの分離開発モデルの使用を選択する企業が増えています。この場合、フロントエンドは、バックグラウンドとの共同デバッグがスムーズに進行できることを確認するために、バックグラウンド データ リクエストをシミュレートして開発したページをテストする必要があります。この記事では、Vue フレームワークを使用してバックグラウンド データ リクエストのローカル データ構成をシミュレートする方法を紹介します。

1. Vue-cli 3.x スキャフォールディング プロジェクト

まず、Vue-cli 3.x スキャフォールディングを使用してプロジェクトを作成する必要があります。この記事ではここでは詳しく説明しません。次に、作成したプロジェクトの src ディレクトリに新しいモック ディレクトリを作成し、シミュレーション データを保存できます。

2. Mock.js のインストールと構成

1. インストール

プロジェクト ディレクトリで次のコマンド ラインを使用して、Mock.js をインストールします。

npm install mockjs -D

2. Configuration

プロジェクト ディレクトリの src/mock ディレクトリにmock.js ファイルを作成し、その中で設定します:

import Mock from 'mockjs'

//这是模拟数据示例
Mock.mock('/api/getList', 'get', {
    code: 0,
    message: 'ok',
    data: {
        list: [
            { id: 1, name: '兰博基尼', price: '1亿', color: 'red' },
            { id: 2, name: '法拉利', price: '2亿', color: 'blue' },
            { id: 3, name: '奥迪', price: '3亿', color: 'black' },
            { id: 4, name: '宝马', price: '4亿', color: 'white' }
        ]
    }
})

Mock.mock ('/api/getList', 'get', {})、'/api/getList' はリクエストされたインターフェース アドレス、'get' はリクエスト メソッド (POST、GET など)、{} は返されたデータですインターフェースによって。

3. Mock.js ファイルの導入

mock.js ファイルを main.js に導入し、Vue.prototype の Mock メソッドをバインドして、コンポーネント API が使用時:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import './mock/mock.js'

Vue.config.productionTip = false

//将mock绑定到Vue实例的原型上
Vue.prototype.$Mock = Mock

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3. シミュレートされたデータの呼び出し

コンポーネントでシミュレートされたデータを呼び出すには、Vue.prototype.$Mock.mock() メソッドを使用できます

//示例中的调用请求
methods: {
    getData() {
        this.$Mock.mock('/api/getList', 'get', {});
        this.$http.get('/api/getList').then(res => {
            //响应成功操作
            console.log(res);
        }, error => {
            //响应失败操作
            console.log(error);
         })
     }
}

この方法 ページ内で this.$http.get('/api/getList') を使用してバックグラウンド データをリクエストし、共同デバッグの前に、mock.js ファイルでシミュレートされたリクエストを作成できます。このようにして、共同デバッグ中に発生する可能性のある問題を回避しながら、開発プロセス中にコードの正確性を完全にテストできます。

要約:

フロントエンドとバックエンドが別々に開発される時代では、フロントエンドはバックエンドとのインターフェースを共同でデバッグする必要がありますが、ソフトウェア開発プロセスでは、 、共同デバッグには特定の問題が発生することがよくあります。共同デバッグ時の互換性の問題に加えて、フロントエンドとバックエンドを同時に開発できないという問題も解決する必要があります。したがって、Mock.js を導入してバックエンド データ リクエストをシミュレートすると、この問題を解決できます。簡単に言うと、「バックエンド インターフェイスをシミュレートすることで、フロントエンドはフロントエンド ページの論理的正確性を独立してテストできるようになります。これにより、フロントエンドの開発効率が完全に向上し、開発コストが節約され、エラー率が減少します」複数人での共同開発を可能にし、データのシミュレーション時に不要なトラブルを回避します。

以上がvue がローカル データ構成を要求するバックグラウンド データをシミュレートする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。