MockJSは何ですか
バックエンドの開発環境のフロントを分離した後、フロントエンドは、学生が開発し続けるためには、バックエンドのインターフェースとインターフェースのドキュメントを待つ必要が学生に提供します。MockJSは、学生は独立学生バックエンドのフロントエンドを開発することができ、学生は最初のサービス・インターフェース・ドキュメントと使用MockJSアナログバックエンドインターフェースに従ってチップを並べ替えることができます。だから、MockJSバックエンドインターフェイスは、それをシミュレートする方法ですか？学生にリアアナログインターフェースを提供するために、特定のAJAXリクエストを遮断し、乱数の所定のデータ・タイプを生成することによりMockJS。
準備
上に書い：いくつかの小さなパートナーは、フロントエンド環境を配備しないことがあり、そしてここで私は、コードをアップロードしますgithubの、少し必要性パートナーは、以下の輝くチュートリアルを参照するためのコードを、コードをダウンロードすることができますがあります。
最初MockJSを実装、アナログテストインタフェースを送信するように取り付けられAxios AJAX要求である、そのような天然またはAJAXリクエストの$アヤックスのような他の手段の使用が可能であり、AJAXリクエストをインストールせずに他の方法がaxiosを送りました。
npm install mockjs --save
npm install axios --save
复制代码使用のWebPACKのパッケージングツールはVUE 1つのファイルをパッケージ化。まず、CSS-ローダー、スタイル・ローダー、VUE、VUE-ローダー、VUEのテンプレートコンパイラをインストールします。
npm install css-loader style-loader --save-dev
npm install vue vue-loader vue-template-compiler --save-dev
复制代码次に、図のように完全な構成、対応するローダwebpack.config.jsプロファイルに加えました。
const path = require("path");
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
entry: './webapp/App.js',
output: {
filename: 'App.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.css/,
use: ['style-loader', 'css-loader']
},
{
test: /\.vue$/,
use: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
],
mode: "production"
}
复制代码Mock.jsは、ファイルを作成し、（main.js）は、入口ファイルで導入しました。
require('./mock.js');
复制代码mock.jsファイルで導入MockJS。
import Mock from 'mockjs';
复制代码その後、我々はmock.jsアナログインターフェースに書き込みます。
次のようにディレクトリ構造は次のとおりです。
開始
2つのアナログ・インターフェースは、データテンプレートの定義が使用されて返されたデータMockJSを定義する方法、このように大きな自由度、ランダムなデータタイプをカスタマイズすることができ、1はランダムMockJS定義ツールを使用する方法ではありますが、このように自由度が提供される唯一のランダムなデータ・タイプMockJS小さいです。2.ツールRndomアナログインタフェースは戻り値の定義をスキップすることができ、小さなパートナーを急いで。
1.データテンプレート定義アナログインタフェース戻り値
最初の例を与えます
//mock.js数据模板
{
'string|1-10':'string'
}
//接口返回的生成的数据===>
{
'string':'stringstringstring'
}
复制代码以下のためのデータ形式テンプレート「属性名|生成規則」：「プロパティ値」ルールを生成するために生成されたデータのプロパティ値を決定します。つまり、ルールの7種類の合計を生成します。
- 「名前|最小 - 最大」：値
- 「名前|カウント数」：値
- '名前|分-max.dmin-DMAX'：値
- '名前|分-max.dcount'：値
- '名前| count.dmin-DMAX'：値
- '名前| count.dcount'：値
- 「名前| +ステップ」：値
異なるデータ型の場合は、ルールが異なる生成するために使用することができ、属性値のデータ型は数値、ブール値、文字列、オブジェクト、配列、関数、ヌルは、未定義ではないかもしれないことができ、私は、各データ型以下になりますそれぞれ7つの世代のルールでは、ルールを生成するために使用することができ、各データの種類を観察するために、我々は直接に表1.8にプルアップ学生の結論を直接見たいです。
1.1'name |最小 - 最大 '：値
始める前に、あなたは私に行くことができますgithubのランダムなデータの種類を特定のルールをリフレッシュすることによって、各世代のプロジェクトより直感的に理解して、プロジェクトをダウンロードして実行します。
mock.jsファイルにおいて、アレイDATA1は、ランダムに生成されたプロパティ値を保持する定義、およびオブジェクトプロパティ値生成ROW1ストアを定義し、アナログインタフェースを定義する、要求は、アナログインタフェースaxios使用するための要求を開始するデータApp.vueそしてテーブルに表示。
const data1=[];
//数据模板'name|min-max':value
let row1={
'string|1-9':'string',
'number|1-9':1,
'boolean|1-9':false,
'undefined|1-9':undefined,
'null|1-9':null,
'object|1-9':{object1:'object1',object2:'object2',object3:'object3'},
'array|1-9':['array1','array2'],
'function|1-9':()=>'function'
};
data1.push(row1);
//定义模拟接口只能接收post请求，定义返回的数据为data1
Mock.mock('/Get/list1','post',data1);
复制代码ランダムに生成された数値のために1-9です。
ブール型分/（分+最大）値発生確率値、最大値/（最小+最大）確率世代！バリュー値、I 10％の確率世代偽、90％の確率生成真の場合。
直接未定義の値は無視され、未定義のプロパティ名は、生成されたオブジェクトに存在しません。
NULL値を生成するためのnullです。
オブジェクト、最初のランダムに生成された値MIN-MAX値について、その値がオブジェクトの属性の数よりも大きい場合には、新しいオブジェクトを形成するために、オブジェクトの属性値をオフに選択し、すべてのアウト属性、図5月ああ、対象オブジェクトの属性は、新しいオブジェクトを形成するために、すべての出ている参照してください。
アレイの場合、最小 - 最大値にランダム値を生成するために、アレイ要素値が配列に結合回繰り返される、次に、それは図6のランダムな値を見ることができ、図6は、星の新しい配列を組み込みます配列。
機能に直接関数と関数の戻り値を実行します。
1.2'name |数 '：値
//数据模板'name|count':value
let row2={
'string|3':'string',
'number|3':1,
'boolean|3':false,
'undefined|3':undefined,
'null|3':null,
'object|3':{object1:'object1',object2:'object2',object3:'object3'},
'array|3':['array1','array2'],
'function|3':()=>'function'
};
data1.push(row2);
复制代码|文字列のカウントルールcount回繰り返され、新しい文字列が来ている、図では、3回繰り返し見ることができます。
値は、カウントデータの値について生成されます。
ブールタイプ（カウント-1）/値を生成する確率のカウント値、1 /計数確率生成！バリュー値のために、私はここにある偽の生成の66.7％の確率、真の生成の33.3％の確率です。
直接未定義の値は無視され、未定義のプロパティ名は、生成されたオブジェクトに存在しません。
NULL値を生成するためのnullです。
オブジェクトの場合、選択したオブジェクトの属性がカウントは、オブジェクトの属性の数よりも大きい場合は、すべてのアウト属性、新しいオブジェクトを形成するために、アウトカウント、全てのオブジェクトのオブジェクト属性が出て構成されており、図ああで見ることができます新しいオブジェクト。
アレイは、アレイ素子アレイに繰り返し、合わせた回数をカウントし、それが新しい配列を生成するために、3つのアレイを組み込んだ、3のうちランダム値図に見ることができます。
機能に直接関数と関数の戻り値を実行します。
1.3'name |分-max.dmin-DMAX '：値
//数据模板'name|min-max.dmin-dmax':value
let row3={
'string|1-9.1-9':'string',
'number|1-9.1-9':1, //只有数值起作用
'boolean|1-9.1-9':false,
'undefined|1-9.1-9':undefined,
'null|1-9.1-9':null,
'object|1-9.1-9':{object1:'object1',object2:'object2',object3:'object3'},
'array|1-9.1-9':['array1','array2'],
'function|1-9.1-9':()=>'function'
};
data1.push(row3);
复制代码|最小 - 最大ルール|ミンmax.dmin-DMAXルールは文字列です。
値については、浮動小数点を生成することで、浮動小数点整数部分は最小 - 最大であり、小数点以下の桁数は、Dminを-DMAXです。図3は、2ビットのビット整数値3.59を小数発生しました。
最小 - 最大ルール|ブールタイプのためにあります
直接未定義の値は無視され、未定義のプロパティ名は、生成されたオブジェクトに存在しません。
NULL値を生成するためのnullです。
最小 - 最大ルール|また、オブジェクトの場合
最小 - 最大ルール|アレイであるために
機能に直接関数と関数の戻り値を実行します。
1.4'name |分-max.dcount '：値
//数据模板'name|min-max.dcount':value
let row4={
'string|1-9.3':'string',
'number|1-9.3':1, //只有数值起作用
'boolean|1-9.3':false,
'undefined|1-9.3':undefined,
'null|1-9.3':null,
'object|1-9.3':{object1:'object1',object2:'object2',object3:'object3'},
'array|1-9.3':['array1','array2'],
'function|1-9.3':()=>'function'
};
data1.push(row4);
复制代码|最小 - 最大ルール|ミンmax.scountルールは文字列です。
値については、浮動小数点を生成することで、浮動小数点整数部分は最小 - 最大であり、小数点以下の桁数がscountあります。図6整数ビットは、6.725の値の小数点以下3桁を生成しました。
最小 - 最大ルール|ブールタイプのためにあります
直接未定義の値は無視され、未定義のプロパティ名は、生成されたオブジェクトに存在しません。
NULL値を生成するためのnullです。
最小 - 最大ルール|また、オブジェクトの場合
最小 - 最大ルール|アレイであるために
機能に直接関数と関数の戻り値を実行します。
1.5'name | count.dmin-DMAX '：値
//数据模板'name|count.dmin-dmax':value
let row5={
'string|3.1-9':'string',
'number|3.1-9':1, //只有数值起作用
'boolean|3.1-9':false,
'undefined|3.1-9':undefined,
'null|3.1-9':null,
'object|3.1-9':{object1:'object1',object2:'object2',object3:'object3'},
'array|3.1-9':['array1','array2'],
'function|3.1-9':()=>'function'
};
data1.push(row5);
复制代码|カウントルール| Count.dmin-DMAXルールは文字列です。
値については、浮動小数点を生成することで、浮動小数点値は、COUNTの整数部分であり、小数点以下の桁数は、Dminを-DMAX位置です。図3は、6 3.035354のビット整数の10進数値を生成しました。
ブールタイプの場合です|カウントルール
直接未定義の値は無視され、未定義のプロパティ名は、生成されたオブジェクトに存在しません。
NULL値を生成するためのnullです。
また、オブジェクトの場合|規則を数えます
カウントルール|アレイであるために
機能に直接関数と関数の戻り値を実行します。
1.6'name | count.dcount '：値
//数据模板'name|count.dcount':value
let row6={
'string|3.3':'string',
'number|3.3':1, //只有数值起作用
'boolean|3.3':false,
'undefined|3.3':undefined,
'null|3.3':null,
'object|3.3':{object1:'object1',object2:'object2',object3:'object3'},
'array|3.3':['array1','array2'],
'function|3.3':()=>'function'
};
data1.push(row6);
复制代码|カウントルール| Count.dcountルールは文字列です。
値については、浮動小数点を生成することで、浮動小数点値は、COUNTの整数部分であり、小数点以下の桁数のビットをDCOUNT。図3は、3.425〜3のビット整数進値を生成しました。
ブールタイプの場合です|カウントルール
直接未定義の値は無視され、未定義のプロパティ名は、生成されたオブジェクトに存在しません。
NULL値を生成するためのnullです。
また、オブジェクトの場合|規則を数えます
カウントルール|アレイであるために
機能に直接関数と関数の戻り値を実行します。
1.7'name | +ステップ '：値
//数据模板'name|+step':value
let row7 = {
'string|+3': 'string',
'number|+3': 1, //只有数值起作用
'boolean|+3': false,
'undefined|+3': undefined,
'null|+3': null,
'object|+3': {
object1: 'object1',
object2: 'object2',
object3: 'object3'
},
'array|+3': ['array1', 'array2'],
'function|+3': () => 'function'
};
data1.push(row7);
复制代码| +直接文字列に、効果がなかった文字列の手順ルール。
値は、値を増加させる値プリセット値の初期値、ステップは、数値を増加させる下のボタンをクリックするたびに再要求は、4 3となります。
ブールタイプの場合はブール値が返さ直接に、効果がなかったです。
直接未定義の値は無視され、未定義のプロパティ名は、生成されたオブジェクトに存在しません。
NULL値を生成するためのnullです。
オブジェクトの場合、オブジェクトが返され、直接に、効果がなかったです。
リストについては、最大のアレイを超えてボタンをクリックすると、0 + 3 = 3の添字の値として、添字を段階的増加をさせ、再び0の配列インデックス値、各要求に対する第1の要求を返しますボタンのクリックが1の配列添字の値に戻るようになるようにインデックス値2マイナス配列インデックス値まで配列の長さは、3-2 = 1の最大屈折率の範囲内である添字1、。
機能に直接関数と関数の戻り値を実行します。
1.8概要
| 弦 | 数 | ブーリアン | 未定義 | ヌル | オブジェクト | アレイ | 関数 | |
|---|---|---|---|---|---|---|---|---|
| |最小 - 最大 | 文字列が最小 - 最大2回繰り返した後、スプライスは、新しい文字列を明らかにする | 最小 - 最大の値を受けるように無作為化されました | 分/（分+最大）値発生確率値、最大値/（最小+最大）の確率世代！値の値 | 現在のデータ型が無効です | 戻り値はnull | まず、ランダム値最小 - 最大値を生成し、その値がオブジェクトの属性の数よりも大きい場合は、新しいオブジェクトを形成するために、オブジェクトの属性値を選択し、すべてがアウト属性 | 最初のランダムに生成された最小 - 最大値の値、及び、配列要素の値がアレイ内に2回繰り返さ組み合わされ | 直接実行機能と関数の値を返します。 |
| |数 | 文字列count回繰り返され、新しい文字列を来ります | 値に等しい数の生成 | （カウント-1）/値生成確率値をカウントし、1 /計数確率生成！バリュー値 | 現在のデータ型が無効です | 戻り値はnull | カウントは、オブジェクトの属性の数よりも大きい場合は、新しいオブジェクトを形成するために、アウトカウントするオブジェクトのプロパティを選択して、すべてがアウト属性 | 配列要素は、カウント回繰り返し、次いで、アレイに結合します | 直接実行機能と関数の値を返します。 |
| |マイmax.dmin-DMAX | ルール|最小 - 最大同じ | 浮動小数点を生成する、フロートの整数部分は、最小 - 最大であり、小数点以下の桁数は、DMIN、DMAXれます | ルール|最小 - 最大同じ | 現在のデータ型が無効です | 戻り値はnull | ルール|最小 - 最大同じ | ルール|最小 - 最大同じ | 直接実行機能と関数の値を返します。 |
| |分-max.dcount | ルール|最小 - 最大同じ | 浮動小数点を生成する、フロートの整数部分は、最小 - 最大であり、小数点以下の桁数はDCOUNTあります | ルール|最小 - 最大同じ | 現在のデータ型が無効です | 戻り値はnull | ルール|最小 - 最大同じ | ルール|最小 - 最大同じ | 直接実行機能と関数の値を返します。 |
| | count.dmin-DMAX | そして、|同じルールを数えます | 浮動小数点を生成する、浮動小数点値は、COUNTの整数部分であり、小数点以下の桁数のDmin-DMAXビット | そして、|同じルールを数えます | 現在のデータ型が無効です | 戻り値はnull | そして、|同じルールを数えます | そして、|同じルールを数えます | 直接実行機能と関数の値を返します。 |
| | count.dcount | そして、|同じルールを数えます | 浮動小数点数を生成し、浮動小数点数COUNTの整数部の値は、小数点以下の桁のビット数がDCOUNTであります | そして、|同じルールを数えます | 現在のデータ型が無効です | 戻り値はnull | そして、|同じルールを数えます | そして、|同じルールを数えます | 直接実行機能と関数の値を返します。 |
| | +ステップ | 効果なし、値が直接返されません | 初期値は予め設定された値は、各数値の値は、一度再要求ステップ値を増加させます | 効果なし、値が値を返しません | 現在のデータ型が無効です | 戻り値はnull | 効果なし、値が値を返しません | 初期値は、インデックス値、再び各要求の予め設定された値であり、添え字値は、ステップの値を増加させます | 直接実行機能と関数の値を返します。 |
どこ|分-max.dmin-DMAX、|分-max.dcount、| count.dmin-DMAX、|これら四つのルールは主に番号を入力するために使用されているcount.dcount。
2.ツールRndom戻り値のクラス定義のアナログインターフェース
MockJSは私たちにあなたが望む高速なランダムデータを聞かせて一連のメソッドを提供します。
{
'Boolean': Random.boolean, // 随机生成布尔类型
'Natural': Random.natural(1, 100), // 随机生成1到100之间自然数
'Integer': Random.integer(1, 100), // 生成1到100之间的整数
'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
'Character': Random.character(), // 生成随机字符串,可加参数定义规则
'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
'Range': Random.range(0, 10, 2), // 生成一个数组，数组元素从0开始到10结束，间隔为2
'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式，默认yyyy-mm-dd
'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据，生成Random.size指定大小的，背景为'#02adea'的，内容为'Hello'的图片
'Color': Random.color(), // 生成一个颜色随机值
// 'Paragraph':Random.paragraph(2, 5), //生成2至5个句子的文本
'Name': Random.name(), // 生成姓名
'Url': Random.url(), // 生成url地址
'Address': Random.province() // 生成地址
}
复制代码同じ必要性は、データを整理するためのアナログインタフェース後に設定されます。
Mock.mock('/Get/list2', 'post', data2) ;
复制代码アナログデータを取得し、AJAXを介してインターフェイスにアクセスします。
完全なコード：
//mock.js
let data2 = [] // 用于接受生成数据的数组
let size = [
'300x250', '250x250', '240x400', '336x280',
'180x150', '720x300', '468x60', '234x60',
'88x31', '120x90', '120x60', '120x240',
'125x125', '728x90', '160x600', '120x600',
'300x600'
] // 定义随机值
for(let i = 0; i < 10; i ++) { //生成10个对象放到数组中
let template = {
'Boolean': Random.boolean, // 可以生成基本数据类型
'Natural': Random.natural(1, 100), // 生成1到100之间自然数
'Integer': Random.integer(1, 100), // 生成1到100之间的整数
'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
'Character': Random.character(), // 生成随机字符串,可加参数定义规则
'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
'Range': Random.range(0, 10, 6), // 生成一个随机数组
'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式
'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据
'Color': Random.color(), // 生成一个颜色随机值
'Paragraph':Random.paragraph(2, 5), //生成2至5个句子的文本
'Name': Random.name(), // 生成姓名
'Url': Random.url(), // 生成web地址
'Address': Random.province() // 生成地址
}
data2.push(template)
}
Mock.mock('/Get/list2', 'post', data2) // 声明模拟接口
//App.vue
axios('/Get/list2').then(res => {
this.dataShow2 = res;
});
复制代码概要
MockJS使前后分离程度更高，同时，我认为最重要的是他使前端人员也开始思考业务。传统开发中，前端人员多是等待后端人员提供的接口及接口文档，不懂得主动梳理接口文档，使用MockJS后前端人员可以从项目整体的角度出发，能更好的参与到项目之中。
交流
如果这篇文章帮到你了，觉得不错的话来点个Star吧。 github.com/lizijie123
转载于:https://juejin.im/post/5cf726b5e51d454fbf5409bc