前后端分离技术mock

我会带着你远行 2023-07-18 12:40 16阅读 0赞

## mock是干什么的？ ##

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

## mock功能 ##

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

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

## mock安装地址 ##

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

## 如何使用 ##

页面中先引用

配合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>

案例：