标签:mock 丰富多彩 模拟 模板 随机 rurl Mockjs 数据 Mock
Mockjs的两大必杀技:
1、生成随机数据
2、拦截 Ajax 请求
有了mockjs可以
1、让前端攻城师独立于后端进行开发。
2通过随机数据,模拟各种场景。
3、不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
4、支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
wiki地址:https://github.com/nuysoft/Mock/wiki
基本上半个小时就可以把官方自带例子浏览一遍了。
一、语法规范
1、数据模板
数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
属性值是可以是字符串 String、Number、Boolean、Object、Array、Function、RegExp
2、占位符
占位符格式:@占位符
占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。
占位符 引用的是 Mock.Random 中的方法。
来个最简单的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://mockjs.com/dist/mock.js"></script>
</head>
<body>
<script type="text/javascript">
// @NAME占位符 使用的是Random类中随机名
console.log(Mock.mock({
name:'@NAME'
}));
</script>
</body>
</html>
二、mock()函数根据数据模板生成模拟数据
1、Mock.mock( template )
根据数据模板生成模拟数据。
2、Mock.mock( rurl, template )
当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
3、Mock.mock( rurl, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
4、Mock.mock( rurl, rtype, template )
记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
5、Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。
其中rurl、rtype、template、function(options)均为可选参数
三、Mock中最常用的随机工具类Random
随机基本数据类型:
boolean,integer, float, string等
随机时间日期:
date, time, datetime, now
随机图片
img, dataImage(base64编码)
随机颜色
color, hex, rgb
随机文本
word, title,cword, ctitle
随机名字
first, last, name, cfirst, clast, cname
随机Web
url, domain, protocol, tld, email, ip
随机地址
region, province, city
来个简单的helloworld
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://mockjs.com/dist/mock.js"></script>
</head>
<body>
<script type="text/javascript">
// 可以得到随机的省市区了
console.log(Mock.Random.province(),Mock.Random.city(),Mock.Random.region());
</script>
</body>
</html>
标签:mock,丰富多彩,模拟,模板,随机,rurl,Mockjs,数据,Mock 来源: https://blog.csdn.net/zhangzhaoyuxunlei/article/details/105373276
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。