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/，官网是最好的学习资料。
 
posted @ 2016-12-01 12:35  rich23  阅读(7936)  评论(0)  编辑  收藏  举报