前后端分离技术mock

mock是干什么的？

mock.js官网上介绍的是 生成随机数据，拦截Ajax请求。简单说 mock就是一个模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试

mock功能

1.模拟ajax请求，生成请求数据
2.根据数据模板生成模板数据
3.加快前端开发速度

在开发过程中，进度比较赶的情况下，前端人员当页面写完时，后台的接口还没写完，等要交付的时候后端才把接口给你，这个时候就很尴尬。这个时候Mock就可以很好的解决这个问题。

mock安装地址

https://github.com/nuysoft/Mock/wiki/Getting-Started

如何使用

页面中先引用

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>

配合Ajax使用

<div id='mockjs'></div>
<script type="text/javascript">

    //调用mock方法模拟数据
    Mock.mock(
        'http://mockjs', {
            "userName" : '@name',     //模拟名称
            "age|1-100":100,          //模拟年龄(1-100)
            "color"    : "@color",    //模拟色值
            "date"     : "@date('yyyy-MM-dd')",  //模拟时间
            "url"      : "@url()",     //模拟url
            "content"  : "@cparagraph()" //模拟文本
        }
    );

    //ajax请求
    $("#mockjs").click(function(){
        $.ajax({
            url        : "http://mockjs",    //请求的url地址
            dataType   : "json",   //返回格式为json
            async      : true, //请求是否异步，默认为异步
            data       : {},    //参数值
            type       : "GET",   //请求方式
            beforeSend : function() {
                //请求前的处理
            },
            success: function(req) {
                //请求成功时处理
                console.log(req);
            },
            complete: function() {
                //请求完成的处理
            },
            error: function() {
                //请求出错处理
            }
        });
    });
</script>

案例：

<script>
    var scroller = new BScroll('#scroll-warp',{});
    var Random=Mock.Random;
    var data = Mock.mock(
        {"data|10-20":[{
            "name":"@cname",
            "img":Random.image('100x100','#999'),
            "price" :'@float(100,200,1,1)',
            "price1" :'@float(10,100,1,1)',
            "text":Random.cparagraph( 60, 100 )
            }]
        })
    console.log(data);
    //此部分可简写
    function getDomFunc(imgs,name,price,price1,text) {
        var img=document.createElement("img");
        img.src=imgs;
        var li=document.createElement("li");
        li.className="content";
        var div=document.createElement("div");
        div.className='content-l';
        var span=document.createElement("span");
        span.className='contentl-tab';
        span.innerText=text;
        var span1=document.createElement("span");
        span1.className='contentl-b';
        span1.innerText=price;
        var span2=document.createElement("span");
        span2.className='contentl-rb';
        span2.innerText=price1;
        var span3=document.createElement("span");
        span3.className='contentl-br';
        span3.innerText='购买';
        var span4=document.createElement("span");
        span4.className='contentl-tb';
        span4.innerText=name;
        li.appendChild(img);
        li.appendChild(div);
        div.appendChild(span);
        div.appendChild(span1);
        div.appendChild(span2);
        div.appendChild(span3);
        div.appendChild(span4);
        return li;
    }
    for(var i=0;i<data.data.length;i++){
        var $ul=document.getElementById("div");
        $ul.appendChild( getDomFunc(data.data[i].img,data.data[i].name,data.data[i].price,data.data[i].price1,data.data[i].text));
    }
</script>