引荐一个在线接口Mock东西fastmock

2024年1月10日 273次阅读 来源: 龚明华

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

fastmock能够让你在没有后端顺序的情况下能真实地在线模仿ajax请求，你能够用fatmock完成项目早期纯前端的结果演示，也能够用fastmock完成开辟中的数据模仿从而完成前后端星散。以下面的接口

您能够直接在浏览器翻开上面的链接或许用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

    原文作者：龚明华
    原文地址: https://segmentfault.com/a/1190000018046586
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞