Easy Mock以及Vue+Mock.js模擬數據

一、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": "f.lqdfggdy@wulqhmm.com",

"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 引入了Mock.js，所以支持Mock.js語法規范

創建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請求，因為已經被攔截)

四、參考鏈接

水平有限，有寫的不對的地方還請各位小伙伴多多指點，共同學習進步😋

總結

以上是生活随笔為你收集整理的mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。