推荐一个在线接口Mock工具fastmock

若是想直接进入实战请猛戳这里fastmock线上地址www.fastmock.site

fastmock可让你在没有后端程序的状况下能真实地在线模拟ajax请求，你能够用fatmock实现项目初期纯前端的效果演示，也能够用fastmock实现开发中的数据模拟从而实现先后端分离。以下面的接口

• 模拟一个用户列表https://www.fastmock.site/moc...
• 模拟各类特殊类型的数据https://www.fastmock.site/moc...

您能够直接在浏览器打开上面的连接或者用ajax请求查看返回的数据

在使用fastmock以前，你的团队实现数据模拟多是下面的方案中的一种或者多种

• 本地手写数据模拟，在前端代码中产生一大堆的mock代码。
• 利用mockjs或者canjs的can-fixture实现ajax拦截，本地配置必要的json规则。
• 后端在Controller层造假数据返回给前端。

上面的方式中，无论哪种方式，都会要求开发人员写一些跟项目本无任何关联的代码，第一个和第二个方式还会须要前端项目在本地引入没必要要的js文件。好比下面的mock数据

// 产品配置
  {
    url: '/pms/product/list',
    on: true,
    type: 'get',
    resp: Mock.mock({
      'body': {
        'currentPage': 1,
        'isMore': 0,
        'pageSize': 15,
        'resultList|10': [
          {
            'productNo': '11111',
            'productName|1': ['产品名称1', '产品名称2', '产品名称3', '产品名称4', '产品名称5'],
            'productType|1': ['1', '2', '3', '4', '5'],
            'status|1': ['1', '2'],
            'gmtCreate': '@DATETIME("yyyy-MM-dd HH:mm:ss")',
            'gmtModified': '@now("yyyy-MM-dd HH:mm:ss")',
            'createUserCode': '@name'
          }
        ],
        'startIndex': 0,
        'totalNum': 100,
        'totalPage': 1
      },
      'reCode': '0000',
      'reMsg': '成功',
      'success': true
    })
  },
  // 产品配置-贷款材料配置
  {
    url: '/pms/cfgLoanDoc/list',
    on: true,
    resp: Mock.mock({
      'body': {
        'currentPage': 1,
        'isMore': 0,
        'pageSize': 15,
        'resultList|10': [
          {
            'loanDocCode|+1': 1,
            'loanDocName': /[测试字体]{4,30}/
          }
        ],
        'startIndex': 0,
        'totalNum': 100,
        'totalPage': 1
      },
      'reCode': '0000',
      'reMsg': '成功',
      'success': true
    })
  }

上面的代码为mockjs的事例代码，更多mockjs相关资料参考连接 mockjs文档

为此，咱们将mock层独立出来，经过中间服务的形式在前端和后端服务以前创建一道围栏，使用fastmock，前端只须要修改本身的XHR请求地址，后端只须要在开发前和前端约定好接口文档便可。等到后端服务开发完成，前端再将XHR请求地址替换回来进行联调测试便可。

tip:固然，你也能够经过npm script不一样命令加载不一样配置文件的形式切换你的XHR地址，这里不做详细介绍。

仍是不了解fastmock？让咱们跟着教程一探究竟吧了解并开始使用fastmock