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
正式開始
MockJS有兩種方式定義模擬接口返回的數據，一種是使用數據模板定義，這種方式自由度大，能夠自定義各類隨機的數據類型，一種是使用MockJS的Random工具類的方法定義，這種方式自由度小，只能隨機出MockJS提供的數據類型。趕時間的小夥伴能夠直接跳到2.使用Rndom工具類定義模擬接口返回值。ajax
1.數據模板定義模擬接口返回值
先舉一個例子
//mock.js數據模板
{
'string|1-10':'string'
}
//接口返回的生成的數據===>
{
'string':'stringstringstring'
}
複製代碼
數據模板的格式爲 '屬性名|生成規則':'屬性值' ,生成規則決定了生成的數據的屬性值。 生成規則一共有7種，分別是：
- 'name|min-max': value
- 'name|count': value
- 'name|min-max.dmin-dmax': value
- 'name|min-max.dcount': value
- 'name|count.dmin-dmax': value
- 'name|count.dcount': value
- '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);
複製代碼
對於數值是隨機生成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);
複製代碼
|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);
複製代碼
|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);
複製代碼
|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);
複製代碼
|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);
複製代碼
|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);
複製代碼
|+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