03.09 随手记(Mock数据生成器,Easy Mock基本使用)
- ***当前阶段的笔记 ***
「面向实习生阶段」https://www.aliyundrive.com/s/VTME123M4T9 提取码: 8s6v
点击链接保存,或者复制本段内容,打开「阿里云盘」APP ,无需下载极速在线查看,视频原画倍速播放。
1.什么是闭包,闭包要解决什么问题?
闭包是一个对外不公开的空间,闭包内的数据不允许外界访问,要解决的问题就是间接访问闭包内的数据。
2.如何把Dom对象转换成jQ对象,如何把jQ对象转换成Dom对象?
(),(),(),[],
3.Mock.js 数据生成器
3.1 解决什么问题
问题:
前后端分离项目,前端和后端人员都是根据 API 文档进行开发项目的,不应该直接相互依赖, 前端人员不应该等待后端开发好接口后再进行测试,既然不依赖后端接口,那前端人员应该如何测试呢?
解决:
可以通过模拟数据生成器,通过一定规则 (API文档)生成模拟数据接口, 提供给前端人员进行测试。
熟练使用Mock生成模拟数据,进行前端接口测试
3.2 什么是 Mock.js
官网:http://mockjs.com/
文 档 :https://github.com/nuysoft/Mock/wiki
Mock.js 是用于生成随机数据,拦截 Ajax 请求。
通过拦截 Ajax 请求,根据数据模板生成并返回模拟数据,让前端攻城师独立于后端进行开发,帮助编写单元测 试。
- Mock.js 作用:
前后端分离
让前端攻城师独立于后端进行开发。
增加单元测试的真实性
通过随机数据,模拟各种场景。
开发无侵入
不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
用法简单
符合直觉的接口。
数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
方便扩展
支持扩展更多数据类型,支持自定义函数和正则。
3.3 安装 Mock.js
在命令提示符窗口,用 npm 安装 mockjs
npm install mockjs
3.4 入门案例与语法规范
3.4.1 入门案例
需求:生成 4 条列表数据。
效果如下:
{ memberList:[ { id: 1, name: '测试' },{ id: 1, name: '测试' },{ id: 1, name: '测试' },{ id: 1, name: '测试' }]
}
编码实现:
- 新建 StudentProject\VueProject\mockjs-demo 目录,通过命令提示符窗口进入到该文件夹,执行下面命令进
行初始化项目
npm init -y
- Mock.js 安装
npm install mockjs
- 新建 demo1.js 代码如下
const Mock = require('mockjs')
const data = Mock.mock({'memberList|4': [{'id': 1,'name': '测试'}]
})
// stringify(数据, 数据转换函数,缩进空格数)
console.log(JSON.stringify(data, null, 2))//查看效果,执行命令 node demo1.js
查看效果,执行命令
node demo1.js
**上面生成的4条数据是一样的,如果希望它按一定规律生成随机数据,就需要按 Mock.js 的语法规范来定义。
**
3.4.2 语法规则
- Mock.js 的语法规范包括两部分:
数据模板定义规范(Data Template Definition,DTD)
数据占位符定义规范(Data Placeholder Definition,DPD)
3.5. 数据模板定义规范 DTD
数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
// '属性名|生成规则': 属性值
'name|rule': value
注意:
属性名 和 生成规则 之间用竖线 | 分隔。
生成规则 是可选的,生成规则 有 7 种格式:
- ‘name|min-max’: value
- ‘name|count’: value
- ‘name|min-max.dmin-dmax’: value
- ‘name|min-max.dcount’: value
- ‘name|count.dmin-dmax’: value
- ‘name|count.dcount’: value
- ‘name|+step’: value
生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符 。
属性值 指定了最终值的初始值和类型
3.5.1 属性值是字符串 String
- ‘name|count’: string
通过重复 string 生成一个字符串,重复次数等于 count 。 - ‘name|min-max’: string
通过重复 string 生成一个字符串,重复次数大于等于 min ,小于等于 max 。
代码:
const data = Mock.mock({'memberList|4': [{'id': 1,'name|1-3': '测试', // String, 随机生成 1到3个重复`小梦`'phone|11': '8' // String, 生成 11 个 8}]
})
效果:
{"memberList": [{"id": 1,"name": "测试测试","phone": "88888888888"},{"id": 1,"name": "测试测试","phone": "88888888888"},{"id": 1,"name": "测试测试测试","phone": "88888888888"},{"id": 1,"name": "测试测试测试","phone": "88888888888"}]
}
3.5.2 属性值是数字 Number
‘name|+1’: number
属性值自动加 1,初始值为 number 。‘name|min-max’: number
生成一个大于等于 min 、小于等于 max 的整数,属性值 number 只是用来确定类型。‘name|min-max.dmin-dmax’: number
生成一个浮点数,整数部分大于等于 min 、小于等于 max ,小数部分保留 dmin 到 dmax 位。
代码:
const data = Mock.mock({'memberList|4': [{'id|+1': 1, // Number, 自增 1'name|1-3': '测试', // String, 随机生成 1到3个重复`测试`'phone|11': '8', // String, 生成 11 个 8'age|1-120': 1, // Number, 随机生成 1到120'salary|6000-8000.1-3': 0, // Number, 随机生成6000到8000, 有随机小数1到3位}]
})
效果:
{"memberList": [{"id": 1,"name": "测试","phone": "88888888888","age": 110,"salary": 7617.958},{"id": 2,"name": "测试测试","phone": "88888888888","age": 53,"salary": 6413.055},{"id": 3,"name": "测试测试","phone": "88888888888","age": 101,"salary": 6733.44},{"id": 4,"name": "测试测试测试","phone": "88888888888","age": 115,"salary": 7462.9}]
}
3.5.3 属性值是布尔型 Boolean
- ‘name|1’: boolean
随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。 - ‘name|min-max’: value
随机生成一个布尔值,值为 value 的概率是 min / (min + max) ,值为 !value 的概率是 max / (min + max) 。
代码:
const data = Mock.mock({'memberList|4': [{'id|+1': 1, // Number, 自增 1'name|1-3': '测试', // String, 随机生成 1到3个重复`小梦`'phone|11': '8', // String, 生成 11 个 8'age|1-120': 1, // Number, 随机生成 1到120'salary|6000-8000.1-3': 0, // Number, 随机生成6000到8000, 有随机小数1到3位'status|1': true, // Boolean, 生成 true 或 false 概率都是 1/2'open|2-4': true, // Boolean, 生成 true 概率 2/(2+4), false 概率 4/(2+4)}]
})
效果:
{"memberList": [{"id": 1,"name": "测试","phone": "88888888888","age": 64,"salary": 6047.1,"status": true,"open": false},{"id": 2,"name": "测试测试","phone": "88888888888","age": 89,"salary": 7191.87,"status": true,"open": false},....]
}
3.5.4 属性值是对象 Object
- ‘name|count’: object
从属性值 object 中随机选取 count 个属性。 - ‘name|min-max’: object
从属性值 object 中随机选取 min 到 max 个属性。
代码:
const data = Mock.mock({'memberList|4': [{'id|+1': 1, // Number, 自增 1'name|1-3': '测试', // String, 随机生成 1到3个重复`小梦`'phone|11': '8', // String, 生成 11 个 8'age|1-120': 1, // Number, 随机生成 1到120'salary|6000-8000.1-3': 0, // Number, 随机生成6000到8000, 有随机小数1到3位'status|1': true, // Boolean, 生成 true 或 false 概率都是 1/2'open|2-4': true, // Boolean, 生成 true 概率 2/(2+4), false 概率 4/(2+4)'order|2': { id: 1, name: '订单1', price: 68.8 }, // 随机取对象中的2个属性'order2|2-3': { id: 1, name: '洗发水', price: 68.8 }, //对象中的2到3个属性}]
})
效果:
{"memberList": [{"id": 1,"name": "测试测试测试","phone": "88888888888","age": 91,"salary": 7579.7,"status": true,"open": false,"order": {"id": 1,"price": 68.8},"order2": {"name": "洗发水","price": 68.8,"id": 1}},{"id": 2,"name": "测试测试","phone": "88888888888","age": 23,"salary": 6377.72,"status": true,"open": false,"order": {"price": 68.8,"id": 1},"order2": {"id": 1,"price": 68.8}},....]
}
3.5.5 属性值是数组 Array
- ‘name|min-max’: array
通过重复属性值 array 生成一个新数组,重复次数大于等于 min ,小于等于 max 。 - ‘name|count’: array
通过重复属性值 array 生成一个新数组,重复次数为 count 。
代码:
const data = Mock.mock({'memberList|2-5': [ // Array, 随机生成数组中的元素 2到5 个{'id|+1': 1,'name|1-3': '测试','phone|11': '8','age|1-120': 1,'salary|6000-8000.1-3': 0,'status|1': true,'open|2-4': true,'order|2': { id: 1, name: '订单1', price: 68.8 },'order2|2-3': { id: 1, name: '订单2', price: 68.8 },}]
})
效果:随机生成 2到5 个元素
{"memberList": [{"id": 1,"name": "测试测试","phone": "88888888888","age": 78,"salary": 7864.371,"status": false,"open": true,"order": {"price": 68.8,"id": 1},"order2": {"name": "订单2","price": 68.8}},{"id": 2,"name": "测试测试","phone": "88888888888","age": 36,"salary": 6113.168,"status": false,"open": true,"order": {"price": 68.8,"name": "订单1"},"order2": {"id": 1,"price": 68.8,"name": "订单2"}}]
}
3.5.6 值是正则表达式 RegExp
- ‘name’: regexp
根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
注意 regexp 是没有引号的 - 代码:
const data = Mock.mock({'memberList|2-5': [ // Array, 随机生成数组中的元素 2到5 个{'id|+1': 1, // Number, 自增 1'name|1-3': '测试', // String, 随机生成 1到3个重复`测试`'phone|11': '8', // String, 生成 11 个 8'age|1-120': 1, // Number, 随机生成 1到120'salary|6000-8000.1-3': 0, // Number, 随机生成6000到8000, 有随机小数1到3位'status|1': true, // Boolean, 生成 true 或 false 概率都是 1/2'open|2-4': true, // Boolean, 生成 true 概率 2/(2+4), false 概率 4/(2+4)'order|2': { id: 1, name: '订单1', price: 68.8 }, // 随机取对象中的2个属性'order2|2-3': { id: 1, name: '订单2', price: 68.8 }, //对象中的2到3个属性'idCard': /\d{15}|\d{18}/ // 随机生成身份证号, 注意:正则表达式没有单引号 ''}]
})
效果:
{"memberList": [{"id": 1,"name": "测试测试","phone": "88888888888","age": 47,"salary": 6202.85,"status": false,"open": false,"order": {"name": "订单1","id": 1},"order2": {"id": 1,"price": 68.8},"idCard": "583332714813595261"},{"id": 2,"name": "测试","phone": "88888888888","age": 2,"salary": 6790.81,"status": true,"open": false,"order": {"id": 1,"price": 68.8},"order2": {"name": "洗发水","id": 1,"price": 68.8},"idCard": "353627221161244853"}]
}
3.6. 数据占位符定义规范 DPD
Mock.Random 是一个工具类,用于生成各种随机数据。
Mock.Random 类中的方法在数据模板中称为『占位符』,书写格式为 @占位符(参数 [, 参数]) 。
占位符 的格式为:
Mock.Random 类中提供的完整方法(占位符)如下:
Type(类型) | Method(占位符) |
---|---|
Basic | boolean , natural (自然数,大于等于 0 的整数), integer , float , character , string ,range (整型数组), |
Date | date (年月日), time (时分秒), datetime (年月日时分秒) |
Image | image, dataImage |
Color | color |
Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
Name | first, last, name, cfirst, clast, cname |
Web | url, domain, email, ip, tld |
Address | area, region |
Helper | capitalize, upper, lower, pick, shuffle |
Miscellaneous | guid, id |
3.6.1 基本类型占位符
- 随机生成基本数据类型的数据。
常用的占位符:natural/integer/string/float/boolean
代码:
const Mock = require('mockjs')
const data = Mock.mock({'empList|3': [{'id|+1': 1,'name': '@string','price': '@float','status': '@boolean',}]
})
console.log(JSON.stringify(data, null, 2))
效果:
{"empList": [{"id": 1,"name": "oYys0","price": -2234370320974880.8,"status": true},{"id": 2,"name": "bPWuAB","price": -7034682015170889,"status": true},{"id": 3,"name": "jYpuON","price": 1074116758901916.8,"status": false}]
}
3.6.2 日期占位符
- 随机生成日期类型的数据,
占位符:
date/date(format)
time/time(format)
datetime/datetime(format)
代码:
const data = Mock.mock({'empList|3': [{'id|+1': 1,'name': '@string','price': '@float','status': '@boolean','birthday': '@date', // 默认 yyyy-MM-dd'entryDate': '@date("yyyy/MM/dd")', // 指定日期格式 yyyy/MM/dd'createDate': '@datetime', // 默认 yyyy-MM-dd HH:mm:ss'updateDate': '@datetime("yyyy/MM/dd HH:mm:ss")' //默认yyyy/MM/dd HH:mm:ss}]
})
效果:
{"empList": [{"id": 1,"name": "HddBn","price": 2075727308720240.5,"status": true,"birthday": "1971-01-03","entryDate": "1992/03/29","createDate": "2007-05-20 01:34:12","updateDate": "2009/09/05 00:08:40"},{"id": 2,"name": "q)krIz","price": 3905546560859356,"status": false,"birthday": "1993-01-06","entryDate": "2008/12/18","createDate": "2009-03-29 08:05:22","updateDate": "1992/06/27 04:22:20"},{"id": 3,"name": "O0B5","price": -3833655335201049,"status": true,"birthday": "1976-04-01","entryDate": "1996/10/27","createDate": "2010-04-24 09:38:28","updateDate": "1993/12/29 08:56:26"}]
}`
3.6.3 图像占位符
- 随机生成图片地址, 生成的浏览器可以打开
占位符: image
代码:
const data = Mock.mock({'empList|3': [{'id|+1': 1,'name': '@string','price': '@float','status': '@boolean','birthday': '@date', // 默认 yyyy-MM-dd'entryDate': '@date("yyyy/MM/dd")', // 指定日期格式 yyyy/MM/dd'createDate': '@datetime', // 默认 yyyy-MM-dd HH:mm:ss'updateDate': '@datetime("yyyy/MM/dd HH:mm:ss")', //默认yyyy/MM/dd HH:mm:ss'pic': '@image',}]
})
效果:
{"empList": [{"id": 1,"name": "($OU","price": 317108834629012.44,"status": true,"birthday": "2011-05-10","entryDate": "1983/12/04","createDate": "1976-02-20 07:10:18","updateDate": "1982/04/01 17:18:17","pic": "http://dummyimage.com/160x600"},{"id": 2,"name": "71Nmfv","price": -2832119950826008.5,"status": false,"birthday": "2000-08-29","entryDate": "2015/08/26","createDate": "1991-05-30 13:48:48","updateDate": "1970/06/29 17:05:55","pic": "http://dummyimage.com/250x250"},{"id": 3,"name": "!!!8v","price": -217074031302344.28,"status": false,"birthday": "1990-09-25","entryDate": "1997/09/14","createDate": "1996-09-03 19:20:55","updateDate": "1987/07/03 06:18:05","pic": "http://dummyimage.com/300x600"}]
}
3.6.4 文本占位符
- 随机生成一段文本
占位符:
ctitle 随机生成一句中文标题。
csentence(mix?, max?) 随机生成一段中文文本。
代码:
const data = Mock.mock({'empList|3': [{'id|+1': 1,'name': '@string','price': '@float','status': '@boolean','birthday': '@date', // 默认 yyyy-MM-dd'entryDate': '@date("yyyy/MM/dd")', // 指定日期格式 yyyy/MM/dd'createDate': '@datetime', // 默认 yyyy-MM-dd HH:mm:ss'updateDate': '@datetime("yyyy/MM/dd HH:mm:ss")', //默认yyyy/MM/dd HH:mm:ss'pic': '@image', // 图片地址'title': '@ctitle(3, 6)', // 中文标题(3到6个字)'content': '@csentence(8, 12)', // 一段中文文本(8到12个字)}]
})
效果:
{"empList": [{"id": 1,"name": "XAPUq","price": 719596174326132.4,"status": false,"birthday": "1979-07-10","entryDate": "1995/07/28","createDate": "2001-04-03 08:06:28","updateDate": "2005/10/25 14:00:33","pic": "http://dummyimage.com/120x240","title": "术题种已","content": "市手据来而正收党取科流。"},。。。。]
}
3.6.5 名称占位符
- 随机生成名称。
占位符:
first 英文名。
last 英文姓。
name 英文姓名。
cfirst 中文名。
clast 中文姓。
cname 中文姓名。
代码:
const data = Mock.mock({'empList|3': [{'id|+1': 1,'name': '@cname', //中文姓名'price': '@float','status': '@boolean','birthday': '@date', // 默认 yyyy-MM-dd'entryDate': '@date("yyyy/MM/dd")', // 指定日期格式 yyyy/MM/dd'createDate': '@datetime', // 默认 yyyy-MM-dd HH:mm:ss'updateDate': '@datetime("yyyy/MM/dd HH:mm:ss")', //默认yyyy/MM/dd HH:mm:ss'pic': '@image', // 图片地址'title': '@ctitle(3, 6)', // 中文标题(3到6个字)'content': '@csentence(8, 12)', // 一段中文文本(8到12个字)'first': '@cfirst', // 中文名'last': '@last', // 英文姓}]
})
效果:
{"empList": [{"id": 1,"name": "杨娜","price": 1104108454288808.2,"status": true,"birthday": "2006-02-14","entryDate": "2000/07/14","createDate": "1974-08-19 01:43:30","updateDate": "1974/01/25 17:41:55","pic": "http://dummyimage.com/120x60","title": "容京给习反市","content": "则物例边技我细利质保拉。","first": "方","last": "Jones"},。。。。]
}
3.6.6 网络占位符
可随机生成 URL 、域名、 IP 地址、邮件地址
占位符:
url(protocol?, host?) 生成 URL。protocol: 协议, 如 http
host:域名和端口号,如 ceshi.com
domain 生成域名ip 生成 IP 地址。
email 生成邮件地址 。
代码:
const data = Mock.mock({'empList|3': [{'id|+1': 1,'name': '@cname', //中文姓名'price': '@float','status': '@boolean','birthday': '@date', // 默认 yyyy-MM-dd'entryDate': '@date("yyyy/MM/dd")', // 指定日期格式 yyyy/MM/dd'createDate': '@datetime', // 默认 yyyy-MM-dd HH:mm:ss'updateDate': '@datetime("yyyy/MM/dd HH:mm:ss")', //默认yyyy/MM/dd HH:mm:ss'pic': '@image', // 图片地址'title': '@ctitle(3, 6)', // 中文标题(3到6个字)'content': '@csentence(8, 12)', // 一段中文文本(8到12个字)'first': '@cfirst', // 中文名'last': '@last', // 英文姓'url': '@url("http", "ceshi.com")', // URL'domain': '@domain', // 域名'ip': '@ip', // IP'email': '@email' // 邮箱地址}]
})
效果:
{"empList": [{"id": 1,"name": "康娟","price": -7720628302340068,"status": true,"birthday": "1977-05-03","entryDate": "2017/06/19","createDate": "1988-10-31 12:25:19","updateDate": "1972/01/19 02:20:00","pic": "http://dummyimage.com/160x600","title": "究着导据","content": "产厂术象至公花规口题律到。","first": "郭","last": "Martinez","url": "http://mengxuegu.com/hvvprrd","domain": "bslpkaoozi.na","ip": "41.167.74.180","email": "v.gmoczmc@pawsqbcvvn.hr"},。。。。]
}
3.6.7 地址占位符
- 随机生成区域、省市县、邮政编码
占位符:
region 区域。如: 华南
county(true) 省市县。
zip 邮政编码。
代码:
const data = Mock.mock({'empList|3': [{'id|+1': 1,'name': '@cname', //中文姓名'price': '@float','status': '@boolean','birthday': '@date', // 默认 yyyy-MM-dd'entryDate': '@date("yyyy/MM/dd")', // 指定日期格式 yyyy/MM/dd'createDate': '@datetime', // 默认 yyyy-MM-dd HH:mm:ss'updateDate': '@datetime("yyyy/MM/dd HH:mm:ss")', //默认yyyy/MM/dd HH:mm:ss'pic': '@image', // 图片地址'title': '@ctitle(3, 6)', // 中文标题(3到6个字)'content': '@csentence(8, 12)', // 一段中文文本(8到12个字)'first': '@cfirst', // 中文名'last': '@last', // 英文姓'url': '@url("http", "mengxuegu.com")', // URL'domain': '@domain', // 域名'ip': '@ip', // IP'email': '@email', // 邮箱地址'area': '@region', // 区域'address': '@county(true)', // 省市县'zipCode': '@zip' // 邮政编码}]
})
效果:
{"empList": [{"id": 1,"name": "何静","price": -922632759748656.4,"status": true,"birthday": "2005-08-08","entryDate": "1990/10/03","createDate": "1983-08-22 15:59:26","updateDate": "1975/02/22 08:32:13","pic": "http://dummyimage.com/240x400","title": "难县日地队","content": "方大两金金压气可收以。","first": "梁","last": "Garcia","url": "http://mengxuegu.com/kwyyxot","domain": "cuf.tv","ip": "167.120.135.116","email": "b.sljtq@nptuzefkd.ar","area": "华东","address": "吉林省 吉林市 永吉县","zipCode": "416278"} 。。。。]
}
第四章 EasyMock 数据接口
4.1 什么是EasyMock
Easy Mock 是一个可视化,并且能快速生成模拟数据的服务。是杭州大搜车无线团队出品的一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 Mock 服务 。
现在 Easy Mock 内置了 Mock.js,我们可以更愉快的伪造数据了。
官网:https://www.easy-mock.com/
文档:https://www.easy-mock.com/docs
4.2 EasyMock 基本使用
4.2.1 登录或注册
访问 https://www.easy-mock.com 后,点击 开始 后输入用户名和密码。如果不存在会自动注册。
注意:没有找回密码功能,请牢记密码!
登录成功
4.2.2 创建项目
右下角 + 图标进行创建项目
创建成功效果图:
4.2.3 接口配置
- 创建接口,点击左下角项目。
进入项目工作台页面,点击 创建接口
左侧编辑窗口输入 mock.js 代码,右侧定义 Method 、 Url 、描述等信息。
- 将 mockjs-demo 工程目录下的 demo2.js 中的对象放入左侧编辑窗口
{'empList|3': [{'id|+1': 1,'name': '@cname', //中文姓名'price': '@float','status': '@boolean','birthday': '@date', // 默认 yyyy-MM-dd'entryDate': '@date("yyyy/MM/dd")', // 指定日期格式 yyyy/MM/dd'createDate': '@datetime', // 默认 yyyy-MM-dd HH:mm:ss'updateDate': '@datetime("yyyy/MM/dd HH:mm:ss")', //默认yyyy/MM/dd HH:mm:ss'pic': '@image', // 图片地址'title': '@ctitle(3, 6)', // 中文标题(3到6个字)'content': '@csentence(8, 12)', // 一段中文文本(8到12个字)'first': '@cfirst', // 中文名'last': '@last', // 英文姓'url': '@url("http", "mengxuegu.com")', // URL'domain': '@domain', // 域名'ip': '@ip', // IP'email': '@email', // 邮箱地址'area': '@region', // 区域'address': '@county(true)', // 省市县'zipCode': '@zip' // 邮政编码}]
}
- 右侧窗口选择请求方式 , URL 和描述,然后点击 创建
4.2.4 接口测试
接口右侧预览接口和复制接口地址
修改接口和克隆接口和删除接口
4.3搭建本地环境
第一步:安装下载Nodejs。官网地址:https://nodejs.org/en/ 注意:版本要在8.9以上10以下(已经安装10以上版本的同学需要将nodejs进行卸载,然后重新安装资料里面的node-v8.11.1-x64.msi,安装后命令行中输入node -v和npm -v 进行测试)
第二步,安装 MongoDB (>= v3.4)
官网免费版的下载地址: https://www.mongodb.com/download-center/community
下载的时候注意下OS就行。安装并无障碍(注意:安装后需配置环境变量,命令行中输入mongo进行启动测试)
第三步:要安装Redis. 根据下方链接提示进行安装
https://blog.csdn.net/xuforeverlove/article/details/81201351
第四步:安装下载easy mock,在解压缩之后文件夹的地址栏中输入cmd,
输入:npm run dev
等待项目启动,出现下图中内容后打开浏览器输入localhost:7300进行测试
当出现下图页面后则证明本地环境搭建完毕
此时命令行中会显示下图中内容
03.09 随手记(Mock数据生成器,Easy Mock基本使用)相关推荐
- mock模拟接口测试 vue_Easy Mock以及Vue+Mock.js模拟数据
Easy Mock以及Vue+Mock.js模拟数据 一.Mock.js简介 Mock.js是一个可以模拟后端数据,也可以模拟增删改查操作的js库 基础语法规范 数据模板中的每个属性由 3 部分构成: ...
- Easy Mock - 数据模拟神器
开源公告 由大搜车无线团队出品的 easy-mock 在线数据模拟服务上线至今已经有几个月时间了,近期网站刚更新了焕然一新的 2.0 版本,与此同时,我们还带来一个更重磅的消息: 今天正式将整个服务的 ...
- Taro 项目里面添加 Mock 数据
安装Mock依赖库 yarn add mocker-api mockjs --dev 比如我们想用Mock模拟用户信息以及小说列表, 我们在项目根目录新建 mock 文件夹,新建 index.js b ...
- vue项目 mock数据
一.mock文件 1.安装mock开发环境 npm i mockjs -D 2.在src目录下新建mock目录,结构如下: 3.json数据格式,即userInfo.json内容如下: {" ...
- swagger mock文档服务器,通过 Swagger 定义自动生成 Mock 数据
我最近的在做的项目是一个前后端分离的项目,前后端由不同的团队分别开发,并且前端的进度经常领先后端.这就意味着,当前端在开发一个新功能时,API 可能还没有准备好.不过,我们会先和后端先商议好 API ...
- 前端 mock 数据及工具介绍
前端 mock 数据及工具介绍 阅读本文,需要有前端开发的简单知识,接下来我们分别从介绍 Mock 数据概念(what).为啥要 Mock(why).如何 mock(how).mock 工具等方面来展 ...
- mock数据使用步骤
这里写自定义目录标题 mock数据 使用步骤 mock数据 mock这词本意是虚拟,模拟的意思.mock server工具,通俗来说,就是模拟服务端接口数据,一般用在前后端分离后,前端人员可以不依赖A ...
- Easy Mock 的使用
一.导读 前后端分离开发模式下,后端还没有完成数据传输的时候,前端也不能干等着吧,主要是要联调测试对不对,不然以后怎么好甩锅给后端呢~~ (邪恶的一笑)今天就给大家介绍一个解决这个问题的方法.Easy ...
- 前端mock数据详细讲解
在实际的项目研发过程中,我们经常会遇到如下的尴尬场景: 前端开发依赖于后端接口数据,但是后台人员不足或者无法立即到位,前端迟迟不能开工,或者前端小伙子自己参照ui设计图,完成对应的静态页面(没有数据交 ...
- 前端mock数据(超级详细)
在实际的项目研发过程中,我们经常会遇到如下的尴尬场景: 前端开发依赖于后端接口数据,但是后台人员不足或者无法立即到位,前端迟迟不能开工,或者前端小伙子自己参照ui设计图,完成对应的静态页面(没有数据交 ...
最新文章
- 【转】Unity+单例模式的依赖注入
- json字符串中key值下划线命名转换为驼峰命名
- {转}maven+continuum安装与配置
- Win Linux 双系统安装指南
- Linux环境下基于策略的路由
- linux常用命令100个(转)
- 自考计算机毕业论文答辩视频,过来人谈自考毕业论文答辩有感
- STM32——库函数版——数码管动态显示程序
- win10如何打开摄像头_win10系统,蓝牙关闭,如何打开?
- 植被抽稀lisp程序_地形图缩编中植被符号抽稀方法.doc
- python的开发环境
- U盘文件变成exe格式的解决办法
- 阿里云天池《“AI Earth”人工智能创新挑战赛》萌新体验
- 标准柯西分布_柯西分布设独立随机变量X和Y都服从标准正态 – 手机爱问
- linux或者UC/OS
- sqlmap 使用方法
- 数据挖掘I 电力窃漏电用户自动识别
- 基于矩阵分解的CF算法实现(二):BiasSvd
- 计算机基础----冯诺依曼体系结构
- 那些证书相关的玩意儿