Navigation

    云、贵、川、渝IT人的圈子
    • Register
    • Login
    • Search
    • 主页
    • 问答
    • 话题
    • 热门
    • 圈子
    • 招聘
    • 活动
    • 项目

    一个快速模拟api的工具,对前端的同学非常有用

    开源推荐
    fastmock
    1
    1
    9
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • jushen50879
      jushen50879 last edited by

      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
          })
        }
      

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

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

      tip:当然,你也可以通过npm script不同命令加载不同配置文件的形式切换你的XHR地址,这里不作详细介绍。

      如果你经常需要模拟接口请求,请点此快速通道

      https://www.fastmock.site

      1 Reply Last reply Reply Quote 0
      • First post
        Last post
      8
      玻
      U
      A
      大
      A
      黑
      低
      天
      白
      快
      爱
      白
      美
      此
      荒
      为
      哭
      柳
      无
      真

      社群
      昆明网页设计交流吧
      友情链接
      • Funtask
      • Funtask 社区
      • SUWIS
      • 云南北大青鸟
      ©2019-2020 滇ICP备20006698号