バックエンドのクラスメートの制約を取り除くためのマスターモック

記事ディレクトリ

序文

今日、前后端分离模式Webアプリケーションの開発は風潮になり、開発段階には不文律があります项目开发后端先行がフロントエンドの開発エンジニアとして、ページを作成した後、バックエンドのインターフェースを待つことしかできませんか？この場合、バックエンド開発によって完全に制限されます。

しかし実際には、インターフェイスから返されるデータ形式を決定するためにバックエンドの学生と交渉するだけで済み、並行して開発することができます。多くの学生は、定義された変数を使用して、開発中のフロントエンドレンダリング作業のためにデータシミュレーションインターフェイスから返されるデータを書き込みます。それは完全に可能ですが更加专业、手段や技術はありますか？
もちろんあります、それはMock私たちですフロントエンドの人々の最後の頑固さを見てみましょう！

モックの概要

ここに画像の説明を挿入
mock：模仿的;虚假的;不诚实的、これは単語としてのモックの翻訳です。もちろん、彼の目的は彼の翻訳と同じものをシミュレートすることです。接口、数据実際、モックの外観は、フロントエンドがフロントの後のバックエンドのクラスメートによって制約されていないことです。 -エンドとバックエンドが分離されています。実際の開発では、バックエンドが表示されます。学生には独自の開発リズムがあり、フロントエンドで考えていたように、数分でインターフェイスを作成することはできません。インターフェイス、バックエンドの学生はまだテーブルを構築する方法について考えていますか？

モックは、バックエンドのクラスメートを促す恥ずかしさを回避し、シミュレーションインターフェイスを完成させ、フロントエンドとバックエンドを並行して開発させ、開発効率を向上させ、バックエンドに引きずられることはありません。

モックはmock.jsであり、彼のプロセスは前端发送请求到后端 =》mock.js拦截请求=》并返回模拟数据给前端です。データについては、事前にバックエンドの学生とフォーマットを定義するだけで済みます。mock.jsは、ルールを通じて実際のデータに近いシミュレーションデータを生成します。これを見て、あなたはモックに本当に興奮していますか？プロジェクトへのmock.jsのアプリケーションを見てみましょう。

mock.jsのインストール

公式ウェブサイトでは、さまざまなフロントエンドプロジェクトのインスタレーションが多数提供されていることがわかります（興味のある学生はそれを見ることができます如果你和博主一样想在Vue项目中去使用的话那么就跳过下面这张图片我们看下面步骤）。
ここに画像の説明を挿入
例としてVueを取り上げて説明します。

1. vueプロジェクト
を作成するvueスキャフォールディングを使用してプロジェクトを作成しますが、この記事にはアクセスしませんhttps://blog.csdn.net/JHXL_/article/details/1076311232.mock.js
ここに画像の説明を挿入
とaxiosをプロジェクトにインストールします

モックはリクエストをインターセプトするため、リクエストを行うにはaxiosをインストールする必要があります。もちろん、ネイティブajaxを使用することもできます。

npm i mockjs -D
npm i axios

ここに画像の説明を挿入
3.インストールが成功したら、プロジェクトを実行します

npm run serve

模擬仕様

注：このセクションは公式ウェブサイトに基づいているため、多くの仕様を理解していなくても構いません。我们可以跳过此小节先看下节的mock的使用

Mock.jsの構文仕様は、次の2つの部分で構成されています。

データテンプレート定義（DTD）
データテンプレートの各属性は、属性名、生成ルール、および属性値の3つの部分で構成されます。
```
// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value
```
注：
プロパティ名と生成ルールは、縦棒|で区切られています。
ルールの生成はオプションです。
ルールを生成するには、次の7つの形式があります。'name
| min-max'： value'name
| count'：
value'name | min-max.dmin-dmax'：
value'name | min-max.dcount'：
value'name | count.dmin-dmax'：値
' name | count.dcount'：値
' name | + step'：value
生成ルールの意味は、属性値のタイプに応じて決定する必要があります。
属性値には@プレースホルダーを含めることができます。
プロパティ値は、初期値と最終値のタイプも指定します。
データプレースホルダー定義（DPD）
プレースホルダーは、属性値文字列内の位置のみを占め、最終的な属性値には表示されません。
プレースホルダーの形式は次のとおりです。
```
@占位符
@占位符(参数 [, 参数])
```
注：
@に続く文字列は、プレースホルダーです。
プレースホルダーは、Mock.Randomのメソッドを参照します。
Mock.Random.extend（）を使用してカスタムプレースホルダーを拡張します。
プレースホルダーは、データテンプレートのプロパティを参照することもできます。
プレースホルダーは、データテンプレートのプロパティよりも優先されます。
プレースホルダーは、相対パスと絶対パスをサポートします。
```
Mock.mock({
      
      
    name: {
      
      
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
      
      
    "name": {
      
      
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}
```

上記はモックの仕様の簡単な紹介ですが、実際には彼にはたくさんのルールがあります。これらのルールをマスターした後、シミュレートできるデータがより現実的で面倒なデータになることを公式に確認できます。簡単に生成できます！
https://github.com/nuysoft/Mock/wiki/Syntax-Specification

モックの使用

1.モックファイルを作成します

srcフォルダーの下にモックフォルダーを作成します
モックフォルダーにjsonフォルダーを作成します
mockフォルダーにindex.jsファイルを作成します

ここに画像の説明を挿入
2. mockの下のindex.jsにmockを導入し、モック応答コンテンツを作成します

// 引入 mock.js
const Mock = require('mockjs')
//Mock.mock  接口，请求方式，返回数据（数据就是json文件夹中的文件自行添加）
Mock.mock('/user/list', 'get', require('./json/userList'))

説明：Mock.mock()
このメソッドは、次の形式で、シミュレートされたデータをインターセプトして返すというリクエストに一致します。

Mock.mock( rurl, template )

データテンプレートを記録します。rurlに一致するAjaxリクエストがインターセプトされると、シミュレーションデータがデータテンプレートに従って生成され、応答データとして返されます。

Mock.mock( rurl, function( options ) )

応答データの生成に使用される関数を文書化します。rurlに一致するAjaxリクエストがインターセプトされると、関数function(options)が実行され、実行結果が応答データとして返されます。

Mock.mock( rurl, rtype, template )

データテンプレートを記録します。rurlとrtypeに一致するAjaxリクエストがインターセプトされると、データテンプレートに従ってモックデータが生成され、応答データとして返されます。

Mock.mock( rurl, rtype, function( options ) )

応答データの生成に使用される関数を文書化します。rurlとrtypeに一致するAjaxリクエストがインターセプトされると、関数function（options）が実行され、実行結果が応答データとして返されます。

もちろん、私たちのモックにはいくつかの方法がありますが、公式ウェブサイトでさらに多くの方法を見つけることができます！
ここに画像の説明を挿入

3.mockフォルダーの下のjsonフォルダーで参照したuserList.jsonを作成します
ここに画像の説明を挿入

{
    
    
    "status": 0,
    "data|10": [
        {
    
    
            "id|+1": 1001,
            "company": "10001",
            "username": "ceshi1",
            "age": 25
        }
    ],
    "msg": ""
}

4.次に、ページに移動してリクエストをテストし、ページを
見つけます。新しいプロジェクトであるため、ページのコンテンツを削除して更新コンテンツに置き換えます。
ここに画像の説明を挿入

次に、axiosを導入し、イベントを登録してリクエストを送信します。。

<template>
  <div>
      <div @click="btnClick" class="btn">
          这是测试
      </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
    
    
  data() {
    
    
    return {
    
    };
  },

  methods: {
    
    
    async btnClick() {
    
    
      const res = await axios.get("/user/list");
      console.log(res.data.data);
    },
  },
};
</script>

<style>
</style>

次に、クリックしてインターフェースを検出または要求します。なぜですか。前のステップが欠落していることが判明しました。つまり、メインのモックを参照して、
ここに画像の説明を挿入
正常に再試行する必要があります。

要約する

上記の使用法からわかるように、フロントエンドから送信されたリクエストは、Mock.mockメソッドのURLと一致する限り、モックによってインターセプトされます。モックを使用すると、 URLに一致し、ネットワークはリクエストなしで、モックは定義したURLルールに従って対応するデータを返します。実際の開発では、フロントエンドでの多くのポストプロダクション作業は、後に返されたデータに従って実行されます。インターフェイスのデバッグ。バックエンドインターフェイスに依存しすぎます。バックエンドから返されるデータの形式がわかっている限り、mock.jsを介してインターフェイスをシミュレートするデータを生成できるため、次のことができます。また、インターフェイスを調整する前に、データのレンダリングとデバッグの作業を自分で実行します。