大家好，我是IT修真院郑州分院，一枚正直、纯洁、善良的web程序员。
今天给大家分享一下，修真院官网 js任务中可能会使用到的知识点：
如何使用Easy Mock？
一、背景介绍
什么是Easy Mock
Mock对象能够模拟其它协同模块的行为，被测试模块通过与 Mock对象协作，可以获得一个孤立的测试环境。手动的构造 Mock对象会给开发人员带来额外的编码量，EasyMock是一套用于通过简单的方法对于给定的接口生成 Mock对象的类库 以项目管理的方式组织 Mock List，能帮助我们更好的管理 Mock数据，不怕丢失。
解决的问题：
开发时，后端还没完成数据输出，前端只好写静态模拟数据。
数据太长了，将数据写在js文件里，完成后挨个改url。
某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。
想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。
特殊的格式，例如IP,随机数，图片，地址，需要去收集。
二、知识剖析
常见的Mock 方式
1、将 Mock 数据直接写在代码里
2、利用 JS 拦截请求
3、利用 Charles、 Fiddler 等代理工具拦截请求
4、Mock 平台。如 Easy Mock、 RAP 等
使用的优势
1、前后端分离:让前端工程师独立于后端进行开发。
2、增加单元测试的真实性: 通过随机数据，模拟各种场景。
3、开发无侵入: 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
4、用法简单: 符合直觉的接口。
5、数据类型丰富: 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
6、方便扩展: 支持支持扩展更多数据类型，支持自定义函数和正则。
7、在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。
三、常见问题
如何使用Easy Mock
四、解决方案
1、登录Easy Mock官网
2、创建个人项目或者团队项目
3、新增接口
4、在项目中使用接口
五、编码实战
六、扩展思考
Mock语法该如何使用
七、参考文献
参考一：Easy Mock
参考二：Mock.js官网
八、更多讨论
1、除了Easy Mock，还有什么可以模拟数据。
答：有用RAP的，这个我没有去使用，感兴趣的话可以试一下
2、演示一下怎么生成十条数据的
答：在list那里这样写 list|10
{
"code": 0,
"message": "success",
"data": {
"size": 10,
"page": 1,
"total": 4,
"list|10": [{
"date": "@date(yyyy-MM-dd)",
"datetime": "@datetime",
"url": "@url",
"email": "@email",
"city": "@city",
"id": "@id",
"title": "@title",
}]
}
}
3、怎么在mock里面加数组
答：可以自定义数组，也可以用mock.js里面demo
{
"code": 0,
"message": "success",
"data": {
"size": 10,
"page": 1,
"total": 4,
"list|10": [{
"id": "@id",
"title": "@title",
"array|1-10": [{
"name|1": [
"Hello",
"Mock.js",
"!"
]
}]
}]
}
}
九、其他
PPT链接：PPT：https://ptteng.github.io/WEB/ppt/js-11-Easy%20Mock.html#/
视频链接：https://v.qq.com/x/page/n05672odmov.html
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
网友评论