快捷搜索:

fastmock在线模拟数据

fastmock可以让你在没有后端程序的情况下能真实地在线模拟ajax请求,你可以用fatmock实现项目初期纯前端的效果演示,也可以用fastmock实现开发中的数据模拟从而实现前后端分离。在使用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
    })
  },
  // 产品配置-费用类型配置
  {
    url: /pms/productFeeDetail/queryByProductNo,
    type: get,
    on: true,
    resp: Mock.mock({
      body: {
        currentPage: 1,
        isMore: 0,
        pageSize: 15,
        resultList|10: [
          {
            feeTypeNo|+1: 1,
            feeTypeCode: /[A-Z]{4,8}/,
            feeTypeName: @name,
            incomeType|1: [1, 2],
            feeType|1: [C, D],
            ratio|1: [0.5, 0.25],
            productChargeBasis|1: [1, 2, 3],
            fixedAmount|1-100: 5
          }
        ],
        startIndex: 0,
        totalNum: 100,
        totalPage: 1
      },
      reCode: 0000,
      reMsg: 成功,
      success: true
    })
  }

为此,我们将mock层独立出来,通过中间服务的形式在前端和后端服务之前建立一道围栏,使用fastmock,前端只需要修改自己的XHR请求地址,后端只需要在开发前和前端约定好接口文档即可。等到后端服务开发完成,前端再将XHR请求地址替换回来进行联调测试即可。

Mock.js语法

fastmock 引入了mock.js的支持,支持所有的Mock.js随机数据的生成规则。在这里介绍几个基本规则,更多Mock.js内容移步

    基础随机内容的生成 { "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)" // 随机生成指定格式的时间 // ...... } 列表数据 { "code": "0000", "data": { "pageNo": "@integer(1, 100)", "totalRecord": "@integer(100, 1000)", "pageSize": 10, "list|10": [{ "id|+1": 1, "name": "@cword(10)", "title": "@cword(20)", "descript": "@csentence(20,50)", "price": "@float(10,100,10,100)" }] }, "desc": "成功" } 图片 mockjs可以生成任意大小,任意颜色块,且用文字填充内容的图片,使我们不用到处找图片资源就能轻松实现图片的模拟展示 "code": "0000", "data": { "pageNo": "@integer(1, 100)", "totalRecord": "@integer(100, 1000)", "pageSize": 10, "list|10": [{ // 参数从左到右依次为,图片尺寸,背景色,前景色(及文字颜色),图片格式,图片中间的填充文字内容 "image": "@image(200x100, #ffcc33, #FFF, png, Fast Mock)" }] }, "desc": "成功"
经验分享 程序员 职场和发展