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

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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

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

一、实例

  • 创建项目,安装依赖包

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

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

    
    
        
        测试 Mock 拦截请求的功能
    
    
    
        
        
        
  • 打开页面,点击按钮,会看到下面的内容数据会不停变换,具体过程如下:

    • 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 被叫做占位符,不区分大小写,想要了解更多占位符的用法,可以参考下表,建议都敲一遍感受一下。 Mock 占位符文档

    Type Method
    Basic boolean, natural, integer, float, character, string, range, date, time, datetime, now
    Image image, dataImage
    Color color, hex, rgb, rgba, hsl
    Text paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
    Name first, last, name, cfirst, clast, cname
    Web url, domain, email, ip, tld, protocol
    Address region, province, city(prefix?), county(prefix?), zip
    Helper capitalize, upper, lower, pick, shuffle
    Miscellaneous guid, id

三、Mock 伪造服务端提供数据接口

什么是数据接口,你可以认为是浏览器发送请求 locahost:8000/xxx/xxxx

这个请求发送到服务器,服务器会有相应的方法接收这个请求,并作出响应,返回数据。

在这里,Mock 就起到了伪造服务端提供数据接口的功能。想一想一个前端开发人员完全不需要依赖后端人员自己就可以提供数据接口,这是一件多么兴奋的事情。

Mock 如何伪造服务端提供数据接口

四、dva 之 Mock 的写法

  • dva 中集成了 Mock,有自己的一套写法,贴上代码:

    // src/mock/app.js
    // 引入 mockjs 库,用于造假数据
    var Mock = require('mockjs');
    
    // 造假数据
    const data = Mock.mock({
        'user|10': [
            {
                'id': '@id',
                'username': '@name',
                'address': '@city(true)'
            }
        ]
    });
    
    export default {
    
      // 造数据接口,当请求 url="localhost:8000/app/me",请求方式 method = "GET" 时就会进入这个方法
      [`GET localhost:8000/app/me`] (req, res) {
        const response = {};
        response.data = data;   // 使用 mock 造的假数据
        res.json(response);
      }
    
    };
    
    • 造假数据 data;

    • 造数据接口,该方法提供 req 和 res 方法,了解请求与响应的应该对这两个对象并不陌生。

    • 最终通过 exprot default 暴露出去的仅仅是方法,方法名采用的是 ES6 的模板字符串语法,转换成普通方法也就是:

      // 方法名为:'GET localhost:8000/app/me'
      function 'GET localhost:8000/app/me' (req, res) {
          // ...
      }
      
  • .roadhogrc.mock.js 文件

    读取 src/mock/app.js 文件的内容,并返回一个对象。

    const mock = {};
    let fs = require('fs');
    let path = require('path');
    
    let pathArr = [];
    
    function getFile (src) {
        src = src || path.join(process.cwd() ,'/src/mock');
        // 读取 src/mock 目录
        fs.readdirSync(src).forEach(function (file) {
            const filepath = path.join(src, file);
            let stats = fs.statSync(filepath);
    
            if (stats.isFile()) {
                pathArr.push(filepath)
            } else {
                getFile(filepath);
            }
        });
    }
    
    getFile();
    
    pathArr.forEach(function(file) {
        Object.assign(mock, require(file));
    });
    module.exports = mock;
    

    为什么要这样写,所有的伪造服务端数据接口不可能都一个文件中,而这里的处理就是将不同文件中伪造服务端数据接口的方法都挪到一个对象中,该文件返回的是一个对象,在这个例子里如下:

    {
        'GET localhost:8000/app/me' (req, res) {
            // ...
        }
    }
    

    这样当页面中请求 url = "localhost:8000/app/me", method = "GET" 时就会进入这个方法。

  • dva 运行 mock 机制

    在 dva 第一次启动的时候,会运行 .roadhog.mock.js 文件,此时 src/mock/app.js 中造的数据接口就已经运行了,就相当于有个虚拟的后台在提供服务一样。当浏览器中发出请求,请求地址 localhost:8000/app/me 时就会进入到 src/mock/app.js 中的对应方法中,返回 mock 造的假数据。

五、参考文档

  • Mock 官方文档

转载于:https://my.oschina.net/dkvirus/blog/1510990

你可能感兴趣的:(dva 之 Mock —— 实现前后端分离开发)