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请求并返回模拟数据。
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