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

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

• 模拟一个用户列表https://www.fastmock.site/mock/871b3e736e653b99374b7713e4011f9f/boss/user/list
• 模拟各种特殊类型的数据https://www.fastmock.site/mock/871b3e736e653b99374b7713e4011f9f/boss/user/list2

您可以直接在浏览器打开上面的链接或者用 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平台录入以下接口内容

{
  "code": "0000",
  "data": {
    "userInfo": {
      "username": "zhangsan",
      "userId": 1,
      "avator": "http://www.xxx.com/upload/xxx.png",
      "token": "e10adc3949ba59abbe56e057f20f883e"
    }
  },
  "desc": "成功"
}

当访问录入的接口地址时，就能返回对应的用户信息

再例如，我们要模拟请求一个产品列表接口，可以在fastmock平台录入以下接口内容

{
  "code": "0000",
  "data": {
    "pageNo": 1,
    "totalRecord": 1000,
    "pageSize": 10,
    "list|10": [{
      "name": "@cname",
      "title": "@paragraph(10, 50)",
      "descript": "@paragraph(10, 100)",
      "price": 100
    }]
  },
  "desc": "成功"
}

访问接口 https://www.fastmock.site/mock/51674b31145c5944e463f5fbc31e418f/xyd2/product/list 就可以得到一个10条记录的产品列表了。

聪明的你可能已经发现了，上面的代码中，有mockjs规则的模拟数据，包括列表，中文名字，段落内容等。没错，你熟悉的mockjs规则，在fastmock平台都可以使用。

常见的规则示例如下

{
  "string|1-10": "=", // 随机生成1到10个等号
  "string2|3": "=", // 随机生成2个或者三个等号
  "number|+1": 0, // 从0开始自增
  "number2|1-00.1-3": 1, // 生成一个小数，小数点前面1到10，小数点后1到3位
  "boolean": "@boolean( 1, 2, true )", // 生成boolean值 三个参数，1表示第三个参数true出现的概率，2表示false出现的概率
  "name": "@cname", // 随机生成中文姓名
  "firstname": "@cfirst", // 随机生成中文姓
  "int": "@integer(1, 10)", // 随机生成1-10的整数
  "float": "@float(1,2,3,4)", // 随机生成浮点数，四个参数分别为，整数部分的最大最小值和小数部分的最大最小值
  "range": "@range(1,100,10)", // 随机生成整数数组，三个参数为，最大最小值和加的步长
  "natural": "@natural(60, 100)", // 随机生成自然数（大于零的数）
  "email": "@email", // 邮箱
  "ip": "@ip" ,// ip
  "datatime": "@date('yy-MM-dd hh:mm:ss')" // 随机生成指定格式的时间
  // ......
}

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