文档章节

dva 之 Mock —— 实现前后端分离开发

dkvirus
 dkvirus
发布于 2017/08/16 10:52
字数 1530
阅读 175
收藏 1

在项目开发中,经常会出现这么一种情况:前端开发人员负责开发页面功能,后端开发人员负责提供数据接口,倘若后端开发人员提供接口的速度比前端开发人员开发页面功能的速度要慢的话,势必会造成不必要的工期滞缓。Mock 的出现弥补了这个缺陷,Mock 主要有以下两个特色:

  • 提供了丰富的造数据能力,造假技术一流,能满足绝大多数的要求;
  • 提供虚拟的 http 请求接口,用起来就像是真的是请求后端开发人员提供的数据接口一样。

一、实例

  • 创建项目,安装依赖包

    安装 jquery 和 mockjs 依赖包,jquery 包用于发送 ajax 请求

    $ npm install jquery mockjs   
    
  • 新建 index.html 页面,内容如下:

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试 Mock 拦截请求的功能</title>
    </head>
    <body>
    
        <!--一个按钮和一个 DIV,按钮用于发送 ajax 请求,DIV 用于接收数据接口返回的数据内容-->
        <button type="button" onclick="mock()">点击我发送 Ajax 请求</button>
        <div id="container" style="width: 350px;height: 500px;background: yellowgreen;overflow-y: auto"></div>
    
        <!--引入 mockjs 库,用于造假数据和伪造后台数据接口--> 
        <script src="../node_modules/mockjs/dist/mock-min.js"></script>
        <!--引入 jquery 库,用于发送 ajax 请求-->
        <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    
        <script>
            // 造假数据 + 造虚拟数据接口 
            // Mock.mock(rurl, template)
            Mock.mock(/\.json/, {
                'list|1-10': [{
                    'id|+1': 1,
                    'email': '@EMAIL'
                }]
            })
    
            // 发送 ajax 请求,并将“后台”返回的数据打印在 DIV 上 
            function mock () {
                $.ajax({
                    url: 'hello.json',
                    dataType: 'json'
                }).done(function(data, status, jqXHR){
                    $('#container').empty();
                    $('<pre>').text(JSON.stringify(data, null, 4))
                        .appendTo('#container')
                })
            }
    
        </script>
    </body>
    </html>
    
  • 打开页面,点击按钮,会看到下面的内容数据会不停变换,具体过程如下:

    • Mock 在这里模拟了服务端的数据接口;
    • Ajax 发送一个请求(请求 hello.json 这个地址);
    • Mock 接收所有 .json (正则表达式:/.json/)结尾的请求,并将造的假数据返回给 Ajax;
    • Ajax 的回调函数接收到数据后将数据打印到页面的 DIV 元素中用于展示。

二、Mock 造假数据

这部分建议直接去 Mock Github 文档 学习示例代码,直接将每个示例的代码 copy 下来,运行起来看结果,将示例代码全部跑一遍应该也就知道怎么造数据啦。(ps:文档写的真的很好,这里就当做抛砖引玉好了)

  • Mock 可以造什么数据呢?字符串,数字,布尔值,数组,对象等等等。练习地址:Mock 造数据示例代码

  • Mock 也给我们提供了一些常用的数据,代码如下:

    // 使用 Mock
    var Mock = require('mockjs');
    
    var data = Mock.mock({
        name: {
            first: '@FIRST',
            middle: '@FIRST',
            last: '@LAST',
            full: '@first @middle @last'
        }
    })
    
    // 输出结果
    console.log(JSON.stringify(data, null, 4))
    

    结果为:

    {
        "name": {
            "first": "Matthew",
            "middle": "Richard",
            "last": "Clark",
            "full": "Matthew Richard Clark"
        }
    }
    

    在上述示例中,我们使用 @First ,Mock 就会帮我们随机生成一个姓氏 Matthew,像这种简便的写法 @First 被叫做占位符,不区分大小写,想要了解更多占位符的用法,可以参考下表,建议都敲一遍感受一下。