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请求，因为已经被拦截)

四、参考链接

水平有限，有写的不对的地方还请各位小伙伴多多指点，共同学习进步😋