基本介绍：
在我们前端开发中经常遇到这样的事情，接口没有写好，只能写静态页面，如何才能用很简单的方法模拟后端数据呢？mockjs就干了这件事，而且干的还挺好。
下面是我作为初学者的一些总结经验，期望和小伙伴们一起交流进步。
实现的功能有：1、基于数据模板 生成模拟数据 2、基于html模板 生成数据 3、拦截并模拟ajax请求
安装：
一、安装(需要安装nodejs)
node：
npm install mockjs
bower:
npm install -g bower
bower install --save mockjs
二、mockjs体验
三、语法总结（基本的几种格式，下面我们就跟着例子走一遍，就学会了）
数据模板定义（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>Titletitle>
<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>
github学习地址：https://github.com/nuysoft/Mock/wiki/Getting-Started
mockjs官网：
http://mockjs.com/，官网是最好的学习资料。