web开发 之 mock方案研究

本文联合作者: 诺之林 / 小怪兽 / 代码猴

目录

• json-server

  • basic

  • config

  • advanced

  • faker

  • 小结

• Easy-Mock

  • Example

  • Mock.js

  • 小结

• dva

  • basic

  • advanced

  • 小结

json-server

basic

• GET

curl -X GET http://localhost:3000/todos

curl -X GET http://localhost:3000/todos/1

• POST

curl -X POST -H "Content-type: application/json" -d '{"todo":"Post ToDo"}' http://localhost:3000/todos

• PATCH

curl -X PATCH -H "Content-type: application/json" -d '{"todo":"Patch ToDo"}' http://localhost:3000/todos/1

• DELETE

curl -X DELETE http://localhost:3000/todos/5

config

• json-server.json

{
    "port": 3001,
    "routes": "routes.json"
}

• routes.json

{
    "/api/*": "/$1",
    "/items\\?id=:id": "/todos/:id"
}

advanced

• Filter

curl -X GET http://localhost:3000/posts?title=post-title-1

• Paginate

curl -X GET http://localhost:3000/posts?_page=2

• Sort

curl -X GET http://localhost:3000/posts?_sort=title&_order=desc

• Slice

curl -X GET http://localhost:3000/posts?_start=2&_end=5

faker

curl -X GET http://localhost:3000/employees

小结

• 简单

• 快速

• RESTful

Easy Mock

Example

• GET

curl -X GET http://www.easy-mock.com/mock/59db1b2647bc3811aa7c4225/example/machines

curl -X GET http://www.easy-mock.com/mock/59db1b2647bc3811aa7c4225/example/machines?machine_state=on

• POST

curl -X POST -H "Content-type: application/json" -d '{"machine_name":"挖掘机A01"}' http://www.easy-mock.com/mock/59db1b2647bc3811aa7c4225/example/machines

• PATCH

curl -X PATCH -H "Content-type: application/json" -d '{"machine_name":"挖掘机Z01"}' http://www.easy-mock.com/mock/59db1b2647bc3811aa7c4225/example/machines/999

• DELETE

curl -X DELETE http://www.easy-mock.com/mock/59db1b2647bc3811aa7c4225/example/machines/999

Mock.js

{
  "code": 0,
  "result": {
    'data|1-10': [{
      'id|+1': 100,
      machine_name: '@ctitle(3, 20)',
      captain_name: '机长@cname(2, 3)',
      assets_code: 'AC@integer(10000000, 99999999)',
      image_cover_url: '@image("200x200", "#00405d", "#FFF", "测试图片")',
      'is_online|1-2': true,
      source: '@pick(["bought", "rented", "unknown"])',
      machine_state: function({
        _req,
        Mock
      }) {
        if (_req.query.machine_state === 'on') {
          return 'on'
        } else if (_req.query.machine_state === 'off') {
          return 'off'
        } else {
          return Mock.mock('@pick(["on", "off"])')
        }
      },
      height: '@float(1, 100, 1, 2)',
    }],
    total_count: '@integer(1, 10)',
  }
}

小结

• 在线服务

• 可视化

• 快速

dva

basic

• .roadhogrc.mock.js

const mock = {};
require('fs').readdirSync(require('path').join(__dirname + '/src/mock')).forEach(function (file) {
  Object.assign(mock, require('./src/mock/' + file));
})
module.exports = mock;

• ./src/mock/machine.js

const Mock = require('mockjs');

const database = Mock.mock({
  'data|20': [
    {
      'id|+1': 100,
      machine_name: '@CTITLE(3, 20)',
    },
  ],
}).data;

module.exports = {
  ['GET /machines'](req, res) {
    const pageSize = 10;
    const page = 1;

    res.status(200).json({
      data: database.slice((page - 1) * pageSize, page * pageSize),
      total: database.length,
    });
  },
}

advanced

• .roadhogrc.mock.js

import Mock from 'mockjs';
import mockTemplate from './src/mock';

const mockApi = {};

mockTemplate.forEach((routerObject) => {
    if (routerObject.isMock === true) {
        mockApi[routerObject.method + ' /mock' + routerObject.router] = (req, res) => {
            res.end(JSON.stringify(
                Mock.mock({
                    "XCmdrCode": 0,
                    'XCmdrResult': routerObject.data,
                })
            ));
        };
    }
});

export default mockApi;

• .roadhogrc.js

proxy: {
    "!/mock/**": {
        target: {
            host: "sa.zhgcloud.com",
            protocol: "https:",
            port: 443
        },
        ignorePath: false,
        changeOrigin: true,
        secure: false,
        bypass: function (req, res, proxyOptions) {
            if (req.path.indexOf('/mock') !== 0 && req.headers['x-cmd-request'] === undefined && req.headers['x-requested-with'] === undefined) {
                return './public/index.html';
            }
        },
    }
}

• ./src/mock/index.js

export default [
    {
        method: 'GET',
        router: '/machines/:id',
        data: {
            'data_list|0-10': [{
                'id|+1': 1,
                machine_name: 'mock GET @CTITLE(2,20)',
            }],
        },
        isMock: true,
    }, 
];

• ./src/utils/request.js

import fetch from 'dva/fetch';
import pathToRegexp from 'path-to-regexp';
import mockTemplate from '../mock';
import request from '../utils/request';

function isMock(method, url) {
    let hasMock = false;
    mockTemplate.forEach((routerObject) => {
        if (routerObject.isMock === true && method === routerObject.method && pathToRegexp(routerObject.router).exec(url.split('?')[0]) !== null) {
            hasMock = true;
        }
    });
    return hasMock;
}

const apiFetch = (url, options) => {
    const method = options.method !== undefined ? options.method.toUpperCase() : 'GET';

    if (isMock(method, url)) {
        return fetch(`/mock${url}`, options);
    } 
    
    return fetch(url, options);
};

小结

• 非侵入式

• 部分mock

• 数据格式校验