MockJS快速入門

時間  2019-11-08
標籤 mockjs 快速 入門 简体版
原文   原文鏈接

什麼是MockJS

在先後端分離的開發環境中，前端同窗須要等待後端同窗給出接口及接口文檔以後，才能繼續開發。而MockJS可讓前端同窗獨立於後端同窗進行開發，前端同窗能夠根據業務先梳理出接口文檔並使用MockJS模擬後端接口。那麼MockJS是如何模擬後端接口的呢？MockJS經過攔截特定的AJAX請求，並生成給定的數據類型的隨機數，以此來模擬後端同窗提供的接口。css

準備工做

寫在最前面：有的小夥伴可能不太會部署前端環境，這裏我將代碼上傳到github中，有須要的小夥伴能夠把代碼下載下來，對照着代碼看下面的教程。html

首先安裝MockJS，安裝axios是爲了發送AJAX請求測試模擬的接口，使用其餘方式如原生AJAX請求或$.ajax都是能夠的，使用其餘方式發送AJAX請求無需安裝axios。前端

npm install mockjs --save
npm install axios --save
複製代碼

使用webpack打包工具打包vue單文件。 首先安裝css-loader、style-loader、vue、vue-loader、vue-template-compiler。vue

npm install css-loader style-loader --save-dev
npm install vue vue-loader vue-template-compiler --save-dev
複製代碼

而後在webpack.config.js配置文件中添加對應的loader,完整的配置圖以下。webpack

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)引入。ios

require('./mock.js');
複製代碼

在mock.js文件中引入MockJS。git

import Mock from 'mockjs';
複製代碼

後面咱們將在mock.js中編寫模擬接口。github

目錄結構以下：web

index.html是主頁文件，main.js是入口文件，mock.js是模擬接口文件，webpack.config.js是webpack配置文件，./dist/main.js是打包後的入口文件，./src/axios/api.js是封裝axios請求的文件。

正式開始

MockJS有兩種方式定義模擬接口返回的數據，一種是使用數據模板定義，這種方式自由度大，能夠自定義各類隨機的數據類型，一種是使用MockJS的Random工具類的方法定義，這種方式自由度小，只能隨機出MockJS提供的數據類型。趕時間的小夥伴能夠直接跳到2.使用Rndom工具類定義模擬接口返回值。ajax

1.數據模板定義模擬接口返回值

先舉一個例子

//mock.js數據模板
{
    'string|1-10':'string'
}
//接口返回的生成的數據===>
{
    'string':'stringstringstring'
}
複製代碼

數據模板的格式爲 '屬性名|生成規則':'屬性值' ,生成規則決定了生成的數據的屬性值。 生成規則一共有7種，分別是：

  1. 'name|min-max': value
  2. 'name|count': value
  3. 'name|min-max.dmin-dmax': value
  4. 'name|min-max.dcount': value
  5. 'name|count.dmin-dmax': value
  6. 'name|count.dcount': value
  7. 'name|+step': value

對於不一樣的數據類型，能夠使用的生成規則是不一樣的，屬性值的數據類型能夠是Number、Boolean、String、Object、Array、Function、Null，不能夠是Undefined，下面我將對每一種數據類型分別使用7種生成規則，以此來觀察每一種數據類型能夠使用哪些生成規則，想要直接看結論的同窗直接拉至1.8的表格中。

1.1'name|min-max': value

在開始以前你們能夠去個人github把項目下載運行起來，結合項目更加直觀，經過刷新瞭解每個生成規則具體隨機出了什麼樣的數據。

在mock.js文件中，定義一個數組data1用於存放隨機生成的屬性值，而後定義一個對象row1存放生成的屬性值，而後定義模擬接口，在App.vue中使用axios發起請求向模擬接口請求數據並顯示在表格中。

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);
複製代碼

|min-max規則對於字符串是重複min-max次得出新的字符串，圖中能夠看出重複了4次。

對於數值是隨機生成1-9的數值。

對於布爾類型是min/(min+max)機率生成value值，max/(min+max)機率生成!value值，我這裏是10%機率生成false,90%機率生成true。

undefined值直接被忽略了，生成的對象中不存在undefined屬性名。

對於null生成的值是null。

對於對象，先在min-max中隨機生成一個數值value，而後選取該對象的value個屬性出來組成一個新的對象，若value大於該對象的屬性個數，則將全部屬性拿出來，圖中能夠看到object對象的全部哦屬性被拿出來組成了一個新的對象。

對於數組，先在min-max中隨機生成一個數值value，而後將數組元素重複value次而後合併爲一個數組，圖中能夠看出隨機出來的數值爲6，合併了6個數組得出一個新的數組。

對於函數則直接執行函數並返回了函數的值。

1.2'name|count':value

//數據模板'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);
複製代碼

第二行是經過'name|count':value規則生成的

|count規則對於字符串是重複count次得出新的字符串，圖中能夠看出重複了3次。

對於數值是生成一個值爲count的數據。

對於布爾類型是(count-1)/count機率生成value值，1/count機率生成!value值，我這裏是66.7%機率生成false,33.3%機率生成true。

undefined值直接被忽略了，生成的對象中不存在undefined屬性名。

對於null生成的值是null。

對於對象，選取該對象的count個屬性出來組成一個新的對象，若count大於該對象的屬性個數，則將全部屬性拿出來，圖中能夠看到object對象的全部哦屬性被拿出來組成了一個新的對象。

對於數組，將數組元素重複count次而後合併爲一個數組，圖中能夠看出隨機出來的數值爲3，合併了3個數組得出一個新的數組。

對於函數則直接執行函數並返回了函數的值。

1.3'name|min-max.dmin-dmax':value

//數據模板'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);
複製代碼

第三行是經過'name|min-max.dmin-dmax':value規則生成的。

|min-max.dmin-dmax規則對於字符串就是|min-max規則。

對於數值，是生成一個浮點數，浮點數的整數部分是min-max，小數的位數是dmin-dmax。圖中生成整數位3小數位數爲2位的值3.59。

對於布爾類型就是|min-max規則

undefined值直接被忽略了，生成的對象中不存在undefined屬性名。

對於null生成的值是null。

對於對象也是|min-max規則

對於數組也是|min-max規則

對於函數則直接執行函數並返回了函數的值。

1.4'name|min-max.dcount':value

//數據模板'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);
複製代碼

第四行是經過'name|min-max.scount':value規則生成的。

|min-max.scount規則對於字符串就是|min-max規則。

對於數值，是生成一個浮點數，浮點數的整數部分是min-max，小數的位數是scount。圖中生成整數位6小數位數爲3位的值6.725。

對於布爾類型就是|min-max規則

undefined值直接被忽略了，生成的對象中不存在undefined屬性名。

對於null生成的值是null。

對於對象也是|min-max規則

對於數組也是|min-max規則

對於函數則直接執行函數並返回了函數的值。

1.5'name|count.dmin-dmax':value

//數據模板'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);
複製代碼

第五行是經過'name|count.dmin-dmax':value規則生成的。

|count.dmin-dmax規則對於字符串就是|count規則。

對於數值，是生成一個浮點數，浮點數的整數部分的值是count，小數的位數是dmin-dmax位。圖中生成整數位3小數位數爲6位的值3.035354。

對於布爾類型就是|count規則

undefined值直接被忽略了，生成的對象中不存在undefined屬性名。

對於null生成的值是null。

對於對象也是|count規則

對於數組也是|count規則

對於函數則直接執行函數並返回了函數的值。

1.6'name|count.dcount':value

//數據模板'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);
複製代碼

第六行是經過'name|count.dcount':value規則生成的。

|count.dcount規則對於字符串就是|count規則。

對於數值，是生成一個浮點數，浮點數的整數部分的值是count，小數的位數是dcount位。圖中生成整數位3小數位數爲3位的值3.425。

對於布爾類型就是|count規則

undefined值直接被忽略了，生成的對象中不存在undefined屬性名。

對於null生成的值是null。

對於對象也是|count規則

對於數組也是|count規則

對於函數則直接執行函數並返回了函數的值。

1.7'name|+step':value

//數據模板'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);
複製代碼

第七行是經過'name|+step':value規則生成的。

|+step規則對於字符串就是無做用，直接將字符串返回。

對於數值，初始值爲預設的value值1，每從新請求一次時數值會增長一個step值，點擊下方按鈕後，數值增長3變爲4。

對於布爾類型無做用，直接將布爾值返回。

undefined值直接被忽略了，生成的對象中不存在undefined屬性名。

對於null生成的值是null。

對於對象也是無做用，直接將對象返回。

對於數組，第一次請求時返回數組下標爲0的值，每從新請求一次時，讓下標增長一個step，如點擊一次按鈕後，下標值爲0+3=3超出了數組最大下標1，此時將下標值減去數組長度2直到下標值位於數組最大下標以內，3-2=1，故點擊一次按鈕後返回數組下標爲1的值。

對於函數則直接執行函數並返回了函數的值。

1.8總結

String Number Boolean Undefined Null Object Array Function
|min-max 字符串重複min-max次後拼接得出新的字符串 隨機獲得min-max的值 min/(min+max)機率生成value值，max/(min+max)機率生成!value值 當前數據類型無效 返回null值 先在min-max中隨機生成一個數值value，而後選取該對象的value個屬性出來組成一個新的對象，若value大於該對象的屬性個數，則將全部屬性拿出來 先在min-max中隨機生成一個數值value，而後將數組元素重複value次而後合併爲一個數組 直接執行函數並返回了函數的值
|count 字符串重複count次得出新的字符串 生成一個值爲count的數值 (count-1)/count機率生成value值，1/count機率生成!value值 當前數據類型無效 返回null值 選取該對象的count個屬性出來組成一個新的對象，若count大於該對象的屬性個數，則將全部屬性拿出來 將數組元素重複count次而後合併爲一個數組 直接執行函數並返回了函數的值
|min-max.dmin-dmax 與規則|min-max相同 生成一個浮點數，浮點數的整數部分是min-max，小數的位數是dmin-dmax 與規則|min-max相同 當前數據類型無效 返回null值 與規則|min-max相同 與規則|min-max相同 直接執行函數並返回了函數的值
|min-max.dcount 與規則|min-max相同 生成一個浮點數，浮點數的整數部分是min-max，小數的位數是dcount 與規則|min-max相同 當前數據類型無效 返回null值 與規則|min-max相同 與規則|min-max相同 直接執行函數並返回了函數的值
|count.dmin-dmax 與|count規則相同 生成一個浮點數，浮點數的整數部分的值是count，小數的位數是dmin-dmax位 與|count規則相同 當前數據類型無效 返回null值 與|count規則相同 與|count規則相同 直接執行函數並返回了函數的值
|count.dcount 與|count規則相同 生成一個浮點數，浮點數的整數部分的值是count，小數的位數是dcount位 與|count規則相同 當前數據類型無效 返回null值 與|count規則相同 與|count規則相同 直接執行函數並返回了函數的值
|+step 無做用，將value直接返回 初始值爲預設的value值，每從新請求一次時數值value會增長一個step值 無做用，將value值返回 當前數據類型無效 返回null值 無做用，將value值返回 初始值爲下標是預設的value的值，每從新請求一次時，下標value會增長一個step值 直接執行函數並返回了函數的值

其中|min-max.dmin-dmax、|min-max.dcount、|count.dmin-dmax、|count.dcount這四個規則主要是給Number類型使用的。

2.使用Random工具類定義模擬接口返回值

MockJS提供了一組方法讓咱們快速隨機出想要的數據。

const Random=Mock.Random;
{
    '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
    'Image1': Random.image(Random.size, '#02adea', '#fff','png','Hello'), // Random.size表示將從size數據中任選一個數據，生成Random.size指定大小的，背景爲'#02adea'的，前景色爲'#fff'的，格式爲'png'的，內容爲'Hello'的圖片。
    'Image2':Random.dataImage('200x100', 'Hello Mock.js!'),//只設置大小
    '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
const Random = Mock.Random;
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', '#fff','png','Hello'),
    '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;
});
複製代碼

3.使用數據佔位符定義模擬接口返回值

使用數據佔位符定義模擬數據能夠相比Random工具類更爲簡潔。

{
    'Boolean': '@boolean', // 隨機生成布爾類型
    'Natural': '@natural(1, 100)', // 隨機生成1到100之間天然數
    'Integer': '@integer(1, 100)', // 生成1到100之間的整數
    'Float': '@float(0, 100, 0, 5)', // 生成0到100之間的浮點數,小數點後尾數爲0到5位
    'Character': '@character("aeiou")', // 在aeiou中，生成隨機字符，不傳參表示生成隨機字符
    'String': '@string( 2, 10)', // 生成2到10個字符之間的字符串
    'Range': '@range(0, 10, 2)', // 生成一個數組，數組元素從0開始到10結束，間隔爲2
    'Date': '@date("yyyy yy y MM M dd d")', // 生成一個隨機日期,可加參數定義日期格式，默認yyyy-mm-dd
    'Color1': '@color', // 生成一個顏色16進制隨機值
    'Color2': '@rgb',   //生成一個顏色rgb隨機值
    'Paragraph':'@paragraph(2, 5)', //生成2至5個句子的文本
    'Sentence':'@sentence(3, 5)',   //生成3至5個單詞組成的一個句子
    'World':'@word(3, 5)',          //生成3-5個字母組成的單詞
    'title':'@title(3,5)',          //生成3-5個單詞組成的標題
    'cParagraph':'@cparagraph(2, 5)', //生成2至5個句子的中文文本
    'cSentence':'@csentence(3, 5)',   //生成3至5個詞語組成的一箇中文句子
    'cWorld':'@cword(3, 5)',          //生成3-5個字組成的中文詞語
    'ctitle':'@ctitle(3,5)',          //生成3-5個詞語組成的中文標題
    'Name': '@name', // 生成姓名
    'cName': '@cname', // 生成中文姓名
    'Url': '@url', // 生成url地址
    'Email':'@email',//生成郵箱
    'Address': '@county(true)'， // 生成省 市 縣組成的地址
    'Guid':'@guid()',         //生成Guid值
}
複製代碼

小結

MockJS使先後分離程度更高，同時，我認爲最重要的是他使前端人員也開始思考業務。傳統開發中，前端人員可能是等待後端人員提供的接口及接口文檔，不懂得主動梳理接口文檔，使用MockJS後前端人員能夠從項目總體的角度出發，能更好的參與到項目之中。

交流

若是這篇文章幫到你了，以爲不錯的話來點個Star吧。 github.com/lizijie123

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程