本篇内容主要讲解“js mock有什么优点”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“js mock有什么优点”吧!
mock解决的问题,开发时,后端还没完成数据输出,前端只好写静态模拟数据。数据太长了,将数据写在js文件里,完成后挨个改url。某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。特殊的格式,例如IP,随机数,图片,地址,需要去收集。
mock优点
1、前后端分离
让前端工程师独立于后端进行开发。
2、增加测试的真实性
通过随机数据,模拟各种场景。
3、开发无侵入
不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数据。
4、用法简单
符合直觉的接口。
5、数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
6、方便扩展
支持支持扩展更多数据类型,支持自定义函数和正则。
7、在已有接口文档的情况下,我们可以直接按照接口文档来开发,将相应的字段写好,在接口完成之后,只需要改变url地址即可。
8、不涉及跨域问题,
mock案例demo
1.首先需要下载安装mockjs模块
cnpminstallmockjs-S
2.然后可以在scr下创建一个文件夹,用于存放模拟的数据的文件例如/src/mock/index.js,在这个文件中
复制代码
constMock=require("mockjs");
letdata=Mock.mock({
"data|100":[//生成100条数据数组
{
"shopId|+1":1,//生成商品id,自增1
"shopMsg":"@ctitle(10)",//生成商品信息,长度为10个汉字
"shopName":"@cname",//生成商品名,都是中国人的名字
"shopTel":/^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号
"shopAddress":"@county(true)",//随机生成地址
到此,相信大家对“js mock有什么优点”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。