Mockjs

一、Mock.js簡介

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": "[e-mail]", "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

 

二、Vue+Mock.js模擬數據

npm安裝mockjs ，創建mock.js文件

 

 

編寫mock.js文件，main.js文件引入

 

 

 

 

//main.js文件 引入mock.js    上面的圖片 引入方式是不對的（反正我是沒出來）

 

 在組件內部  引入axios   import axios from 'axios'  (前提是要安裝好axios npm install axios)

然后再將上面的$axios 全部換成axios  就能請求到數據了

 

 

查看mock接口（在瀏覽器調試工具Network中不會有http請求，因為已經被攔截）

 

 

Mock.js文檔：https://github.com/nuysoft/Mock/wiki