mockjs学习总结（方便前端模拟数据，加快开发效率）
Posted rich23
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mockjs学习总结（方便前端模拟数据，加快开发效率）相关的知识，希望对你有一定的参考价值。
基本介绍：
在我们前端开发中经常遇到这样的事情，接口没有写好，只能写静态页面，如何才能用很简单的方法模拟后端数据呢？mockjs就干了这件事，而且干的还挺好。
下面是我作为初学者的一些总结经验，期望和小伙伴们一起交流进步。
实现的功能有：1、基于数据模板 生成模拟数据 2、基于html模板 生成数据 3、拦截并模拟ajax请求
安装：
一、安装(需要安装nodejs)
node：
npm install mockjs
bower:
npm install -g bower
bower install --save mockjs
二、mockjs体验
<script>
//模拟自定义对象
var data = Mock.mock({
"list|2-3":23,
"name|1":"@name",
"age|1-88":100
})
console.info(JSON.stringify(data,null,4))
//模拟ajax请求
var data1 = Mock.mock("http://rich.cn",{
"name":"@name",
"isTrue|1":true,
"color":"@color"
})
$.ajax({
url:‘http://rich.cn‘,
success:function(e){
console.info(e)
}
})
console.info(JSON.stringify(data1,null,4))
</script>
三、语法总结（基本的几种格式，下面我们就跟着例子走一遍，就学会了）
数据模板定义（DTD）
基本结构：属性名 | 生成规则 ：值
1、‘name|min-max‘:value
2、 ‘name|count‘:value
3、‘name|min-max.dmin-dmax‘:value
4、 ‘name|min-max.dcount‘:value
5、‘name|count.dmin-dmax‘:value
6、 ‘name|count.dcount‘:value
7、 ‘name|+count‘:value
数据占位符定义（DPD）
基本结构：属性名:占位符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/mockjs/dist/mock.js"></script> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> </head> <body> <script> //值为string时 var data1 = Mock.mock({ "name1|2-3":"nihao",//重复生成nihao，重复次数大于等于2，小于等于3 "name2|3":"*",//重复生成*，重复次数等于3 }) console.info("string",JSON.stringify(data1,null,4)) //值为boolean时 var data2 = Mock.mock({ ‘name3|1‘:true, //"1"为数字，没有意义，必须存在，随机显示true或false ‘name4|1-9‘:true//出现true的概率为1/（1+9），false的概率为9/（1+9） }) console.info("boolean",JSON.stringify(data2,null,4)) //值为number时 var data3 = Mock.mock({ ‘name5|+1‘:2,//不会自动加1？？显示2， ‘name6|12‘:3,//显示规则所显示的数字 ‘name7|1-100‘:3,//随机生成一个大于等于1小于等于100的数字，3为确定类型，大小随意 ‘name8|1-100.2-3‘:2,//随机生成一个大于1小于等于100的数字，小数点保留2位或3位。2为确定类型，大小随意 ‘name9|123.2‘:2//生成一个123，小数点后保留两位的数字 }) console.info("number",JSON.stringify(data3,null,4)) //值为array时 var data4 = Mock.mock({ ‘name10|1‘:[1,2,3],//随机生成数组中的每一项 ‘name11|3‘:[5,6,7],//重复数组内的元素3次输出 ‘name12|1-3‘:[12,13,15,16],//重复数组内的元素1-3次输出 ‘name13|2-3‘:[ { ‘name4|1-9‘:true, ‘name7|1-100‘:3, ‘name9|123.2‘:2, },{ "name1|2-3":"nihao", "name2|3":"*", },{ "name1|2-3":"nihao", "name2|3":"*", },{ ‘name5|+1‘:2, ‘name6|12‘:3, ‘name7|1-100‘:3, } ] }) console.info("array",JSON.stringify(data4,null,4)) //当属性名是object时 var data5 = Mock.mock({ ‘name14|1‘:{ id:"23", class:"衬衫", price:"1234" }, ‘name15|2-3‘:{ id:"34", class:"袜子", price:"156", size:"xxl" } }) console.info("object",JSON.stringify(data5,null,4)) //当属性值是function时 var data6 = Mock.mock({ ‘fun‘:function(){ console.info("123") } }) console.info("function",JSON.stringify(data6,null,4)) //当属性值为RegExp时 var data7 = Mock.mock({ ‘regexp1‘:/[a-z][A-Z]/, ‘regexp2‘:/\d{2,8}/, ‘regexp3‘:/\w[0-9]/ })//生成自定义字符串 console.info("RegExp",JSON.stringify(data7,null,4)) //模拟ajax数据 //模板：Mock.mock( rurl?, rtype?, template|function(options) ) var data8 = Mock.mock("http://rich.cn","get",{ "name":"@name", "isTrue|1":true, "color":"@color" }) $.ajax({ url:‘http://rich.cn‘, method:"get", success:function(e){ console.info(e) } }) //占位符地定义格式 //属性名:占位符 var data9 = Mock.mock({ first:‘@FIRST‘, email:‘@email‘, sent:‘@sentence‘, color:‘@color‘, name:"@name" }) console.info(JSON.stringify(data9,null,4)) </script> </body> </html>
mockjs官网：http://mockjs.com/，官网是最好的学习资料。
以上是关于mockjs学习总结（方便前端模拟数据，加快开发效率）的主要内容，如果未能解决你的问题，请参考以下文章