mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据

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模拟数据相关推荐

vue+konva.js图片数据标注多边形矩形---demo2.0。添加了其他功能和完善了代码。
文章目录前言一. 自适应画布二.新矩形和多边形 1.绘画多变形时,右击结束绘画.2.重新调整图形大小时,顶点已经约束不能拖拽出画布. 三.ctrl+z撤销和del删除选中某一个图形,按ctrl ...
Vue+Three.js实现三维管道可视化及流动模拟
最近在研究Geotoolkit过程中,发现很多三维的应用场景,用其实现起来比较复杂,就开展了利用Three.js实现海底管道流动的模拟. 推荐一个学习地址:Three.js教程,这这里的学习示例基本上 ...
js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题...
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
vue mock模拟后台接口数据
vue mock 一.Json server 二.Mock 服务 1.安装 2.创建 Mock 3.main.js引入 4.组件中axure请求一.Json server 轻量级,将已有的json文 ...
Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
mock模拟接口测试 vue_VUE使用Mock模拟接口
之前用EASY-MOCK来模拟接口,但是这网站三天两头GG,太生气了~! 发现可以自己在项目里使用Mock,开始使用~ 安装VUE在这里不写了,先从安装Mock开始: 安装mockjs npm ins ...
vue+mock+axios模拟post请求
src/mock.js import Mock from 'mockjs'//获取 mock.Random 对象const Random = Mock.Random; // mock一组数据const ...
mock模拟接口测试 vue_在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟...
在 https://www.jb51.net/article/151520.htm这篇文章中,我们介绍了在 Angular-CLI 中引入 simple-mock 的方法. 本文以 Vue-CLI 为 ...
dva ajax请求,dva框架使用mock.js模拟数据 + fetch请求数据
what DVA? Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量.简单的Dva. dva 可以很方便就使用mock.js进行数据的模拟. 只需要三步,即 ...

mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据

mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据相关推荐

最新文章

热门文章