1.背景介绍
Easy Mock是一个可视化，并且能快速生成模拟数据的服务。以项目管理的方式组织Mock List，能帮助我们更好的管理Mock数据，不怕丢失。
解决的问题：
开发时，后端还没完成数据输出，前端只好写静态模拟数据。
数据太长了，将数据写在js文件里，完成后挨个改url。
某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。
想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。
特殊的格式，例如IP,随机数，图片，地址，需要去收集。
2.知识剖析
常见的Mock方式
1、将Mock数据直接写在代码里
2、利用JS拦截请求
3、利用Charles、Fiddler等代理工具拦截请求
4、Mock平台。如Easy Mock、RAP等
使用的优势：
1、前后端分离
让前端工程师独立于后端进行开发。
2、增加单元测试的真实性
通过随机数据，模拟各种场景。
3、开发无侵入
不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
4、用法简单
符合直觉的接口。
5、数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
6、方便扩展
支持支持扩展更多数据类型，支持自定义函数和正则。
7、在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。
3.常见问题
一、如何使用Easy Mock
4.解决方案
1、登录Easy Mock官网
2、创建个人项目或者团队项目
3、新增接口
4、在项目中使用接口
具体步骤操作可详见视频
5.编码实战
Demo：https://ptteng.github.io/PPT/demo/js-11-How%20to%20use%20easy%20mock/demo.html
6.扩展思考
Mock语法该如何使用：见Mock.js官网。
大家可能觉得直接填写接口url地址过长，到时候nginx配置好之后，更改接口地址比较麻烦
但是我们可以利用nginx配置跨域请求，将接口url公共的部分放在nginx里面，项目中只需要后面的部分即可。到时候接口可以使用的时候，将url地址换成对应的IP和端口即可。这样，项目代码里面无需做任何改动即可正常运行。
7.参考文献
参考一：Easy Mock官网 https://easy-mock.com/
参考二：Mock.js官网 http://www.cnblogs.com/rion1234567/p/5556891.html
8.更多讨论
课后提问：
1、除了Easy Mock，大家还用过哪些类似的插件或者方法来拦截Ajax请求并返回模拟数据。
答：使用Mock.js，直接写JSON假数据。
2、put、delete这些请求能改变状态或者删除吗？
答：不能，只能模拟一个发送请求之后的结果，并不能真的进行上下线操作或者删除操作。
3、哪种mock方式更好。
答：看项目的需要可以选择不同的方法来模拟Ajax请求并返回模拟数据。
如何使用Easy Mock_腾讯视频
PPT地址：https://ptteng.github.io/PPT/PPT/js-11-How%20to%20use%20easy%20mock.html
视频地址：https://v.qq.com/x/page/d053015s4yg.html
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
下期预告：有哪些常见的验证表单方式（即时输入验证，失去焦点验证等），他们各自的优缺点是什么？不见不散~
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
我的邀请码：96194340，或者你可以直接点击此链接：http://www.jnshu.com/login/1/96194340
网友评论