Easy Mock以及Vue+Mock.js模擬資料
Easy Mock以及Vue+Mock.js模擬資料
一、Mock.js簡介
ofollow,noindex" target="_blank">Mock.js 是一個可以模擬後端資料,也可以模擬增刪改查操作的js庫
-
基礎語法規範
資料模板中的每個屬性由 3 部分構成:屬性名、生成規則、屬性值:
'name|rule': value
語法規則 說明 'name|min-max': string
通過重複 string 生成一個字串,重複次數大於等於 min,小於等於 max 'name|count': string
通過重複 string 生成一個字串,重複次數等於 count 'name|min-max': number
生成一個大於等於 min、小於等於 max 的整數,屬性值 number 用來確定型別 'name|+1': number
初始值為 number,以後每次請求在前面的基礎上+1 'name|min-max.dmin-dmax': number
生成一個浮點數,整數部分大於等於 min、小於等於 max,小數部分保留 dmin 到 dmax 位 'name|1': boolean
隨機生成一個布林值,值為 true 的概率是 1/2,值為 false 的概率同樣是 1/2 'name|count': object
從屬性值 object 中隨機選取 count 個屬性 'name|min-max': object
從屬性值 object 中隨機選取 min 到 max 個屬性 'name|1': array
從屬性值 array 中隨機選取 1 個元素,作為最終值 'name|+1': array
從屬性值 array 中按照順序選取 1 個元素,作為最終值 'name|count': array
通過重複屬性值 array 生成一個新陣列,重複次數為 count 'name|min-max': array
通過重複屬性值 array 生成一個新陣列,重複次數大於等於 min,小於等於 max 簡單舉例:
var arr=['aa','bb','cc']; var obj={ 'name':'MountainC44', 'old':'23', 'sex':'man' }; //資料模版簡單舉例 { 'firstName|3':'xue',//重複fei這個字串 3 次。 'lastName|2-5':'yangbo',//重複yangbo這個字串 2-5 次。 'index|+1':0, //屬性值自動加 1,初始值為 0 'age|20-30':25,//生成一個大於等於 20、小於等於 30 的整數,屬性值 25 只是用來確定型別 'weight|100-120.2-5':110.24,//生成一個浮點數,整數部分大於等於 100、小於等於 120,小數部分保留 2 到 5 位。 'likeMovie|1':Boolean,//隨機生成一個布林值,值為 true 的概率是 1/2,值為 false 的概率同樣是 1/2。 'friend1|1':arr,//從陣列 arr 中隨機選取 1 個元素,作為最終值。 'friend2|+1':arr,//從屬性值 arr 中順序選取 1 個元素,作為最終值 'friend3|2-3':arr,//通過重複屬性值 arr 生成一個新陣列,重複次數大於等於 2,小於等於 3。 'obj1|2':obj,//從屬性值 obj 中隨機選取 2 個屬性 'obj2|1-2':obj,//從屬性值 obj 中隨機選取 1 到 2 個屬性。 'regexp1':/^[a-z][A-Z][0-9]$/,//生成的符合正則表示式的字串 } //返回示例 { 'firstName':'xuexuexue', 'lastName':'yangboyangbo', 'index':0, 'age':28, 'weight':115.223, 'likeMovie':Boolean, 'friend1':'bb', 'friend2':'aa', 'friend3|2-3':['aa','bb','cc','aa','bb','cc'], 'obj1':{'name':'MountainC44','old':'23',}, 'obj2':{'name':'MountainC44',}, 'regexp1':'sC2', }
-
資料佔位符
//資料佔位符使用 { "string|1-2": "@string",//隨機生成字串 "integer": "@integer(10, 30)",//隨機生成一個10~30之間的正整數 "float": "@float(60, 100, 2, 2)",//隨機生成浮點數,引數分別為整數部分最小值和最大值、小數部分保留最小位數和最大位數 "boolean": "@boolean",//隨機生成boolean "date": "@date(yyyy-MM-dd)", //按照格式隨機生成時間 "datetime": "@datetime",//隨機生成時間 "now": "@now",//當前時間 "url": "@url",//隨機生成url字串 "email": "@email",//隨機生成郵箱 "region": "@region",//隨機生成地區 "city": "@city",//隨機生成城市 "province": "@province",//隨機生成省會 "county": "@county",//隨機生成一個(中國)縣 "upper": "@upper(@title)",//把生隨機成的標題全部轉為大寫 "guid": "@guid",//隨機生成一個 GUID "id": "@id",//隨機生成一個 18 位身份證 "image": "@image(200x200)",//隨機生成一個大小為200x200的圖片連結 "title": "@title",//隨機生成一句標題,其中每個單詞的首字母大寫 "cparagraph": "@cparagraph", //隨機生成一段中文文字 "csentence": "@csentence",//隨機生成一段中文文字 "range": "@range(2, 10)"//返回一個內容從2開始到9的整型陣列 } //返回示例 { "string": "A0L^Z", "integer": 16, "float": 82.23, "boolean": true, "date": "1994-09-16", "datetime": "1994-10-22 02:30:32", "now": "2018-10-21 10:31:00", "url": "mailto://tfoyemmcy.as/ppm", "email": "[email protected]", "region": "華南", "city": "茂名市", "province": "澳門特別行政區", "county": "和平區", "upper": "LGHV FJV FDHNA ZJQO MKQEPMY BYVPYMU JRUPL", "guid": "EdAD386E-eCB3-e054-fBd3-D4BCd58bF2Dd", "id": "630000201810081550", "image": "http://dummyimage.com/200x200", "title": "Powol Qhycsib Nvwf Bmiuvcek Ioisiu Sxdmrpdip", "cparagraph": "又平你大萬被然紅義她之影此屬且。定圓光半條社已上實參規持備特戰劃。打第一在感革會屬利小年往。認七單邊濟火國風風速次支比容爭連勞。目叫織新百卻又處思只名發這實。什濟安這自空東認十需打現軍應。", "csentence": "火事必該驗導回聲市然第別程確條狀。", "range": [2,3,4,5,6,7,8,9] }
-
Mock物件方法簡介
-
Mock.mock( rurl?, rtype?, template|function( options ) )
:根據資料模板生成模擬資料,攔截指定rtype
型別的url為rurl
的ajax請求,返回資料模板中的模擬資料或執行回掉方法 -
Mock.setup( settings )
:配置攔截 Ajax 請求時的行為。支援的配置項有:timeout
,指攔截的 Ajax 請求的響應時間,單位是毫秒 -
Mock.Random.xxx()
:Mock.Random物件提供的方法在資料模板中稱為佔位符
,書寫格式為 @佔位符(引數 [, 引數]) -
Mock.valid( template, data )
:校驗真實資料data
是否與資料模板template
匹配 -
Mock.toJSONSchema( template )
:把 Mock.js 風格的資料模板template
轉換成 JSON Schema
-
二、Easy Mock
-
建立Easy Mock專案
-
使用Easy Mock 的Sagger特性快速生成Mock介面
-
檢視Mock介面進行測試
-
線上測試
三、Vue+Mock.js模擬資料
-
npm安裝mockjs ,建立mock.js檔案
-
編寫mock.js檔案,main.js檔案引入
//mock.js檔案 const Mock = require('mockjs'); const data = Mock.mock({ // 屬性 list 的值是一個數組,其中含有 1 到 10 個元素 'foods|10-50': [{ name: '@ctitle(2,10)', img: "@image('600x600',#b7ef7c)", brief: '@csentence(1,50)', 'price|0-20.0-2': 1, num: 0, minusFlag: true, time: '@time', 'peisongfei|0-100.0-2': 1, 'limit|0-50': 1, }], 'sales|10-50': [{ // 屬性 id 是一個自增數,起始值為 1,每次增 1 name: '@ctitle(2,10)', img: "@image('600x600',#b7ef7c)", brief: '@csentence(1,50)', 'price|0-100.0-2': 1, num: 0, minusFlag: true, time: '@time', 'peisongfei|0-100.0-2': 1, 'limit|0-100': 1, }], }); Mock.mock('/api/data', data);//對url為/api/data的ajax請求進行攔截返回data假資料 Mock.mock('/api/data1', () => ({ data, })); //main.js檔案 引入mock.js require('./mock.js'); //vue元件使用axios傳送ajax請求 created() { this.$axios.get('/api/data1').then((res) => { console.log(res.data); }); this.$axios.get('/api/data').then((res) => { console.log(res.data); }); }
-
檢視mock介面(在瀏覽器除錯工具Network中不會有http請求,因為已經被攔截)
四、參考連結
-
Easy Mock文件: https://easy-mock.com/docs
-
Mock.js文件: https://github.com/nuysoft/Mock/wiki